HTML/CSS 활용

희-야 2023. 1. 30. 23:02

HTML/CSS 활용

와이어프레임 (Wireframe)

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 뜻합니다.

와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다.

목업 (Mock-up)

대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다. 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성합니다. 예를 들어, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식입니다.
* 하드코딩 : 요소를 하나하나 직접 입력해주는 방식을 뜻합니다.

HTML 구성하기

대부분의 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐릅니다. CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다.

Flexbox

Flex(Flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다.

Flexbox 속성들

부모 요소에 적용해야하는 속성

flex-direction : 정렬 축 정하기 : 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.
row : 기본값 column : 세로값 row-reverse : 가로 오른쪽 -> 왼쪽으로 colmun-reverse : 세로 아래 -> 위쪽으로
flex-wrap : 줄 바꿈 설정하기. 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다.
nowrap : 기본값 wrap : 상위 요소의 크기를 넘으면 자동으로 줄 바꿈을 해줍니다. wrap-reverse : 아래에서부터 위로 작성하며 상위 요소의 크기를 넘으면 자동으로 줄바꿈을 해줍니다.
justify-content : 축 수평 방향 정렬. 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다.
align-items : 축 수직 방향 정렬. 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다.

자식 요소에 적용해야 하는 속성

자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간과 관련이 있습니다.

속성에는 세 가지 값을 지정해줄 수 있습니다. 각 값이 의미하는 것은 다음과 같습니다.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다.

flex: 0 1 auto;

grow (팽창 지수) : 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것입니다.
shrink (수축 지수) : grow와 반대로 설정한 비율만큼 박스 크기가 작아집니다. width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기 어렵습니다.
basis (기본 크기) : flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다.

width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.