์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- ๋ฐ์ดํฐ๋ฒ ์ด์ค
- K๋ฐฐํฐ๋ฆฌ๋ ๋ณผ๋ฃจ์
- ์นํ์ด์ง๋ง๋ค๊ธฐ
- ์ปดํจํฐ๊ณผํ
- ์ฅํธ์์ค
- html
- ์๋ฐ์คํฌ๋ฆฝํธ
- ์ค๋ผํด
- Java
- ๋ง์ผ๋ด๊ฐ์ธ์์๋ค์์ฐ๋ค๋ฉด
- ๋ผํ๋ผ์ค์๋ง๋
- ํ๋ก๊ทธ๋๋ฐ
- ์ฑ
- ๋ ์
- ๊น๋ฏธ๊ฒฝ
- K๋ฐฐํฐ๋ฆฌ
- ํ์ด์ฌ
- JavaScript
- ๊นํ๋จ
- ComputerScience
- ์ํ
- Python
- ๊น๋ฏธ๊ฒฝ์๋งํ์์
- database
- ์๋ฐ
- ๊ฐ๋ฐ
- ์นํผ๋ธ๋ฆฌ์ฑ
- css
- ๋ฐ์ํ
- ์ฝ๋ฉ
- Today
- Total
๋ชฉ๋กfull stack/HTML, CSS (10)
JiYoung Dev ๐ฅ
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/rOUEt/btsc1MV3xhl/lnULaCOm0bkF3qsnKpTEjk/img.png)
๐ ์ด์ ๋ฐฐ์ด ๋ด์ฉ ์ ๋ฆฌ Box Model - Content : ๋ด์ฉ - Padding : ์์ชฝ ์ฌ๋ฐฑ - Border : ๊ฒฝ๊ณ์ - Margin : ๋ฐ๊นฅ ์ฌ๋ฐฑ Box-Sizing 1. content-box (default) : content ๋งํผ๋ง์ ํฌ๊ธฐ๋ก ์ผ๋ 2. border-box : border๊น์ง๋ฅผ ํฌ๊ธฐ๋ก ์ผ๋ => ๋๋ ํจ๋ฉ๊ฐ์ ์ฃผ๊ณ ์ถ์ง๋ง, ์ ์ฒด์ ์ธ ํฌ๊ธฐ์๋ ์ํฅ์ ์ฃผ๊ณ ์ถ์ง ์์ ๋ ์ฌ์ฉ! border-box Border-Radius - ํ ๋๋ฆฌ๋ฅผ ๋ฅ๊ธ๊ฒ ๋ง๋ค์ด์ฃผ๋ ์์ฑ border-์/์๋-์ข/์ฐ-radius Flex Box - Container์ Item ์ ๋๋๋ ์์ ์ด ๋จผ์ - Item : ๋ด๊ฐ ์์ง์ด๊ณ ์ ํ๋ ์์ - Container : ์์ดํ ์ ๋ถ๋ชจ์์ a. container์ ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/85GH6/btscTjlN6jP/xso5U8ahUM0w0GmwSJgjaK/img.png)
๐ ๋ฐ์ค ๋ชจ๋ธ(box model) ๋ชจ๋ HTML ์์๋ ๋ฐ์ค(box) ๋ชจ์์ผ๋ก ๊ตฌ์ฑ๋๋ฉฐ, ์ด๊ฒ์ ๋ฐ์ค ๋ชจ๋ธ(box model)์ด๋ผ๊ณ ๋ถ๋ฆ → ๋ฐ์ค๋ ๊ณต๊ฐ ํจ์จ์ฑ์ด ์ข๊ธฐ ๋๋ฌธ ์์์ ๋ถํผ๊ฐ์ ๊ฒฐ์ ํ๋ ๊ฐ๋ ๋ฐ์ค๋ชจ๋ธ์ HTML ์์๋ฅผ ํจ๋ฉ(padding), ๋ง์ง(margin), ๊ทธ๋ฆฌ๊ณ ๋ด์ฉ(content)์ผ๋ก ๊ตฌ๋ถ 1. ๋ด์ฉ(content) ํ ์คํธ๋ ์ด๋ฏธ์ง๊ฐ ๋ค์ด์๋ ๋ฐ์ค์ ์ค์ง์ ์ธ ๋ด์ฉ ๋ถ๋ถ 2. ํจ๋ฉ(padding) ๋ด์ฉ๊ณผ ํ ๋๋ฆฌ ์ฌ์ด์ ๊ฐ๊ฒฉ (๋์ ๋ณด์ด์ง ์์) 3. ํ ๋๋ฆฌ(border) ๋ด์ฉ๊ณผ ํจ๋ฉ ์ฃผ๋ณ์ ๊ฐ์ธ๋ ํ ๋๋ฆฌ 4. ๋ง์ง(margin) ํ ๋๋ฆฌ์ ์ด์ํ๋ ์์ ์ฌ์ด์ ๊ฐ๊ฒฉ (๋์ ๋ณด์ด์ง ์์) ๐ ๋ง์ง(margin) ํ ๋๋ฆฌ๋ฅผ ๊ธฐ์ค์ผ๋ก ์์์ ๋ฐ๊นฅ ์ฌ๋ฐฑ ์ง์ background-color ์์ฑ์ผ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/HYNYO/btscHd775v4/4gMfTIwohgrUJkTioJOBz0/img.png)
์ฝ๋ ์์ฑ์ ์ฃผ์ ์์ฑ์ ํตํด ๋ค๋ฅธ ์ฌ๋์ด ์ฝ๋๋ฅผ ๋ณด์๋ ์ดํดํ๊ธฐ ์ฝ๋๋ก ํ ๊ฒ! ๐ CSS ๐ CSS(Cascading Style Sheets)๋? HTML๋ฌธ์์ ์คํ์ผ์ ๊พธ๋ฐ ๋ ์ฌ์ฉํ๋ ์คํ์ผ ์ํธ ์ธ์ด (ํ๋ก๊ทธ๋๋ฐ ์ธ์ดX, ๋งํฌ์ ์ธ์ดX, ์คํ์ผ ์ํธ ์ธ์ดO) Cascading(์บ์ค์ผ์ด๋ฉ)์ ํญํฌ, ์์์ ์๋๋ก ์์์ง๋ ๋ป์ ๊ฐ์ง ๋จ์ด๋ก ๊ฐ์ ์์์ ์ฌ๋ฌ ๊ฐ์ ์คํ์ผ์ด ์ค๋ณต๋์์ ๋ ์คํ์ผ ์ฐ์ ์์์ ์์์ ํตํด ์ด๋ค ์คํ์ผ์ ์ ์ฉํ ์ง ๊ฒฐ์ ํ๋ค๋ ์๋ฏธ ๐ ์ CSS๋ฅผ ๋ฐ๋ก ๋ง๋ค์์๊น? HTML๋ง์ผ๋ก ์นํ์ด์ง๋ฅผ ์ ์ํ๋ ๊ฒฝ์ฐ HTML ์์์ ์ธ๋ถ ์คํ์ผ์ ์ผ์ผ์ด ์ง์ ํด์ผ ํจ. ์ด ์์ ์ ๋งค์ฐ ๋ง์ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ฉฐ, ์์ฑํํ์๋ ์คํ์ผ์ ๋ณ๊ฒฝ ๋ฐ ์ ์ง ๋ณด์๊ฐ ์ด๋ ค์. → ์ ๋ณด ํํ(HTML)๊ณผ ๋์์ธ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/Seoui/btscJmJFLEa/9UtegWzENKW4DbiTnklhk1/img.png)
๐ ๋ฆฌ์คํธ ํ๊ทธ ๐ unordered list ๋ฒํธ ์๋ ๋ชฉ๋ก์ ์ ์ธํ ๋ ์ฌ์ฉํ๋ ํ๊ทธ ๐ ordered list ๋ฒํธ ์๋ ๋ชฉ๋ก์ ์ ์ธํ ๋ ์ฌ์ฉํ๋ ํ๊ทธ ๐ list item , ํ๊ทธ ์์์ ์ฝํ ์ธ ๋ฅผ ๋ด๊ธฐ ์ํด ๊ณตํต์ ์ผ๋ก ์ฌ์ฉ๋๋ ํ๊ทธ ๋ฆฌ์คํธ ํ๊ทธ ๋ธ๊ธฐ ๋ฐ๋๋ ์ฌ๊ณผ JAVA DB ์ค์ต! ๊ตฌ๋งค ๋ชฉ๋ก ๋ธ๊ธฐ ์๊ณ ๊ธฐ ์ค๋ธ์ค๋ธ ์ค๋ธ์ค๋ธ ์์ ์ก์์ ์์ค๋ฅผ ๋ฃ๋๋ค ์ฌ๋ฃ๋ค์ ๋ฃ๋๋ค ๊ณ ๊ธฐ๋ฅผ ๋ฃ๋๋ค ๐ ์ด๋ฏธ์ง ํ๊ทธ ์นํ์ด์ง์ ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ฃผ๋ ํ๊ทธ ํ์ ์์ฑ → src : ์ด๋ฏธ์ง์ ๊ฒฝ๋ก๋ฅผ ์ง์ โ๏ธ ๊ฒฝ๋ก๋ฅผ ์๋ ค์ฃผ๋ ๋ฐฉ๋ฒ 1. ์ ๋ ๊ฒฝ๋ก ์ด๋ค ํ์ด์ง๋ ํ์ผ์ด ๊ฐ์ง ๊ณ ์ ํ ๊ฒฝ๋ก ์ธ๋ถ ์นํ์ด์ง๋ก ์ฐ๊ฒฐํ ๋ ์ฌ์ฉ ๋ด๊ฐ ํ์ผ์ ์ด๋์์ ์ฌ์ฉํ๊ณ ์๋ ์ ๋๊ฒฝ๋ก๋ ์์ ํ ํ์๊ฐ ์์ ๊ทธ๋ฌ๋ ์๋ณธ์ด ์ฌ๋ผ์ง๊ฒ ๋๋ฉด ํจ๊ป ์ฌ๋ผ์ง 2..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cbdMgK/btsbXJ69qWb/CxgpCYWqlJD2KbbhLKWHWK/img.png)
๐์ธํฐ๋ท(Internet) ์ฌ๋ฌ ํต์ ๋ง์ ํ๋๋ก ์ฐ๊ฒฐํ๋ค๋ ์๋ฏธ์ธ '์ธํฐ ๋คํธ์ํฌ(inter-network)'์ ๋ง์์ ์์ ์ ์ธ๊ณ ์ปดํจํฐ๋ฅผ ํ๋๋ก ์ฐ๊ฒฐํ๋ ๊ฑฐ๋ํ ์ปดํจํฐ ํต์ ๋ง https://www.huffingtonpost.kr/news/articleView.html?idxno=29681 ํด์ ์ผ์ด๋ธ๊ณผ ์ธํฐ๋ท ์ค๋งํธํฐ ์ธ์์์ ๋ชจ๋ ์ ๋ณด๊ฐ ๋ฌด์ ์ผ๋ก ์ค๊ฐ๋ ๊ฑธ๋ก ๋ณด์ด์ง๋ง, ์ค์ ๋ก ๊ด์ผ์ด๋ธ์ด ๋ด๋นํ๋ค. ๊ตญ๋ด์์ ์ธํฐ๋ท์ ์ฐ๊ตฌ๋ง์ธ ํ๋๋ง์ด ์์ฑํต์ ์ผ๋ก ํ์์ด๋ํ์ ์ฐ๊ฒฐ๋ ๊ฒ ์์์ด์ง๋ง, 1991๋ www.huffingtonpost.kr ์ธํฐ๋ท์ ํด๋ผ์ด์ธํธ์ ์๋ฒ๋ก ๊ตฌ์ฑ๋๋ฉฐ, TCP/IP๋ผ๋ ๊ธฐ๋ณธ ํ๋กํ ์ฝ์ ํตํด ์ ๊ณต๋จ ๐์น(WEB) ์๋ ์์ด๋ ์น(World Wide Web) = WWW = W3 = ์น(W..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/na9ZN/btr2D0xJ8LH/hWb9yLIkCHGn4UOiUBTXR1/img.png)
2023.03.07~2023.03.08 ์ฝ๋์ ํ์ต๋ด์ฉ ๐ Position ์์ฑ ๊ธ์ ํ๋ฆ์์ ๋ฒ์ด๋ ์์๋ฅผ ์์ ๋กญ๊ฒ ๋ฐฐ์นํ ๋ ์ฐ๋ ์์ฑ ๊ธฐ๋ณธ๊ฐ์ static์ด๊ณ , static์ธ ๊ฒฝ์ฐ ์๋ ์์ด์ผ ํ ์์น์ ๋ฐฐ์น๋จ ๐ ์์น ์ ํ๊ธฐ top, right, bottom, left ์์ฑ์ผ๋ก ์์น๋ฅผ ์ ํ ์ ์์ ์์ 4๊ฐ์ ๊ฐ์ด ๋ชจ๋ ๊ฐ์ ๊ฒฝ์ฐ inset ์์ฑ ์ฌ์ฉ ๐ relative ํฌ์ง์ ์์์ ์๋ ์์น๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์นํจ. ์ด๋ ์์์ ์๋ ์๋ฆฌ๋ ๊ทธ๋๋ก ์ฐจ์งํ๊ณ ์์. .blue { background-color: blue; width: 200px; height: 50px; position: relative; top: 15px; left: 10px; } ๐ absolute ํฌ์ง์ ๊ฐ์ฅ ๊ฐ๊น์ด ํฌ์ง์ ๋์ด..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cOK5q5/btr2m1JBFrz/vqJfk04VR8wK11eP6RyMsK/img.png)
2023.03.06 ์ฝ๋์ ํ์ต ๋ด์ฉ ๐ HTML (Hypertext Markup Language) - Hypertext(ํ์ดํผํ ์คํธ) : ์๋ก ๋งํฌ๋ก ์ฐ๊ฒฐ๋ ๋ฌธ์ - Markup Language(๋งํฌ์ ๋ญ๊ท์ง) : ๋งํฌ์ ํ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด → mark something up : ํ์ํ๋ค โถ ๋ด์ฉ์ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ํ์ํ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด - ์ฆ, ๋งํฌ๋ก ์ฐ๊ฒฐ๋ ๋ฌธ์๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉํ๋, ๋ด์ฉ๋ฟ๋ง ์๋๋ผ ๋ฌธ์์ ๊ตฌ์กฐ์ ์๋ฏธ(h1, p, button ๋ฑ)์ ๊ฐ์ ์ถ๊ฐ์ ์ธ ์ ๋ณด๊น์ง ํ์ํ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด ๐ HTML์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ ... ๋ด์ฉ html์ ํ๊ทธ๋ก ์์ฑ ํ๊ทธ๋ ๊ธฐํธ๋ก ๊ฐ์ธ์ ธ ์์ ์์ํ๊ทธ, ์ข ๋ฃํ๊ทธ ์์..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/1Jhg0/btr1HhTT1Lk/cLl0LkRmVCURbkgyM2aTSk/img.png)
2023.03.01 ~ 2023.03.03 ์ฝ๋์ ํ์ต๋ด์ฉ ๐ CSS ๊ท์น HTMLํ๊ทธ์ ์คํ์ผ ์์ฑ์ ์ถ๊ฐํ์ฌ ์คํ์ผ์ ์ ํ ์ ์์์. ๊ทธ๋ฌ๋ ์ด ๋ฐฉ๋ฒ์ ๋์ผํ ์์ฑ์ ์ฃผ๊ณ ์ถ์ ํ๊ทธ๊ฐ ์ฌ๋ฌ ๊ฐ์ผ ๋ ์คํ์ผ์ ์ ํ๋ ๊ฒ ๋ฒ๊ฑฐ๋ก์์ง. ๋ฐ๋ผ์ ๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ(seperation of concerns)๋ฅผ ์งํํจ. ์ฆ, ๋ด์ฉ๊ณผ ์คํ์ผ์ ๋ถ๋ฆฌํ๋ ๊ฒ. ๊ด์ฌ์ฌ๋ฅผ ๋ถ๋ฆฌํ๋ฉด ๋ด์ฉ๊ณผ ์คํ์ผ์ ๋ฐ๋ก ๊ณ ์น๊ธฐ ํธํ๊ณ , CSS ํ์ผ์ ๋ฐ๋ก ์ ์ฅํ๊ธฐ ํธํจ. ๋ฐ๋ผ์ CSS ์์ฑ์ ํ๋ํ๋ ํ๊ทธ์ ๋ฃ๊ธฐ๋ณด๋ค๋ CSS ๊ท์น์ ์ ํด ๋๊ณ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํจ ๊ธฐ๋ณธ ๋ฌธ๋ฒ: ์ ํ์ { ์์ฑ: ์์ฑ๊ฐ; ์์ฑ: ์์ฑ๊ฐ; } ์์ฑ ์: h3 { color: #ffffff; font-size: 20px } ๐ CSS ์ ํ์ ๊ท์น์์ ์์๋ฅผ ์ ํํ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/OrkfW/btr1ddLf8OK/I1hkhtNJKZrSQmvFj7he0K/img.png)
2023.02.28 ์ฝ๋์ ๊ฐ์ ๋ด์ฉ ๐ style ์์ฑ ํ๊ทธ์ CSS๋ฅผ ์ ์ฉํ๋ ค๋ฉด style์ด๋ผ๋ ์์ฑ์ ์ฌ์ฉ CSS ์ฝ๋๋ฅผ ์ถ๊ฐํ ๋๋ CSS ์์ฑ: CSS ์์ฑ๊ฐ ํํ๋ก ์์ฑ ์ฌ๋ฌ ๊ฐ์ CSS ์์ฑ์ ์ฌ์ฉํ ๋๋ ์ธ๋ฏธ์ฝ๋ก (;)์ผ๋ก ๊ตฌ๋ถ ๐ CSS ๊ธฐ๋ณธ ๋จ์ ๐ ์์ด๋ฆ red, green, yellow์ฒ๋ผ ์์์ ์ด๋ฆ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ์ → ๋ค์ํ ์์ ํํํ๋๋ฐ ํ๊ณ๊ฐ ์๊ธฐ ๋๋ฌธ์ ๊ฑฐ์ ์ฌ์ฉํ์ง ์์ ๐ ์์ ์ฝ๋ ์์์ HEX(16์ง์)๋ก ํํํ ๊ฐ. ๋ณดํต ์ด ๊ฐ์ผ๋ก ์์์ ์ฌ์ฉ. ๋ชจ๋ ์๊น๋ค์ ํผ์ณ ๋๊ณ ํ๋์ฉ ์ฝ๋๋ฅผ ๋ถ์ฌํ ๊ฒ์ผ๋ก ๊ตฌ๊ธ์์ 'color picker' ๋ฑ์ ๊ฒ์ํ์ฌ ์์ ์ฝ๋๋ฅผ ํ์ธํ ์ ์์ ๐ ํฝ์ (Picture element) ํ๋ฉด์์ ๊ทธ๋ ค์ง๋ ๊ฐ์ฅ ์์ ์ ์ฌ๊ฐํ์ ๋งํ์ฌ, ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/JHVPg/btr0WeDQUri/bPU8o0qbIpFsd9AwDGW901/img.png)
๐ HTML, CSS๋? HTML, CSS๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด(์ปดํจํฐ ํ๋ก๊ทธ๋จ์ ๋ง๋ค ๋ ์ฌ์ฉํ๋ ์ธ์ด) ์์ค ์ฝ๋ : ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก ์์ฑํ ๋ด์ฉ ์ฝ๋ฉ ํ๋ค : ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ค. HTML์ ์น์ฌ์ดํธ์ ๋ค์ด๊ฐ๋ ๋ด์ฉ์ ๋ด๋นํ๊ณ , CSS(Cascading Style Sheets)๋ ์น์ฌ์ดํธ์ ๋ค์ด๊ฐ ์คํ์ผ์ ๋ด๋น ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ๋๋ ๊ธฐ๋ณธ์ ์ผ๋ก .html ํ์์ ํ์ผ์ ๋ง๋ฆ. HTML ํ์ผ์ ํธ์งํ ๋ค์์ ์น ๋ธ๋ผ์ฐ์ ์์ ์ด๋ฉด ์ฐ๋ฆฌ๊ฐ ํ์์ ๋ณด๋ ์น์ฌ์ดํธ์ฒ๋ผ ํ๋ฉด์์ ๋ณผ ์ ์์. HTML ํ์ผ์ ์์ฑํ๊ธฐ ์ํด VS Code๋ฅผ ์ฌ์ฉํ๊ณ , ์น ๋ธ๋ผ์ฐ์ ๋ก๋ ํฌ๋กฌ์ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด ๋ณผ ์์ . ๐ HTML ํ์ผ ๋ง๋ค๊ณ ์คํํด๋ณด๊ธฐ ๐ ํ๊ทธ(Tag) HTML์์ ํ๊ทธ๋ ..