ในบทความนี้เราจะสอนการเขียน css โดยมีทฤษฎีต่างๆในการทำงานจริงๆอยากให้คุณได้เรียนรู้วิธีการและการคิดการเขียนไปนะครับ
ทฤษฎีกล่อง
หลังจากคุณได้ทำการสร้างไฟล์แล้วคุณก็อาจจะคิดว่าแล้ว tag ในภาษา html มันมีกี่อันใช้อันไหนบ้างที่จะทำให้เว็บเราสวยๆ เหมือนพวกเว็บที่เราเข้าบ่อยๆ อยากให้ใจเย็นๆก่อนครับ เดี๋ยวผมจะสอนต่อไปอย่างแน่นอนว่า tag อะไรจำเป็นบ้าง
tag ต่อมาที่จะสอนคือ tag div ครับเรียกได้ว่าเป็นพระเอกของเราเลยทีเดียว เพราะอะไรเจ้า tag div นั้นมันคือ tag ที่ browser จะทำการแปลงเป็น กล่องสี่เหลี่ยมครับ
การเขียนเว็บในปัจจุบันมันคือเอากล่องสี่เหลี่ยมมาซ้อนๆกันนั่นเอง ดูภาพง่ายๆจะเป็นแบบนี้ครับ
โดย css พวก tag ต่างๆใน html จะมีสองแบบคือ เป็นกล่องกว้างเต็มพื้นที่เสมอ กับ tag ประเภทกว้างเท่ากับ content เช่นพวก span, a ส่วนใหญ่มักเป็นพวก tag เกี่ยวกับอักษรครับ พวก header tag หรือ footer tag ก็ถือเป็นกล่องหนึ่งเหมือนกันครับ
เรามาทดสอบการแยกดูเป็นกล่องๆหน่อยกันดีกว่าครับจากรูปด้านล่างเราจะแยกเป็นกล่องยังไง
เราจะมองแยกแบบนี้ครับ
มองแยกเป็นกล่องใหญ่ๆก่อน อย่างภาพข้างบนจะเห็นว่าเรามองแยกเป็นกล่างระหว่าง กล่องแสดงผล title กับ กล่องที่เป็นกล่อง บทความ เอาล่ะเมื่อเราได้กล่องใหญ่ๆแล้วเราค่อยลงรายละเอียดในกล่องว่าในแต่ละกล่องต้องมองอย่างไรครับ
หลังจากนั้นเราค่อยๆมองในไปลงรายละเอียดว่าในกล่องนั้นๆมันต้องมีอะไรอีก ครับเราไปลองตัวอย่างเว็บอื่นๆบ้างแล้วกันครับเช่น Facebook
สิ่งแรกเวลาเรามองเว็บคือ แยกส่วน header กับส่วน content และส่วน footer ให้ได้ก่อนครับ อย่างตัวอย่าง facebook ซึ่งผมจะมองแยกง่ายๆสำหรับส่วน header กับส่วนเนื้อหาจะเป็นแบบนี้ครับ
เราจะแยกแบบนี้ครับแล้วค่อยไปลงรายละเอียดว่าในส่วน header นั้นเราจะมี input search แสดงชื่อ แสดงปุ่ม home อะไรก็ว่ากันไปแบบนี้ครับ
แล้วกล่องสำหรับแสดงเนื้อหาก็ค่อยไปแยกอีกทีอย่างในภาพด้านบนเราก็จะแบ่งเป็น 3 columns แล้วค่อยไปลงรายละเอียดในแต่ละ column ต้องทำอย่างไรต่อมีอะไรบ้าง
ค่าที่เราต้องรู้เกี่ยวกับ CSS กล่อง
หลังจากเราฝึกฝนระดับหนึ่งแล้วเรื่องการมองแยกเป็นกล่องๆ เรามาเรียนรู้ว่า css ที่เกี่ยวข้องกับกล่องมีอะไรบ้างนะครับ หลักๆจะมีตามนี้เลยครับ
- width ความกว้างกล่อง
- height ความสูงของกล่อง
- padding ระยะห่างจากกรอบกับเนื้อหาข้างในกล่อง
- margin ระยะจากกรอบด้านนอกกล่อง
- float สั่งให้กล่องลอยมีค่า left / right ไม่มี center นะจ๊ะ
- overflow การบอกว่าเนื้อหาภายในกล่องไม่ให้ใหญ่กว่ากล่อง
เหมือนจะเยอะมากแต่เราจะค่อยๆเรียนรู้การใช้งานไปทีละอย่างนะครับ เริ่มแรกเอาเรื่อง กว้าง สูง ก่อนนะครับ ไปดู code กันเลย
Document กล่องนี้สีแดง
ผลลัพธ์
โดยปกติแล้วค่า default ( ค่าเริ่มต้นถ้าเราไม่ได้กำหนดอะไร ) ของกล่องนั้นจะเป็นความกว้าง 100% และความสูง auto สังเกตุว่ามันจะสูงเท่ากับตัวอักษรข้างในเรามาลองเปลี่ยนค่าความกว้างและความสูงกันดูครับ
Document กล่องนี้สีแดง
ผลลัพธ์
สังเกตุว่ากล่อง ชิดซ้าย ซึ่งค่าเริ่มต้นมันจะชิดซ้ายเสมอครับ แล้วกล่องตอนนี้เราบอกว่าให้กว้าง 300px สูง 300px และมี background เป็นสีแดง เราเริ่มจะเข้าใจแล้วใช่ไหมล่ะครับว่าเราสามารถปรับความกว้างยาวได้
ส่วนหน่วย ‘px’ อันนี้คือค่าตายตัวคือกำหนดมาเท่าไร ก็เท่านั้นเป็นหน่วย ส่วน em คือค่าเป็น เท่าตัว โดยในหน่วยของกล่องที่ครอบอยู่เป็นตัวตั้ง เช่น กล่องที่ครอบคลุมมีขนาดอักษร 10px ส่วนกล่องข้างในเราใช้ 1.5em ก็จะเป็น 15px นั่นเอง อีกหน่วยคือ rem คือเอาจาก root หรือยึดที่เดียวเลยคือ เอาหน่วยของกล่องสูงสุดเป็นตัวตั้ง จริงตอนนี้เราจะใช้ px เป็นหลักนะครับ ส่วนใครอยากทำความเข้าใจเพิ่มเติมอ่านตรงนี้ได้เลยครับ //medium.com/hbot/css-units-px-em-rem-%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3-3c99bc940e7f
padding / margin
เรื่องนี้มีคนเข้าใจผิดเยอะมากกกกกก และสับสนบ่อยๆ ผมเลยต้องยกมาเป็นหัวข้อแยกเลยครับ เอาล่ะมาดูกันหน่อยว่ามันคืออะไรอ่ะนะครับ
padding คือ ระยะจากขอบกับเนื้อหาข้างในกล่อง อ่านแล้วงงใช่ไหมครับเรามาดูตัวอย่างกันดีกว่าเอา code ด้านล่างไปใส่เลยครับ
Document กล่องนี้สีแดง
เราจะได้ผลลัพธ์เป็นแบบนี้ครับ
สังเกตุว่าคราวนี้จะมีระยะระหว่างตัวอักษรข้างในกับขอบจะมากกว่าในตัวอย่างที่ผ่านมาครับดูจากภาพด้านล่างเลยครับ
ต่อมาถ้าหากคุณใช้ chrome อยู่อยากจะแนะนำเครื่องมือสำหรับคนทำเว็บด้าน front-end กันหน่อยครับไปที่เมนู เลือก more tools > developer tools ขึ้นมาครับหน้าตามันจะเป็นแบบนี้
หลังจากเลือกแล้วจะมี tab โผล่ขึ้นมาด้านข้าง อย่าเพิ่งตกใจว่ามันใช้ยังไงแบบนี้
ของบางคนจะโผล่ด้านขวามันสามารถปรับได้นะครับ เมื่อมันโผล่ขึ้นมาแล้วให้เรากดที่รูปลูกศรที่มันอยู่บนกล่องสี่เหลี่ยมครับตรงนี้
ไปจี้ที่กล่องสีแดงของเราครับหน้าตามันจะประมาณนี้
แต่อย่าเพิ่งสนใจตรงนี้ให้สังเกตุตอนที่เราชี้มันจะบอกว่าค่า padding เป็นเท่าไร แต่ถ้าเรายังไม่ทราบว่าตรงจุดไหนคือ padding ให้ไปดูต่อตรงกล่องด้านขวาของ tab developer tools ครับ ถ้าไม่เห็นกล่องให้เลื่อนเม้าส์ลงข้างล่างครับ
หากดูจากในกล่องจะเห็นพื้นที่สีเขียวตรงนั้นนั่นแหละครับที่เป็นพื้นที่ของ padding โดยจะเป็น 20 ทุกด้าน โดย padding เราสามารถใส่ค่าเดียวหรือค่าหมู่ได้โดยทำอย่างนี้ครับ
// หากอยากได้ทุกด้านมีค่าเท่ากันหมดให้ใส่ว่า padding: 20px; // หากอยากให้บนกับล่างเท่ากัน และขวากับซ้ายมีค่าเท่ากัน ให้ใส่สองค่าครับ padding: 20px 30px; // อย่างนี้ระยะห่างระหว่างบนกับล่างจะเท่ากับ 20px และ ซ้ายกับขวาเท่ากับ 30px // หากอยากใส่ค่าทุกค่าแยกกันเลยก็ให้จำไว้ว่ามันจะนับ ตามเข็มนาฬิกาคือ บน ขวา ล่าง ซ้าย padding: 10px 20px 30px 40px; // หากอยากใส่แค่ค่าเดียวสามารถกำหนดได้ดังนี้ padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;
เรื่องค่าที่มันเป็นตามเข็มนาฬิกาให้คุณจำไว้เลยเกือบทุกๆอย่างที่มันกำหนดค่าสี่ด้านจะเรียงแบบนี้เสมอ margin ก็เช่นกัน ต่อเราไปรู้จักกับ margin กันครับ
margin คือ ระยะห่างจากขอบกับข้างนอก อ้าวยังไงเรามาดูกันดีกว่าครับเอา code ด้านล่างไปลองรันก่อนครับ
Document กล่องนี้สีแดงกล่องนี้ฟ้า
ผลลัพธ์ของ code ด้านบนนะครับ
อธิบาย code นะครับในตัวอย่างนี้เรากำหนดให้กล่องสีแดงและสีฟ้ามีความกว้างและสูงเป็น 100px และกำหนดค่า margin: 30px; คุณจะสังเกตุว่ากล่องสีเขียวที่เป็นกล่องใหญ่คลุมสองกล่องนี้ ซึ่งถ้าคุณไม่ใส่ค่า margin กล่องสีแดงกับฟ้าจะชิดกันไม่ห่างกันอย่างนี้
โดยตอนนี้มีบางสิ่งที่คุณอาจจะยังไม่ทันสังเกตุว่ามันแปลกๆคือ ระยะห่างกล่องสีแดงกับสีฟ้า จริงๆแล้วมันควรจะห่างกันทั้งหมด 60px ไม่ใช่แบบนี้ ซึ่งหลายคนจะงงว่าแล้วมันผิดปกติยังไง ? จากตัวอย่างเราบอกว่าให้ค่า margin:30px; ซึ่งกล่องตอนนี้ห่างกัน 30px ซึ่งมันจะเป็นปัญหาในการจัด layout เพราะค่ามันจะเพี้ยนครับสิ่งที่จะมาแก้ไขปัญหาคือสองค่าที่เรากำลังจะพูดถึงครับนั่นก็คือ float, overflow นั่นเองครับ
float, overflow
float คือการบอกว่ากล่องนี้จะ ลอย ตามคำแปลของมันเลยครับ เหมือนึกว่ากล่องมันลอยอยู่ โดยการลอยนั้นเราจะเลือกให้ลอย ซ้ายกับขวา เท่านั้นไม่มีลอยตรงกลางนะครับ ส่วนใหญ่การใช้ float เราจะใช้เพื่อสำหรับ layout ที่มีหลายๆกล่อง อยู่ในแถวเดียวกัน หลายๆคนอาจจะเคยเห็นว่ามันทำให้กล่องอยู่ตรงกลางได้ อันนี้ผมจะบอกให้อีกทีว่าทำอย่างไรนะครับ ตอนนี้เรารู้จักกับเรื่อง float ก่อน
เรามาลองเล่นกับค่านี้กันดูครับ code ด้านล่างเลย
Document กล่องนี้จะลอยทางซ้าย
กล่องนี้จะลอยทางขวา
ผลลัพธ์
สังเกตุว่าผลลัพธ์ทำให้กล่องมันลอยไปชิดซ้ายสุดและขวาสุด สมมติว่าเราอยากทำ layout เป็นสามคอลัมน์ เขาทำกันอย่างไรล่ะ ? เขาก็จะทำสามกล่องให้ float left หมดเลยก็ได้หรือว่าขวาสุดจะ float right แบบนี้ครับโดยคราวนี้ผมจะใส่ค่ากว้างเป็น เปอร์เซนต์เพื่อให้คุณเห็นภาพชัดขึ้นว่าเวลาเขาทำเว็บมันเป็นยังไงนะครับไปดู code กันเลย
Document กล่องนี้จะลอยทางซ้ายความกว้าง 25%
กล่องนี้จะลอยทางซ้ายความกว้าง 50%
กล่องนี้จะลอยทางขวาความกว้าง 25%
ใน code ชุดนี้ผมเพิ่ม class ชื่อว่า w-25, w-50 เพื่อทำให้กล่องกว้างเป็นเปอร์เซนต์ อย่าลืมว่า css คอมพิวเตอร์อ่านจากบนลงล่างนะครับ ทำให้ความกว้างของคลาส w-25, w-50 มีผลนั่นเอง ต่อมาภาพในใจเราคือจะมีกล่องสีแดงอยู่ทางซ้ายสุดและกล่องตรงกลางเป็นสีเขียวมีความกว้างเป็น 50% ของหน้าจอและสุดท้ายกล่องสีน้ำเงินกว้าง 25% ลอยอยู่ทางขวาครับเอาล่ะมาดูผลลัพธ์กัน
เอ๊ะ !!! ทำไมผลลัพธ์เป็นแบบนี้มันควรจะเรียงติดกันในแถวเดียวกันสิแต่ทำไม กล่องสีน้ำเงินนั้นตกลงไปข้างล่าง ? ไม่ต้องตกใจไปอันนี้ผมตั้งใจให้คุณพลาดนั่นเอง เพราะคนส่วนใหญ่เขียน css ครั้งแรกจะเจอปัญหาแบบนี้ทั้งนั้นครับ
สิ่งหนึ่งที่เราลืมคิดไปคือเจ้า padding นั้นเอง แล้วมันเกี่ยวอะไรกัน ? คืออย่างนี้ครับ เรากำหนดแต่ละกล่องมีความกว้างรวมกันเป็น 100% ถูกต้องไหมครับ แต่ค่า padding นั้นมันคิดแยกกันครับยกตัวอย่างเช่น
สมมติเรากำหนดให้หน้าจอมีความกว้างเท่ากับ 100px แล้วกัน แล้วกล่องสีแดงเรากำหนดให้กว้าง 25% ถูกต้องไหมครับแปลว่าค่าของมันคือ 25px แต่ทีนี้เรากำหนดเรื่อง padding ไว้ 20px เพราะฉะนั้นความกว้างจริงๆมันคือ
ค่า padding-left + ความกว้างของกล่อง + ค่า padding-right ครับถ้าเราเอามาแทนในสูตรนี้ค่าจริงๆคือ
20 + 25 + 20 = 65 นั่นเองนี่คือค่าที่แท้จริงของกล่องซ้ายสุดงั้นเรามีดูว่าค่าที่เรากำหนดใน code เมื่อกี้มันเท่ากันจากสูตรที่ผมบอกไปโดยเรายังยกตัวอย่างหน้าจอกว้าง 100px นะครับ
- กล่องสีแดงกว้าง = 65px
- กล่องสีเขียวกว้าง = 90px
- กล่องสีน้ำเงินกว้าง = 65px
ซึ่งหลายคนจะคิดว่าทำไมมันยุ่งยากอย่างนี้จะจัด layout ต้องมานั่งคิดเลขอีกไม่ต้องห่วงครับผมรู้อยู่แล้วว่าหลายๆคนน่าจะคิดแบบนี้โชคดี ณ ทุกวันนี้เราไม่ต้องมาคำนวนเรื่อง padding / margin แล้วครับเพราะว่าเราจะมีพระเอกมาช่วยคำนวนเรื่องพวกนี้ให้แล้วครับนั่นก็คือ !!!!
box-sizing: border-box;
ค่า property box-sizing ตัวนี้จะช่วยเราคำนวนค่าต่างๆในกล่องให้ไม่เกินความกว้างที่เรากำหนดครับ เช่น จากตัวอย่างเดิมเรากำหนดความกว้างกล่องสีแดงเป็น 25% มันจะไปลดความกว้างแต่ยังให้ค่า padding เท่าเดิมเอาล่ะเป็นอย่างไรไปดู code กันเลย
Document กล่องนี้จะลอยทางซ้ายความกว้าง 25%
กล่องนี้จะลอยทางซ้ายความกว้าง 50%
กล่องนี้จะลอยทางขวาความกว้าง 25%
ผลลัพธ์
จะเห็นว่า box-sizing: border-box นั้นช่วยชีวิตเราได้เยอะมากจริงๆ หลายคนคงมีคำถามอีกว่าแล้วเราต้องมานั่งใส่ box-sizing: border-box ทุกอันเลยหรอ คำตอบคือ ใช่ต้องมาใส่ทุกอันครับ แต่ไม่ต้องห่วง ( อีกแหละ ! ) โลกนี้มีเครื่องมือมาช่วยเราเหมือนกันแต่ผมจะไปอธิบายเพิ่มเติมเป็นส่วนท้ายนะครับเพราะไม่ได้เกี่ยวกับเรื่อง layout โดยตรง
overflow
ต่อมาหลังจากเราเรียนรู้ไปแล้วว่า float มันทำอะไรได้แล้วจะมีเจ้า overflow ทำไม คือที่บอกว่าต้องใช้คู่กันเนี้ยเพราะว่าต่อมาถ้าสมมติเราจะทำ layout แบบมีสองแถว เจ้า overflow เนี้ยแหละครับคือตัวแบ่งแยกอ่ะเรามาดูตัวอย่างกัน
สมมติว่า goal ของเรื่อง overflow หน้าตาจะเป็นแบบนี้นะครับ
เอาล่ะเรามาลองคิดเล่นๆกันหน่อย สมมติจาก code เมื่อตอนเราเรียนรู้เรื่อง float เราจะปรับ code เล็กน้อยนะครับแบบด้านล่างเลย
Document กล่องนี้จะลอยทางซ้ายความกว้าง 25%
กล่องนี้จะลอยทางซ้ายความกว้าง 50%
กล่องนี้จะลอยทางขวาความกว้าง 25%
กล่องนี้จะลอยทางซ้ายความกว้าง 25%
กล่องนี้จะลอยทางซ้ายความกว้าง 50%
กล่องนี้จะลอยทางขวาความกว้าง 25%
เราทำการปรับกล่องตรงกลางเป็นกว้าง 25% และเพิ่ม class สีเขียวโดยสมมติว่าถ้าเราต้องการให้มันเป็นสองแถวแบบในภาพเป้าหมายสมมติเราไม่ใช้ overflow แบบใส่มา 6 กล่องเลยหน้าตาที่ออกมามันจะประมาณนี้ครับ
อย่างที่เห็น ณ ตอนนี้พอเราปรับกล่องกว้างเป็น 25% ทำให้ในแถวแรกมันพยายามเอากล่องไปใส่ให้เต็มซึ่งมันไม่ถูกต้อง หากเราจะแก้ปัญหาแบบไม่รู้เลยเราอาจจะสร้างอีกกล่องมาคุมให้กว้าง 75% ครับ ซึ่งผลลัพธ์ไม่ต่างกันครับสุดท้ายต่อให้เราเอาอะไรมาคุมมันก็จะไม่สองแถวเรียงสวยอยู่ดีครับเราจึงต้องใช้เจ้า overflow ในการมาช่วยเหลือตรงนี้ครับเอาล่ะไปดูกันว่ามันใช้ยังไง
Document กล่องนี้จะลอยทางซ้ายความกว้าง 25%
กล่องนี้จะลอยทางซ้ายความกว้าง 50%
กล่องนี้จะลอยทางขวาความกว้าง 25%
กล่องนี้จะลอยทางซ้ายความกว้าง 25%
กล่องนี้จะลอยทางซ้ายความกว้าง 50%
กล่องนี้จะลอยทางขวาความกว้าง 25%
เราเพิ่ม code ในส่วน css คือมี เพิ่ม .bg-blue กับ .row โดยพระเอกของเราคือ class row เราใส่ property overflow:hidden แล้วในส่วนของ code html เราเพิ่ม class row มาขึ้นระหว่างกล่อง สามกล่องครับผลลัพธ์ที่ได้
นอกจากเรื่องการทำให้ content แยกเป็นแถวแล้วจริงๆเจ้า overflow มันทำให้กล่องนั้นรับรู้ว่ามี กล่องที่ลอยอยู่ในตัวเองนะครับ พูดแล้วอาจจะงง สมมติถ้าเราปกติสมมติถ้าเราต้องการให้แถวแรกกับแถวที่สองห่างกัน 30px อย่างนี้มันจะไม่ทำงานถ้าเราไม่มี overflow มาจัดแถวให้ครับ
สรุป
ในบทความนี้เราได้เรียนรู้อะไรไปบ้างผมจะมาสรุปให้แบบสั้นๆในตอนท้ายนะครับ
- เราได้เรียนรู้ box view หรือมุมมองแบบกล่องเพื่อแยกได้ว่าเว็บแต่ละเว็บเขาทำสร้างมาแบบไหนเวลาเราได้รับภาพจาก designer เราต้องทำยังไง
- เราได้เรียนรู้เกี่ยวกับ css ในการสร้างกล่องคือ div นั่นเอง
- เราได้รู้ css เกี่ยวกับกล่องมีอะไรบ้าง width, height, padding, margin, float, overflow
จริงๆแล้วความรู้ด้านการทำ front-end ยังไม่จบแต่เพียงเท่านี้ แต่ความรู้เท่าที่คุณอ่านมาถึงบทความนี้นั้นเป็นพื้นฐานที่จะทำให้คุณหาความรู้ต่อยอดได้ไม่งงมาก ผมคิดว่าคุณน่าจะเข้าใจเรื่องการเขียน css แล้วเรื่องการทำเว็บของ front-end เบื้องต้นแล้ว
ก่อนจากกันในบทความนี้
เรายังไม่ได้จะหยุดทำเพียงเท่านี้ครับ ผมยังคงจะเขียนบทความต่อแต่อาจจะต้องไปเรื่อง Javascript ต่อแต่ผมอยากรู้ว่าถ้าคุณติดตามบทความตั้งแต่เริ่มมานั้น ผมมีสองทางเลือกให้คือ
- เขียนบทความด้าน front end เพิ่มเติม โดยผมจะเขียนลงลึกไปเรื่อง framework ยอมนิยมอย่าง bootstrap 4 และเรื่อง responsive ว่ามันทำงานยังไง แล้วการใช้ bootstrap ทำไมมันถึงได้นิยมนัก
- เขียนเรื่อง javascript ต่อเหมือนเดิมโดยในความจะลงเรื่องพื้นฐานการใช้ javascript กับ html นะครับอาจจะไม่ใช่เกี่ยวกับ nodejs เพราะตอนนี้ช่างใจอยู่ว่าควรจะไปสอน nodejs หรือยังคงเป็น PHP ดีผมอยากรู้จากคนที่ติดตามอ่านเพื่อจะได้สอนคุณให้ถูกทางใจผมที่ตอนแรกจะสอน PHP เพราะว่า WordPress ยังใช้ PHP อยู่ครับ
ยังไงก็ถ้าคุณอ่านถึงตรงนี้ผมขอบคุณ คุณมากจริงๆครับถ้าไม่มีผู้อ่านที่ติดตามบทความนี้ผมอาจจะไม่ได้เขียนต่อแล้วครับ ถ้าใครอ่านแล้วเลือกข้อไหนอย่างลืม comment ด้านล่างนะครับ
หากคุณยังไม่ได้ลงทะเบียนติดตามข่าวสารของเว็บผมแนะนำให้คุณสมัครเพื่อให้คุณรับข่าวสารบทความดีๆแบบนี้ก่อนใครครับ เจอกันบทความหน้านะครับสำหรับบทความนี้ สวัสดีครับ :)
กลับไปหน้าสารบัญ
https://oxygenyoyo.com/2021/01/18/index-getting-started-code-website/
