์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
- ComputerScience
- ๋ฐ์ดํฐ๋ฒ ์ด์ค
- html
- Python
- ํ์ด์ฌ
- ์๋ฐ์คํฌ๋ฆฝํธ
- css
- ์นํ์ด์ง๋ง๋ค๊ธฐ
- Java
- ๊นํ๋จ
- ๋ ์
- K๋ฐฐํฐ๋ฆฌ๋ ๋ณผ๋ฃจ์
- ์ฝ๋ฉ
- ์๋ฐ
- JavaScript
- database
- ์ฅํธ์์ค
- K๋ฐฐํฐ๋ฆฌ
- ๊น๋ฏธ๊ฒฝ
- ๊น๋ฏธ๊ฒฝ์๋งํ์์
- ์ปดํจํฐ๊ณผํ
- ๋ผํ๋ผ์ค์๋ง๋
- ๋ง์ผ๋ด๊ฐ์ธ์์๋ค์์ฐ๋ค๋ฉด
- ์ฑ
- ๋ฐ์ํ
- ์ํ
- ์ค๋ผํด
- ํ๋ก๊ทธ๋๋ฐ
- ์นํผ๋ธ๋ฆฌ์ฑ
- ๊ฐ๋ฐ
- Today
- Total
๋ชฉ๋กcss (4)
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/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/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) ํ๋ฉด์์ ๊ทธ๋ ค์ง๋ ๊ฐ์ฅ ์์ ์ ์ฌ๊ฐํ์ ๋งํ์ฌ, ..