썸네일 출처 : https://aengduandyou.com/
2023.03.30 Today I Learned(TIL)
01. 시맨틱 태그(Semantic Tag)
1-1. 정의
- 의미가 있는 태그
- 용도에 따른 구분이 아닌, 웹 사이트에서의 역할과 의미에 따라서 사용함
1-2. 장점
- SEO(Search Engine Optimization) 최적화 = 검색 최적화
- 높은 웹 접근성
- 유지 보수의 용이성(가독성 향상)
1-3.자주 사용되는 시맨틱 태그
- header 태그 : 제일 상단을 의미하는 태그
- nav 태그 : 다른 페이지로 갈 수 있도록 하는 태그 (네비게이션)
- section 태그 : 문서의 일반적인 섹션, 연관있는 내용을 묶어줄 때 사용
- article 태그 : 컨텐츠들을 모아놓은 것
- footer 태그 : 사이트 하단에 저작권, 제작자 등의 세부 정보 표시
- aside 태그 : 주요 내용과는 관련 없는 내용 (like 마이페이지)
📌 header와 footer는 자주 사용함
02. CSS 심화
01. ol, ul 태그
ol 태그 : 순서가 있는 것
ul 태그 : 순서가 없는 것
<ol> <li>첫 번째입니다.</li> <li>두 번째입니다.</li> <li>세 번째입니다.</li> </ol> <ul> <li>첫 번째입니다.</li> <li>두 번째입니다.</li> <li>세 번째입니다.</li> </ul>ol { color: red; } ul { color: blue; }
03. 클래스 CSS 적용
3-1. .클래스명 태그 { }
-> 클래스가 적용된 li 태그들에 모두 적용
3-2. .클래스명 > 태그 { }
-> 바로 하나 밑의 자손만 적용
3-3. .클래스명 > 태그 태그 { }
-> 바로 하나 밑, 두번째 밑에 자손에 적용 (지정)
3-4. .클래스명 ~ 태그
-> 뒤따르는 같은 레벨에 있는 것들에 적용
3-5. .클래스명 + 태그
-> 지정된 클래스가 적용된 태그 바로 다음 태그에 적용
3-6. 태그:first-child, 태그:last-child
-> :(콜론)은 sudo class, 가상 클래스임 :
-> first-child는 첫 번째, last-child는 마지막
3-7. not(:last-child)
-> 지정된 것이 아닌 요소 가상클래스
-> last-child가 아닌 태그들에만 적용
3-8. not(.클래스명)
-> ul 중에서 클래스명이 적용되지 않은 ul 태그 아래의 li 적용
3-9. nth-child(숫자)
n번째 요소 가상 클래스
3-10. 태그:hover
마우스오버
<h1>결합자와 가상 클래스</h1> <ul class="outer"> <li>육류</li> <li>채소</li> <li>유제품</li> <li>과일 <ul> <li>사과</li> <li>포도</li> <li>딸기</li> <li>키위</li> </ul> </li> </ul> <ol> <li>한놈</li> <li>두시기</li> <li class="starter">석삼</li> <li>너구리 <ol> <li>test</li> <li>test</li> <li>test</li> </ol> </li> <li>다섯놈</li> <li>육개장</li> <li>칠푼이</li> <li>팔보채</li> <li>구공탄</li> </ol>.outer li { color: lightcoral; } .outer > li { color: lightblue; } /* 하나 밑 li들은 적용이 안됨, 그 밑 li에 적용됨 */ .outer > li li { text-decoration: underline; } .starter ~ li { color: lightskyblue; } .starter + li { font-weight: bold; } ol li:first-child, ol li:last-child { font-style: italic; } .outer > li:not(:last-child) { text-decoration: line-through; } ul:not(.outer) > li { font-size: 25px; } ol li:nth-child(3) { color: hotpink; } li:hover { font-weight: bold; color: blueviolet; }
04. inline-block
4-1. inline 태그
-> 대표적인 태그 : span
-> 컨텐츠만큼 잡힘
-> block 요소가 나오기 전까지는 모든 inline 요소를 한 줄에 넣음
-> setting한 width, height 무시 (작성해도 늘어나지도, 줄어들지도 않음)
4-2. block 태그
-> 대표적인 태그 : div
-> 전체 잡힘
-> 하나 당 한 줄을 차지함 (독점)
-> width, height를 작성하면 늘어나거나 줄어듦
4-3. 여백
padding > border > margin
margin
inline : 좌우에만 적용됨
block : 상하좌우 모두 적용됨
padding
inline : 상하좌우 모두 적용됨, 상하는 무시됨, inline요소는 상하로 겹침
block : 상하좌우 모두 적용됨, block요소끼리는 겹치지 않음
4-4. inline-block
-> 컨텐츠만큼 잡음
-> 크기 설정 가능
-> 한 줄이 채워질 때까지
-> margin과 padding은 모두 적용됨
-> 블록들 사이에 하나 띄운 정도의 칸이 생김
<span>span 요소</span> <div>div 요소</div> <span>span 요소</span> <span>span 요소</span> <div>div 요소</div> <div>div 요소</div> <span>span 요소</span> <span>span 요소</span> <span>span 요소</span> <div>div 요소</div> <div>div 요소</div> <div>div 요소</div> <br> 텍스트 사이에 들어있는 <span>span 요소</span>입니다. <br> <br> <div> div 요소 안에 들어있는 <span>span 요소</span> 입니다. </div> <br> <span>span 요소 안에 들어있는 <div>div 요소</div>입니다.</span>/* span { background-color: lightcoral; color: white; } */ div { background-color: pink; color: beige; } /* div { background-color: pink; color: beige; display: inline; } */ span { background-color: #8fc49d; color: white; display: block; } /* span { background-color: lightcoral; color: white; display: inline-block; } */ /* div { background-color: pink; color: beige; display: inline-block; } */
05. 마무리
📌 알아두기
- inline 태그
-> block 요소가 나오기 전까지 inline은 한 줄에 정렬됨
-> width, height 모두 무시
-> margin, padding좌우에만 적용됨 (padding은 위아래로 겹침) - block 태그
-> 하나 당 한 줄씩 차지함
-> width, height 적용됨
-> margin, padding상하좌우모두 적용, 겹치지 않음 - inline-block
-> 크기 설정 가능
-> 한 줄이 채워질 때까지 정렬됨
-> 블록들 사이에 칸이 생김
CSS 작업을 하면서 항상 잘 모르겠고 헷갈렸었던 span태그, div태그, margin과 padding에 대해서 오늘 확실하게 알게 되었다.
역시 사람은 공부를 해야되나보다 . . .
오늘도 알찬 공부였따 - 🌟✨⭐
