New 병아리 개발자

*HTML

- 문서의 내용을 의미, 부모-자식 / 형제 관계가 존재

- 주석 표현 : <!-- -->

- 줄바꿈 : <br>

- 여는 태그 : <태그명>

- 닫는 태그 : </태그명>

- 태그의 종류 (아래 외에도 많은 종류의 태그 존재

• <div></div> : 박스
• <nav></nav>
• <section></section>
• <article></article>
• <a href="주소" target="_blank">링크이름</a> : a 엘리먼트는 링크 버튼, href는 이동할 주소, target은 새 창으로 띄울지 여부

*CSS

- 모든 디자인, 스타일 리스트같은 역할

- 기본적으로 스타일이 적용되어 있고, CSS 통해서 설정값 변경을 해주는 것.

- 속성의 종류 (아래 속성 외에도 다양한 속성 존재)

• background-color : 배경 색
• font-weight : 폰트 두께
• font-size: 3rem : 폰트 사이즈(rem은 배율, px로도 표기 가능)
• display : block : 화면 표시

*CSS display 속성의 특징

1. block

- 세로방향(위-아래), 넓이가 부모 사이즈에 맞게 설정된다.

- 블록화

- 한 줄을 무조건 혼자 사용

- 스스로 margin-left, margin-right 사용하여 정렬한다.

- 위-아래 정렬 시 여백이 존재하지 않는다.

2. inline-block

- 가로방향(옆), 넓이가 입력된 값의 사이즈 만큼만 설정된다.

- 글자화

- 한 줄에 최대한 여러개가 나온다.

- 부모의 text-align에 의해서 정렬된다.

- 옆으로 정렬 시 여백이 존재한다.

3. 예외

- a, img, span 엘리먼트는 기본적으로 display가 inline 이다.

- inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.

*CSS FlexBox 속성

1. justify-content

- justify-content: flex-start; 요소들을 컨테이너의 왼쪽으로 정렬합니다.

- justify-content: flex-end; 요소들을 컨테이너의 오른쪽으로 정렬합니다.

- justify-content: center; 요소들을 컨테이너의 가운데로 정렬합니다.

- justify-content: space-between; 요소들 사이에 동일한 간격을 둡니다.

- justify-content: space-around; 요소들 주위에 동일한 간격을 둡니다.

2. align-items

- align-items: flex-start; 요소들을 컨테이너의 꼭대기로 정렬합니다.

- align-items: flex-end; 요소들을 컨테이너의 바닥으로 정렬합니다.

- align-items: center; 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.

- align-items: baseline; 요소들을 컨테이너의 시작 위치에 정렬합니다.

- align-items: stretch; 요소들을 컨테이너에 맞도록 늘립니다.

3. align-self

- align-self를 통해 align-items을 개별 요소에 적용 가능

4. flex-direction

- flex-direction: row; 요소들을 텍스트의 방향과 동일하게 정렬합니다.

- flex-direction: row-reverse; 요소들을 텍스트의 반대 방향으로 정렬합니다.

- flex-direction: column; 요소들을 위에서 아래로 정렬합니다.

- flex-direction: column-reverse; 요소들을 아래에서 위로 정렬합니다.

5. order

- order: 숫자; 기본값은 0, 양수, 음수로 변경가능하다(숫자 만큼 순서 변경)

6. flex-wrap

- flex-wrap: nowrap; 모든 요소들을 한 줄에 정렬합니다.

- flex-wrap: wrap; 요소들을 여러 줄에 걸쳐 정렬합니다.

- flex-wrap: wrap-reverse; 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

7. flex-flow

- flex-flow: flex-direction값 flex-wrap값 처럼 두가지 값 설정 가능.

8. align-content

- align-content: flex-start; 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.

- align-content: flex-end; 여러 줄들을 컨테이너의 바닥에 정렬합니다.

- align-content: center; 여러 줄들을 세로선 상의 가운데에 정렬합니다.

- align-content: space-between; 여러 줄들 사이에 동일한 간격을 둡니다.

- align-content: space-around; 여러 줄들 주위에 동일한 간격을 둡니다.

- align-content: stretch; 여러 줄들을 컨테이너에 맞도록 늘립니다.