HTML 주요 태그

- block

display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작
-> 해당 라인의 모든 너비 차지 ==> 다른 요소가 옆에 올 수 없음

- inline

display 속성값이 inline인 요소는 새로운 라인에서 시작하지 X
-> 요소의 너비도 html의 요소 내용 만큼 차지

시맨틱 태그(중요!)

- body 태그 내부

• header : 로고, 로그인, 폼, 검색창
• nav : 메뉴바
• section : 주제별 분류된 컨텐츠
• article : 독립된 성격, 기사, 본문
• aside : 홈페이지와 무관한 메뉴
• footer : 하단 정보(저작권)

시맨틱 태그의 중요성

HTML 문서의 구조적 의미 명확하게 나타낼 수 있음
검색 엔진 최적화(SEO)와 웹 접근성 개선할 수 있음

CSS

- CSS 선택자

• class
  주어진 이름의 클래스를 선택하는 선택자
  . 을 붙여 클래스 구분

• id
  #d을 붙여 아이디임을 구분

• tag
  HTML 문서의 태그 이름을 선택자로 사용
  p, h1, h2

• '*'
  페이지의 모든 요소를 가리키는 선택자

박스 모델

• content-box
  설정한 width와 height 값이 곧 요소 내부의 콘텐츠 크기

• border-box
  설정한 width와 height 값이 안쪽 여백과 테두리까지 포함
  

grid VS flexbox

display: grid;
2차원 레이아웃을 위한 시스템
-> 고정된 영역이 필요할 때/ 이미 결정된 레이아웃을 만들고 싶으면 Grid 속성 사용

display: flex;
한 방향(1차원) 정렬을 위한 레이아웃 시스템
-> 유연한 영역이 필요할 때 / 자유로운 레이아웃을 만들고 싶으면 Flex 속성 사용

- grid 코드 설명

- grid-template-columns: 1fr 1fr 1fr; -> 열 3개, 너비 1fr 지정

- grid-template-rows: 200px 200px 200px; 
또는	 grid-template-rows: repeat(3, 1fr); -> 행 3개, 너비 1fr 지정

- gap: 10px 20px; => 세로 가로 간격 지정

- grid-column

- flexbox 코드 설명

- display: flex;

- flex-direction: row; => 행(가로)으로 지정

- justify-content: flex-start; => 왼쪽부터 정렬
			     : center; => 가운데 정렬

- align-items: baseline; => 글자 기준선 맞춰서 정렬
			 : stretch; => 컨테이너의 맞게 정렬

Bootstrap

프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크
HTML과 CSS 기반의 템플릿 양식, 버튼, 네비게이션 등 여러가지 스타일의 레이아웃 정렬을 class만으로 제어

- 사용법

코드 복사해서 사용하면 된다!