오늘의 꿀팁
💡 출근 첫날 일 안 줘도 회사 컨벤션 있는지 물어보고
있으면 공부하고 VS Code에 세팅하기!!
📝 시멘틱 마크업
- SEO(검색엔진 최적화)
- 장애가 있는 사용자에게 페이지를 탐색할 때 하나의 푯말 역할
- 태그의 가독성 및 유지보수 용이
but 구 브라우저 지원을 해야 하거나 다른 프로그램 등과의 호환을 고려해야 한다면 시멘틱이 꼭 정답이 아닐 수 있다!
header
헤더를 중첩 사용하거나 헤더 안에 푸터를 사용할 수 없다
ex) 회사명, 제목, 로고, 검색 폼, 작성자 이름 등
nav
하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등
하나의 웹페이지에 여러 개의 nav 태그를 가질 수 있다
but 주된 탐색 메뉴만, footer 등에는 사용하지 않는다
ex) 메뉴, 목차, 브레드크럼(breadcrumb)
footer
ex) 페이지의 작성자, 저작권정보, 관련 문서 등
main
body의 주요 콘텐츠를 나타낸다
웹페이지에서 한 번만 사용할 수 있다
사이드바, 탐색 링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해서는 안 된다
section
웹페이지의 앞뒤 문맥이 연결성이 필요하거나 더 적합한 의미를 가진 요소가 없을 때 사용한다
제목 요소를 자식으로 포함하여야 한다
article
<section>으로 구분이 가능한 내용 중
독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다
제목 요소를 자식으로 포함하여야 한다
ex) 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯(다크모드, TOP 버튼 등), 실시간 채팅창 등
aside
문서의 주요 흐름을 따라가지 않고 보조적인 역할만 하는 공간이다
ex) 각주, 광고 배너 등
hr
단락을 구분할 때 사용하므로 <p> 태그 내에서 사용하지 않는다
💡 div/span은 스타일링을 위해서만 사용하기
💡 div 남발하면 감점요소가 될 수 있다!
🎨 float
leftrightnone
float 해제하기
clear
주의사항 & 해결방법
-
자식 요소들이 모두 float 속성을 가지게 되면
부모 요소의 높이에 자식 요소들의 높이가 포함되지 않는다 -
해결방법
- 부모에게 높이 값 지정하기
- 부모에게
overflow:hidden주기
but 넘치는게 안보이는 부작용 있다 - clear-fix 방법: 부모의 가상 요소
::after사용하기
.container::after{
content:'';
display:block;
clear:left;
}- Block Formatting Context 만들기
💡 Block Formatting Context
웹페이지 화면에 CSS를 랜더링하는 과정의 한 부분으로,
block 레벨 요소들이나 float 된 요소들이 서로 상호작용 하여 화면에 보여지게 되는 방법(block formatting)을 결정하는 구역(context)
다음과 같은 경우 BFC가 생성된다
<html>요소를 사용했을 때- float: left, right
- overflow : visible 을 제외한 속성값(auto, hidden, scroll)을 사용했을 경우
- display: table-cell, inline-block, flow-root
- position: absolute, fixed 등등
BFC가 생성되면 다음과 같은 작용을 한다
- 내부, 외부 float 해제
- 마진 병합(margin collapsing) 현상 해결
💻 login 실습
https://github.com/yoonmallang22/HTML-CSS/tree/main/practice%F0%9F%92%BB/login
