์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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
- ๋ง์ผ๋ด๊ฐ์ธ์์๋ค์์ฐ๋ค๋ฉด
- ComputerScience
- ์๋ฐ
- ๋ผํ๋ผ์ค์๋ง๋
- ์ํ
- ๊น๋ฏธ๊ฒฝ์๋งํ์์
- ์ค๋ผํด
- css
- ๊น๋ฏธ๊ฒฝ
- ์ฝ๋ฉ
- ์นํผ๋ธ๋ฆฌ์ฑ
- K๋ฐฐํฐ๋ฆฌ
- Python
- ์ฅํธ์์ค
- JavaScript
- ์ปดํจํฐ๊ณผํ
- ๊ฐ๋ฐ
- ์นํ์ด์ง๋ง๋ค๊ธฐ
- database
- ์๋ฐ์คํฌ๋ฆฝํธ
- Java
- Today
- Total
๋ชฉ๋ก์นํผ๋ธ๋ฆฌ์ฑ (7)
JiYoung Dev ๐ฅ
![](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/blmEkf/btr116qtYu4/6S3Goan7VAiYE6r1ETuqLk/img.png)
์ด์ CSS ํต์ฌ ๊ฐ์๋ฅผ ๋ค ๋ฃ๊ณ ์ค๋ ๋ด๊ฐ ๋ง๋ ์นํ์ด์ง์ ์คํ์ผ์ ์ ํ๋ณด์๋ค. ์นด์นด์ค์ค๋ธ์ผ๋ก ๋ง๋ ์คํ ๋ฆฌ๋ณด๋ ๋์์ธ์ ๊ธฐ๋ณธ์ผ๋ก ํ์ผ๋, ํฐํธ ํฌ๊ธฐ๋ ์ฌ๋ฐฑ ๋ฑ์ ์์๋ก css๋ก ์ง์ ์ฝ๋ฉ์ ํด๋ณด๋ฉด์ ์ ๋นํ๊ฒ ์กฐ์ ํ์๋ค. ๐ css ์ฝ๋ ์์ฑ ๊ฒฐ๊ณผ ๊ฐ๋จํ ์นํ์ด์ง๋ผ์ ๋์ผํ ๋์์ธ์ ๊ตฌ์กฐ๊ฐ ๋ง์ ์์ฑ์ด ์ด๋ ต์ง ์์๋ค. ์์ฑํ๋ฉด์ ๋ชจ๋ฅด๋ ๋ถ๋ถ์ ๊ตฌ๊ธ๋ง์ ํตํด ํด๊ฒฐํ์๊ณ , ๊ทธ ๋ด์ฉ์ ์๋์ ๊ฐ๋ค. ๐ Div ํ๊ทธ ์ค์์ ์ ๋ ฌํ๊ธฐ Div ํ๊ทธ์ Width๋ฅผ ์ค์ ํ๊ณ margin ์ค๋ฅธ์ชฝ, ์ผ์ชฝ ๊ฐ์ auto๋ก ์ค์ โผ html ์ฝ๋ โผ โผ CSS ์ฝ๋ โผ ๐ ํ ์ค ๋ฌธ์ฅ ์์ชฝ ์ ๋ ฌํ๊ธฐ ํ ์ค์ง๋ฆฌ ๋ฌธ์ฅ์ ์์ชฝ ์ ๋ ฌํ๊ณ ์ถ์ด text-align: justify๋ฅผ ์ ์ฉํ์ง๋ง ์ ์ฉ๋์ง ์์์. ์ฌ๋ฌ ์ค์ผ ๊ฒฝ์ฐ์๋ ์ ๋ ฌ..
![](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/8Gis9/btr1lvTiJ4a/rZjxYIL3rKsA9DCIMuKiwK/img.png)
์ด์ ๊ฐ๋จํ๊ฒ ์คํ ๋ฆฌ๋ณด๋๋ฅผ ๋ง๋ค์๊ณ , ์ค๋์ ๋ง๋ ์คํ ๋ฆฌ๋ณด๋๋ฅผ ๋ณด๋ฉด์ HTML ์ฝ๋๋ฅผ ์์ฑํด ๋ณด์๋ค. ์์ง HTML ๊ธฐ์ด ๊ณผ์ ๋ง ๋ฐฐ์ดํฐ๋ผ ๋ฒํผ์ด๋ ์ธํ, ํ ์ด๋ธ ๋ฑ ์๋ฐฐ์ด ๊ฒ๋ค์ด ์์์ง๋ง ์๋ฐฐ์ด ๋ด์ฉ๋ค์ ๊ตฌ๊ธ๋ง์ด๋ ๊ธฐํ ์ฌ์ดํธ์ ๊ฐ๋ฐ์ ์ฝ์์ ํ์ฉํด ์ฝ๋๋ฅผ ๋ฐ๋ผํ๋ฉฐ ๋ฃ์์ผ๋ฉฐ ์์ผ๋ก ๋ฐฐ์๋๊ฐ๋ฉด์ ์ฐจ์ฐจ ์๋ง๊ฒ ์์ ํ๊ณ ์ ํ๋ค. ์ค๋๊น์ง ์์ฑํ ์ฝ๋๋ ์คํ์ผ์ ํ๋๋ ๋ค์ด๊ฐ ์์ง ์์ ์ฝ๋์ด๋ฉฐ, ์คํ์ผ์ ๋ด์ผ ์ ์ฉํด๋ณผ ๊ณํ์ด๋ค. ์ด๋ ๊ธฐ๋ก ์นํ์ด์ง ๋ง๋ค๊ธฐ : ๊ธฐํ ํฌ์คํ [์ด๋ ๊ธฐ๋ก ์นํ์ด์ง ๋ง๋ค๊ธฐ] ๊ธฐํ (2023.03.01) ํ๋ก๊ทธ๋๋ฐ ๊ณต๋ถ๋ฅผ ์์ํ๊ณ ๋์ ๋ง๋๋ ๋์ ์ฒซ ์นํ์ด์ง. ์ฌ์ค ํ์ด์ฌ ์๊ณ ๋ฆฌ์ฆ ๊ฐ์๋ฅผ ๋ฃ๋ค๊ฐ ์ด๋ ต๊ธฐ๋ ํ๊ณ ํฅ๋ฏธ๋ ์ค์ด๋ค๊ณ ๊ทธ๋์ CSS์ HTML ๊ณต๋ถ๋ฅผ ๊ฐ์ด ์์ํ๋ฉฐ ๋๋ง์ ์นํ..
![](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์์ ํ๊ทธ๋ ..