시맨틱태그 - 의미가 있는 태그
<form>
<table>
시맨틱 태그가 아닌 태그
div, span
1.<header> : 사이트 상단
2.<nav> : 메뉴
3.<section> : 영역
4.<article> : 영역 안 내용
5.<aside> :측면
6.<iframe> : 문서 포함하는 웹 브라우저(창)
-src: 웹 페이지의 경로
-seamless: 경계선 제외
-width,height
-scrolling - auto - 자동|yes - 스크롤바 O|no - 스크롤바X
-name: target에 iframe name을 지정해서 이동(부모창 -> 자식창)
7.<footer> : 하단쪽
8.<address> : 사이트 정보, 연락처, 주소
1.display 속성
:flex
-부모 요소 적용
-자식 요소의 배치
2.flex-direction
-row: 기본값- 좌 -> 우
-row-reverse: 우 -> 좌
-column: 상 -> 하
-column-reverse: 하단 -> 상
wrap: 줄개행O
3.order
-배치 순서 변경
-자식 요소에 적용
-숫자가 작을 수록 먼저 배치
.flex1 li:nth-of-type(현재 순서) {
order: 바꾸고 싶은 순서;
}
여백을 비율별로 배분
자식요소에 적용
.flex1 li {
width: 0;
}
너비를 0으로 만들면 내용에 관계없이 정확히 배분된다.
1.justify-content
flex-start: 왼쪽 정렬
flex-end: 오른쪽 정렬
center: 가운데 정렬
.flex1 {
justify-content: flex-start;
}
.flex2 {
justify-content: flex-end;
}
.flex3 {
justify-content: center;
}
space-between
space-around
space-evenly
-stretch: 기본값 - 부모 요소 높이에 자식 요소가 늘어난다.
-flex-start: 상단 배치
-flex-end: 하단 배치
-center: 가운데 배치