시멘틱 태그란?
의미 있는 태그로 마크업을 해줌으로
-
협업에서의 이점
-
직관성
-
seo에서 좋은 점수
-
접근성
~ 효과를 기대할수있다.
마크업에 관하여..
- tag는 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
- tag는 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.
- 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 필요가 있을 경우 사용한다.
섹션과 아티클 최종판.zip 이걸로 논란 종결
article[아티클!]
- 내용이 독립적이다
**하위 요소로 제목(h1~h6)나와야함**- 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적
으로 갖다 붙힐 수 있는 영역을 그룹화 - 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
- 게시판과 블로그 글, 매거진이나 뉴스 기사
<header> 요소와,<footer> 요소를 포함하기도 합니다.
section [섹션!]
- 논리적으로 관련된 집합체
**하위 요소로 제목(h1~h6)나와야함**<header> 요소와,<footer> 요소를 포함하기도 합니다.
위와 같은 기본적인 의미를 생각 한다면
안에 이 여러 개 들어가는 것은 조금 부자연스러울 수 있다. 왜냐하면 서로 관련 있는 내용을 모아 놓아야 할 안에 각각이 독립된 이 들어가 서로 다른 내용의 독립 이 배치되기 때문이다.
따라서
안에 이 들어가는 것이 자연스럽다.- 동봉된 컨텐츠가 그 독립된 자체만으로도 의미가 통하는가? 만약 그렇다면 를 사용하라
- 동봉된 컨텐츠가 주제와 관련된 것이가? 만약 그렇다면 를 사용하라,
- 만약 의미론적인 관련성이 없다면, 를 사용하라.
태그의 우선순위 점수
태그 : 1
클레스 : 10
가상요소(nth) : 10
아이디 : 100
캐스캐이딩 우선순위
1.!important
2.style attribute
3.id selector
4.class selector
5.tag selector
기법 [1~4]
1.위드가 있는 영역을 중앙으로 주고싶을때~
*주로 큰영역의 기준을 잡을때 쓰입니다
margin:0 auto;2.영역을 좌우 정렬하는 법
정렬을 시키고싶을땐 float 주면된다 / 플루트를 줬다면 해제(1)를 해라.
.box2{
background: #f00;
overflow: hidden;
}
.box2 div{
float: left;
}<div class="box2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
앱솔루트 써서 [상하, 좌우, 상하좌우] 주는법
position: absolute;
top: 50%;
left: 50%;
/*
- old -
margin-top: -25px;
margin-left: -50px; */
transform: translate(-50%, -50%);wai-aria 왜써야하나?
-aria-label 뜻이뭔지
-role 어떤걸 넣을수잇는지
모든 속성:값은 단축키를 활용
fi -> font:inherit
cri -> color:inherit```m0 -> margin:0
ml10 -> margin-left:10
mr10 -> margin-right:10
p0 -> padding:0
pl10 -> padding-left:10
pr10 -> padding-right:10
poa -> postion:absolute
por -> position:relative
pof -> position:fixed
t50p -> top:50%
l50p -> left:50%tftl -> transform:translate(x,y)
tftx -> transform:translateX(x)
tfty -> transform:translateY(y)
w:100 -> width:100
h:100 -> height:100
bgc#f00 -> background-color:#f00
bgr -> background-repeat:
bgs -> background-size:
bgp ->background-position:
fz100 -> font-size:100px
lh50 -> line-height:50px
tac -> text-align:center;
## **[Emmet (Zen Coding)](https://opentutorials.org/course/128/1395)**
```html
ID, CLASS 속성
div#page.section.main
<div id="page" class="section main"></div>
엘리먼트 복제
li*3
<li></li><li></li><li></li>
넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)
li.item$*3
<li class="item1"></li><li class="item2"></li><li class="item3"></li>
li.item$$$*2
<li class="item001"></li><li class="item002"></li>
텍스트
p>{click}
<p>click</p>
