📌 HTML/CSS 활용

1. 레이아웃

---

각각의 요소를 목적에 맞게 배치하는 것을 레이아웃 이라고 한다. 웹 사이트에 목적에 맞게 화면을 만드는 작업은 중요하다.

1-1. 와이어 프레임(Wireframe)

개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임 이라 하며 단순한 선이나 도형으로 설계된 인터페이스를 시각적으로 표현한 것이다.

레이아웃과 그 구조를 보여주는 용도로 스타일링, UX를 판단하는 것이 X

1-2. 화면 나누기

CSS로 화면을 구분할 때에는 수직분할과 수평분할 을 차례로 적용해 작업을 진행한다.

• 수직 분할 : 화면을 가로로 구분해 콘텐츠를 가로로 배치
• 수평 분할 : 하면을 세로로 구분해 콘텐츠를 세로로 배치

  Atomic CSS 방법론 : 클래스 이름과 구현을 일대일로 일치시켜 아주 작은 단위로 CSS를 작성하는 방법

레이아웃 리셋

HTML은 기본적인 스타일을 가지고 있어 레이아웃을 잡을 때 오류가 발생한다. 이를 해결하기 위해 기본 스타일을 미리 제거해주면 원하는 레이아웃을 구현할 수 있다.

/* 기본 스타일을 제거하는 CSS 코드 */
* {
    box-sizing : border-box;
}
body {
    margin: 0;
    padding: 0;
}

2. Flexbox

---

Flexbox는 박스의 크기를 자유자재로 이용해 레이아웃을 잡는 방법이다.

2-1. 부모 박스 요소에 설정해주는 속성 (정렬)

• display: flex : 부모 박스 요소의 자식을 가로로 정렬 후 내용만큼 공간을 차지하는 방법
• flex-direction : 자식 박스 요소들을 정렬 할 정렬 축을 설정해 row(행), column(열), row-reverse, column-reverse 기준으로 정렬
• flex-wrap : 히위 요소의 크기가 상위 요소의 크기보다 클 때 줄 바꿈의 여부를 nowrap (줄 바꿈X) wrap(줄 바꿈), wrap-reverse 기준으로 정렬
• justify-content : 정해진 축의 수평 방향으로 정렬 (자식 박스 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 설정)
• align-items : 정해진 축의 수직 방향으로 정렬 (자식 박스 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 설정)

2-2. 자식 박스 요소에 설정해주는 속성 (공간)

flex 속성의 값은 grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)> 로 각각 요소의 최대, 최소, 기본 크기를 의미한다.

flex: 0 1 auto; /*flex속성을 설정하지 않을 시 적용되는 기본값*/

• grow : 정렬 축 방향으로 빈 공간이 있을 때 남는 공간을 찾이하는 최대 비율
• shrink : 설정한 비율만큼 박스의 크기가 줄어듬
• basis : 요소의 기본 크기 (grow의 값이 0일때만 basis의 값이 유지)