โ๏ธ GURU/HTML523 [HTML5] 23. CSS3์ ํ + ์ ์ฌ๋ฐฑ ๋ฐ ์ ๋ ฌ + ์ ํฌ๊ธฐ + ๋ฐฐ๊ฒฝ์๊ณผ ํ ๋๋ฆฌ ํจ๊ณผ 23. CSS3์ ํ + ์ ์ฌ๋ฐฑ ๋ฐ ์ ๋ ฌ + ์ ํฌ๊ธฐ + ๋ฐฐ๊ฒฝ์๊ณผ ํ ๋๋ฆฌ ํจ๊ณผ # CSS3์ ํ ํ ๋๋ฆฌ ์ ์ด - border : ํ ํ ๋๋ฆฌ๋ฅผ ์ ์ดํ ์ ์์ ex 1) border-collapse : collapse; --> ์ค๋ณต๋ ํ ๋๋ฆฌ ํ๋๋ก ํฉ์น๊ธฐ # width, height ์ ์ ํฌ๊ธฐ ์ ์ด ex 1) th์ height๊ฐ 40px, width ๊ฐ 100px์ด๊ณ td์ height, width ๊ฐ ๊ฐ๊ฐ 20, 100px์ธ ๊ฒฝ์ฐ ex 2) ์ ์ ์์ # ์ ์ ๋ ฌ๊ณผ ์ ์ฌ๋ฐฑ - padding : ์ฌ๋ฐฑ์ ์กฐ์ ํ ์ ์์ - text-align : right, left, center ๋ฑ์ ์ ๋ ฌ์ ์ค์ ํ ์ ์์ ex) + ์ ์ ๋ชจ๋ ์ค๋ฅธ์ชฝ ์ ๋ ฌ๋ ์ํ์ # ๋ฐฐ๊ฒฝ์๊ณผ ํ ๋๋ฆฌ ํจ๊ณผ ex) + Line 2.. 2022. 7. 22. [HTML5] 22. CSS3์ ๋ฆฌ์คํธ ๊พธ๋ฏธ๊ธฐ + ํ ์คํธ ์จ๊ธฐ๊ธฐ์ visibility + overflow ํ๋กํผํฐ + ์์ดํ ๊ณผ ๋ฐฐ๊ฒฝ์ + ๋ง์ปค ์์น ๋ฐ ์ข ๋ฅ 22. CSS3์ ๋ฆฌ์คํธ ๊พธ๋ฏธ๊ธฐ + ํ ์คํธ ์จ๊ธฐ๊ธฐ์ visibility + overflow ํ๋กํผํฐ + ์์ดํ ๊ณผ ๋ฐฐ๊ฒฝ์ + ๋ง์ปค ์์น ๋ฐ ์ข ๋ฅ # visibility ์ ํ ์คํธ ์จ๊ธฐ๊ธฐ - ๊ณต๊ฐ์ ์ฐจ์งํ๋, ํ ์คํธ๋ ๋ณด์ด์ง ์๊ฒ ์ค์ ๊ฐ๋ฅ # overflow ํ๋กํผํฐ - overflow ํ๋กํผํฐ์ ๋ค์ํ ์ต์ (hidden, visible, scroll)๋ค์ ํ์ฉํ์ฌ ๋ด์ฉ์ ์ถ๋ ฅ ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ ์ ์๋ค. + ์ฒซ ๋ฒ์งธ ๋ฐ์ค๊ฐ ์ต์ hidden, ๋ ๋ฒ์งธ๋ visible, ์ธ ๋ฒ์งธ๋ scroll ์ ์ ์ฉํ ๊ฒฐ๊ณผ์ด๋ค. # CSS3 ํ๋กํผํฐ์ ๋ฆฌ์คํธ ๊พธ๋ฏธ๊ธฐ - ๋ฆฌ์คํธ ๋ชจ์์ ๊พธ๋ฐ ์ ์๋ CSS3 ํ๋กํผํฐ ํ๋กํผํฐ ์ค๋ช list-style-type ์์ดํ ์ ๋ง์ปค ํ์ ์ ์ง์ ํ๋ ํ๋กํผํฐ list-style-imag.. 2022. 7. 21. [HTML5] 21. ๋ฐ์ค์ ๋ฐฐ์น์ position ํ๋กํผํฐ + ์๋ ๋ฐฐ์น์ ์ ๋ ๋ฐฐ์น + ๊ณ ์ ๋ฐฐ์น + z-index ํ๋กํผํฐ 21. ๋ฐ์ค์ ๋ฐฐ์น์ position ํ๋กํผํฐ + ์๋ ๋ฐฐ์น์ ์ ๋ ๋ฐฐ์น + ๊ณ ์ ๋ฐฐ์น + z-index ํ๋กํผํฐ # ๋ฐ์ค ๋ฐฐ์น์ position ํ๋กํผํฐ - normal flow : ์น ํ์ด์ง์ ๋ํ์๋ ์์๋๋ก HTML ํ๊ทธ ๋ฐฐ์น : position ํ๋กํผํฐ๋ฅผ ์ด์ฉํด์ normal flow ๋ฅผ ๋ฌด์ํ ์ ์์ - position ํ๋กํผํฐ๋ฅผ ์ด์ฉํ ๋ฐฐ์น๋ฒ ์ ์ ๋ฐฐ์น(๋ํดํธ) ์๋ ๋ฐฐ์น ์ ๋ ๋ฐฐ์น ๊ณ ์ ๋ฐฐ์น ์ ๋ ๋ฐฐ์น positon : static position : relative position : absolute position : fixed float : left / float : right - position ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ ๋ ํ๊ทธ์ ์์น ๋ฐ ํฌ๊ธฐ : top, bottom, left, rig.. 2022. 7. 21. [HTML5] 20. ๋ฐฐ์น ๋ฐ ๋ธ๋ก ๋ฐ์ค + ์ธ๋ผ์ธ ๋ฐ์ค + ๋ฐ์ค ์ ํ ์ ์ด์ display ํ๋กํผํฐ 20. ๋ฐฐ์น ๋ฐ ๋ธ๋ก ๋ฐ์ค + ์ธ๋ผ์ธ ๋ฐ์ค + ๋ฐ์ค ์ ํ ์ ์ด์ display ํ๋กํผํฐ # ๋ฐฐ์น - CSS3๋ก HTML ํ๊ทธ๊ฐ ์ถ๋ ฅ๋ ์์น ์ง์ ๊ฐ๋ฅ : HTML ํ๊ทธ์ ๊ฒฝ์ฐ ์น ํ์ด์ง์ ์์ฑ๋ ์์์ ๋ค๋ฅด๊ฒ ๋ฐฐ์นํ ์ ใ - ๋ฐฐ์น ๊ธฐ๋ฅ์ ํ๋ CSS3 ํ๋กํผํฐ display position left right top bottom float z-index visibility overflow # ๋ธ๋ก ๋ฐ์ค์ ์ธ๋ผ์ธ ๋ฐ์ค : HTML ํ๊ทธ๋ ์ธ๋ผ์ธ ํ๊ทธ์ ๋ธ๋ก ํ๊ทธ๋ก ๋๋จ - ๋ธ๋ก ํ๊ทธ : ๋ธ๋ก ๋ฐ์ค๋ก ์ถ๋ ฅ + ๋ธ๋ก ๋ฐ์ค๋ ์ ๋ผ์ธ์์ ์์ + ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ ๋๊น์ง ๋ชจ๋ ์ ์ - ์ธ๋ผ์ธ ํ๊ทธ :์ธ๋ผ์ธ ๋ฐ์ค๋ก ์ถ๋ ฅ + ์ธ๋ผ์ธ ๋ฐ์ค๋ ๋ธ๋ก ์์ ๋ฐฐ์น๋จ + ์์ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ๋ฐฐ์นํ ์ ์์ # ๋ฐ์ค์ ์ ํ ์ ์ด.. 2022. 7. 20. [HTML5] 19. ๋ฐฐ๊ฒฝ + ํ ์คํธ ๊ทธ๋ฆผ์์ text-shadow ํ๋กํผํฐ + ๋ฐ์ค ๊ทธ๋ฆผ์์ box-shadow 19. ๋ฐฐ๊ฒฝ + ํ ์คํธ ๊ทธ๋ฆผ์์ text-shadow ํ๋กํผํฐ + ๋ฐ์ค ๊ทธ๋ฆผ์์ box-shadow # ๋ฐฐ๊ฒฝ - ๋ฐฐ๊ฒฝ ์ ๋ฐ ์ด๋ฏธ์ง ์ง์ : background-color, background-image ๊ฐ ๋ชจ๋ ์ง์ ๋๋ฉด ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ์ถ๋ ฅ๋์ง ์๋ ์์ญ์ ๋ฐฐ๊ฒฝ์์ ์ถ๋ ฅํจ ex. div { background-color : skyblue ; background-image : url ( " media/spongebob.png " ) ; } - ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์์น --> background-position ex. ๋ฐ์ค ์ค๊ฐ์ ์ด๋ฏธ์ง ์ถ๋ ฅํ๊ธฐ background-position : center center ; - ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๋ฐ๋ณต ์ถ๋ ฅ --> background-repeat ex. ์์์ ์๋๋ก ์ด๋ฏธ์ง ๋ฐ๋ณต .. 2022. 7. 20. [HTML5] 18. CSS3์ ๋ฐ์ค ๋ชจ๋ธ + border + ํ ๋๋ฆฌ 18. CSS3์ ๋ฐ์ค ๋ชจ๋ธ + border + ํ ๋๋ฆฌ # CSS3์ ๋ฐ์ค ๋ชจ๋ธ - ๊ฐ HTML ํ๊ทธ ์์๋ ํ๋์ ๋ฐ์ค๋ก ๋ค๋ฃจ์ด์ง --> ๋ฐ์ค์ ํฌ๊ธฐ ๋ฐ ๋ฐฐ๊ฒฝ ์, ์ฌ๋ฐฑ๊ณผ ์ ๋ฐ์ค์์ ๊ฑฐ๋ฆฌ ๋ฑ์ ์ ์ดํ ์ ์์ - ๋ฐ์ค ๋ชจ๋ธ์ ๊ตฌ์ฑ ์ฝํ ์ธ ํจ๋ฉ ํ ๋๋ฆฌ ์ฌ๋ฐฑ HTML ํ๊ทธ์ ์ด๋ฏธ์ง ๋ฐ ํ ์คํธ๊ฐ ์ถ๋ ฅ๋๋ ๋ถ๋ถ ์ฝํ ์ธ ๋ฅผ ๋๋ฌ์ธ๊ณ ์๋ ๋ด๋ถ์ ์ฌ๋ฐฑ ํจ๋ฉ ์ธ๋ถ์ ํ ๋๋ฆฌ๋ก, ์ง์ ๋ฐ ์ ์ , ์ด๋ฏธ์ง๋ก ํ ๋๋ฆฌ๋ฅผ ๊ทธ๋ฆด ์ ์์ ๋ฐ์ค์ ๊ฐ์ฅ ๋ฐ ์์ญ์ด์ ํ ๋๋ฆฌ ๋ฐ๊นฅ ๊ณต๊ฐ. ์ธ์ ํ ์ด์ ๋ฐ์ค์์ ๊ฑฐ๋ฆฌ์ด๊ธฐ๋ ํจ - ๋ฐ์ค ๋ชจ๋ธ์ ๊ตฌ์ฑํ๋ CSS3 ํ๋กํผํฐ ex) ์ ๋ฐ์ค ๋ชจ๋ธ ๋ณด์ด๊ธฐ - ๋ฐ์ค ๋ชจ๋ธ์ ์, ํ ๋๋ฆฌ ๋ฐ ๋จ์ถ ํ๋กํผํฐ ex) ๋ฐ์ค ๋ชจ๋ธ์ ํ์ฉ # border์ ์ , ๋ชจ์๋ฆฌ ํ ๋๋ฆฌ - ๋ค์ํ ํ ๋๋ฆฌ ์ ์คํ์ผ - ๋ฅ.. 2022. 7. 19. ์ด์ 1 2 3 4 ๋ค์