11.02 코딩 이론 공부

HTML : 뼈대 / CSS : 전체 스타일링

 

시멘틱구조 : HTML에서 웹 콘텐츠의 의미에 맞는 태그를 사용하여 문서 구조를 명확하게 만드는 것

- header

- main

- footer

 

엘리먼트 : [여는태그][/닫는태그] 전체를 부르는 말

 

h1 ~  h6 : 제목태그

- h1 : html 문서에서 딱 한번만 사용 가능, 계층 정보를 나타낼 수 있는 중요한 태그

- 순서 숫자대로 사용 가능함, h1태그 제외 다른 태그는 반복 사용도 가능

 

* h : 제목

* p : 문단

* span : 단어

* 위 세개를 묶으면 div나 section이 됨

 

노멀라이즈 : 기본 셋팅값

- inherrit : 상위(부모)태그껄 가져오겠다

- nomal : 기본값 

- h2까지밖에 쓰지 않아도 h6까지 노멀라이즈 사용하기 

 

블럭 중앙 정렬 :   margin-left: auto;  margin-right auto;

 

와이어 프레임 : 뼈대

- 레이아웃은 가로/세로만 존재

- block는 세로, inline은 가로

 

*block : 세로로 쌓고 너비 지정 없으면 상위 부모 너비만큼 너비 가짐, 한 줄에 하나씩 정렬

*inline : 너비를 지정하지 않으면 하위 자식이나 후손 너비만큼 너비를 가짐, 한 줄에 같이 정렬됨

 

글자 정렬 : text-align : center; 사용

- 상위에 적어야 한 번에 변경 가능

 

flex : 레이아웃 배치 기능

- display : flex; 적용 시 가로 방향으로 배치 

- 부모 요소(flex container), 자식요소(flex item)으로 구분됨

(부모는 flex 영향을 받는 전체 공간, 설정된 속성에 따라 각각의 자식(아이템)들이 배치됨)

 

flex-direction : 아이템들이 배치되는 축의 방향을 결정하는 속성 (4가지)

- flex-direction : row; : 가로 방향으로 배치

- flex-direction : column; : 세로 방향으로 배치

- flex-direction : row-reverse; : 역순, 가로 방향으로 배치

- flex-direction: column-reverse; : 역순, 세로 방향으로 배치

 

flex-wrap : 아이템 줄바꿈 속성

 

justift-content : 메인 축 방향으로 아이템을 정렬하는 속성

- flex-start : 아이템들을 시작 지점으로 정렬

- flex-end : 아이템들을 끝점으로 정렬

- center : 아이템들을 가운데로 정렬

- space-between : 아이템들 사이에 균일한 간격 둠

- space-around : 아이템들의 둘레에 균일한 간격을 만듬

 

align-item : 수직방향으로 아이템 정렬하는 속성

- flex-start : 아이템들을 시작 지점으로 정렬

- flex-end : 아이템들을 끝점으로 정렬

- center : 아이템들을 가운데로 정렬

- baseline : 아이템들을 텍스트 베이스 라인 기준으로 정렬

 

*display: inline-block;

- 요소끼리 높이값이 다르면 정렬이 망가진다.

- 요소끼리 알 수 없는 여백이 생긴다.

- 가로 세로 정렬이 까다롭다

 

*display:inline-flex;

- 정렬이 자유롭다.

- 요소끼리 알 수 없는 여백도 없다.

- gap을 사용할 수 있다.

 

*align-items

row : 세로 → column : 가로

 

*justify-content

row : 가로 → column : 세로

 

a : inline요소

br : 줄바꿈 태그

 

position

 

ul : 목록

li : 리스트

a : 링크(앵커태그)

href="#" : html 속성, 값 젠코딩

 

*목록과 리스트 태그

1. ul과 li는 단독으로 사용 불가 (웹표준에 어긋남) 꼭 같이 쓰기

2. 순서 없는 목록과 리스트에 사용함

3. 보통은 특정 메뉴에 많이 사용함 (사용자 메뉴, 홈페이지 메인 메뉴 등)

4. 너무 큰 구조에는 잘 사용하지 않는다. (마켓컬리 상품리스트처럼, 가독성이 떨어짐)

★ul태그 자식으로는 li태그만 사용할 수 있다★

6. li태그 자식은 아무나 와도 된다. (ul도 가능)