not now
- "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
- Opening tag :
<div>
~~~- closing tag : ~~~
</div>
- self-closing tag :
<img src="~">
<input type = "~">
yes
- div : 한 줄 차지
- span : contents의 크기만큼 차지
- ul : (unordered list)
- ol : (ordered list) 넘버링이 되어 나온다! :)
- li : (*ul, ol을 사용 후)list의 항목 나열!
<input type="text" ~>
: 글자를 사용할 수 있다.<input type="checkbox" ~>
: 중복하여 체크할 수 있다.<input type="radio" name="그룹" ~>
: 그룹으로 묶어 하나만 선택하게 만든다.
yes
- id : (이름표)
#
선택 | 한 문서에 하나의 요소 | 특정 요소에 이름- class: (반)
.
선택 | 동일한 값 요소가 많을 수 있음 | 스타일 분류에 사용
의미 있는 tag를 쓰자!
style
yes
- Inline style sheet :
<a style='color: red;'></a>
- Internal style sheet :
<style> body{wirdth:300px;} </style>
- Linking style sheet :
<link rel='stylesheet' href='css이름.css'>
관심사 분리 때문이다.
yes
- color : hex(16진법) 혹은 주요색상
- 글꼴 :
"글꼴1", "글꼴2", "글꼴3"
-> (fallback) 지원하지 않은 형식일 경우 오늘쪽 글꼴로 넘어간다.font-weight
굵기font-decoration
밑줄font-spacing
자간font-height
행간font-align
정렬 등등
- 절대단위, 상대단위가 있다. (반응형은 상대단위이다.)
yes
- block box : 줄바꿈o
<h1>
<p>
<div>
<- 너비 100%- inline box : 줄바꿈x
<span>
<-(width, height 속성 적용x) 글자만큼!- inline-block box : 줄바꿈x <- 글자만큼!
yes
yes
(바깥) ->
margin
->border
->padding
->content
- content-box :
content
영역을 기준으로 +padding
+border
크기를 정한다. (최종 크기가 넘어갈 수 있다!)- border-box :
margin
을 제외하고border
크기를 기준으로padding
과border
값에 영향을 받지 않고 원하는 대로 설정할 수 있다.- 사용 예시:
box-sizing:border-box
jabae님 화이팅^ㅡ^/