| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 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 |
- javascript
- ํ์ด์ฌ
- ๋๋ฆผ์ฝ๋ฉ
- ํ๋ก์ ํธ
- ๋ ธ๋ง๋์ฝ๋
- HTML
- node.js
- ์๊ณ ๋ฆฌ์ฆ
- error
- Python
- ๋ชจ๊ฐ์ฝ
- KDT
- ํ๋ก๊ทธ๋๋จธ์ค
- ๊ทธ๋ฆฌ๋
- ์ฝ๋ฉ์ ํ
- ํฌ๋กค๋ง
- ๊ฐ๋ฐ
- mongodb
- ํ๋ก ํธ์๋
- ๊ตญ๋น์ง์
- ์ฝ๋ฉํ ์คํธ
- heapq
- ๋ฐฑ์ค
- CSS
- ํ ์ดํ๋ก์ ํธ
- react
- fe
- ์ฝ๋ฉ
- Til
- JS
- Today
- Total
๐ฑ → ๐ณ
[HTML/CSS] ๋๋ฆผ์ฝ๋ฉ ๊ฐ์ ์ ๋ฆฌ ๋ณธ๋ฌธ
HTML
1. ๋ญ๋ ์ง ๋๋์ด ๋ณด์ : ๋ฐ์คํํด์ (header, nav, footer, aside,,)
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
2. ์ด๋ค ๊ฒ์ ๋ฐฐ์ฐ๋ ํฐ ๊ทธ๋ฆผ์ ๋จผ์ ๋ณด์
tag๋ ํฌ๊ฒ 2๊ฐ์ง๋ก ๋๋ ์ ์์
: Box, item
[Box]
Header section
Footer article
Nav div
Aside span
Main form
[Item] ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ tag
a, button, input, label, img, video, audio, map, canvas, table
Block vs inline
Content + tag = element(node)
CSS
1. ์๋ฏธ, ์ ์
Cascading Style Sheet
Author style : CSS
User Style (๋คํฌ๋ชจ๋, ๊ธ์ ํฌ๊ธฐ ๋ฑ,,)
Browser
! important #cascading ๋ฌด์ฌํ๊ณ ๋ด๊ฐ ์ ํํ style ์ฌ์ฉ
2. ์ ํ์(selectors)
universal *
type Tag
ID #id
Class .class
State :
Attribute []
์ค์ต์ฝ๋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="naver.com">Naver</a>
<a href="googlenaver.com">Google</a>
<a>Empty</a>
</body>
</html>/* selector{
property: value;
} */
* {
color: green;
}
li {
color: blue;
}
#special {
color:pink;
}
.red {
width: 100px;
height: 100px;
padding: 20px;
margin: 20px;
/* border-width: 2px;
border-style: solid;
border-color: black; */
border: 2px solid black;
background: yellow;
}
button:hover{
color:red;
background: beige;
}
a[href="naver.com"] {
color:purple;
}
/* naver.com์ผ๋ก ํ๋๊ฒ๋ง ๋ฐ๊พธ๋๋ฒ
a[href="naver.com"]{
color:red;
background:beige;
}
naver๋ก ์์ํ๋ ๊ฒ๋ง ๋ฐ๊พธ๋๋ฒ
a[href^="naver"]{
color:red;
background:beige;
}
.com์ผ๋ก ๋๋๋๊ฒ๋ง ๋ฐ๊พธ๋๋ฒ
a[href$=".com"] {
color: red; */
background: beige;
}
padding : ์ปจํ
์ธ ์์ ์คํ์ด์ฑ
Margin: ์ปจํ
์ธ ๋ฐ
border
3. ์คํ์ผ๋ง
4. ํท๊ฐ๋ฆฌ๋ ์ปจ์
5. Css ๊ฝ: Flex box
'Client > HTML CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [HTML] HTML ๊ตฌ์กฐ (0) | 2022.06.19 |
|---|---|
| [CSS] Flexbox (0) | 2022.05.10 |
| [CSS] ๋ ์ด์์ ์ ๋ฆฌ display, position ์์ฑ (0) | 2022.05.10 |
| ๋ชจ๊ฐ์ฝ HTML/CSS ์ฌํ 2์ผ์ฐจ (0) | 2022.04.11 |
| ์ํ์ฝ๋ฉ html, css ์งง๊ฒ ๋ณด๊ธฐ (0) | 2022.03.16 |
