4/14 [HTML, CSS] 활용

와이어 프레임

• 웹이나 애플리케이션을 개발할 때 뼈대를 그리는 단계
• "와이어로 설계된 모양"을 의미
• 단순하게, 제품의 구조를 보여주는 용도
• 전환 효과, 애니메이션, 사용자 테스트 같은 스타일링 요소, UX를 판한 하는것이 아님
  

목업(Mock-up)

• 실제 크기의 모형이라는 뜻으로 제품이 작동하는 모습과 동일하게 HTML문서를 만드는 것을 말한다
• 트윗 작성자, 트윗 내용, 작성 날짜 등을 HTML에 하드코딩하는 방식.

하드코딩?
아직은 변수를 이용할 수 없기 때문에, HTML 문서에 아래와 같이 하나하나 입력해야 하는데. 이런 방식을 하드코딩이라고 한다.

// 하드코딩의 예
console.log('2 x 1 = 2')
console.log('2 x 2 = 4')
console.log('2 x 3 = 6')
console.log('2 x 4 = 8')

<!-- 실제로는 어떤 로직에 의해서 적절한 위치에 값이 들어가게 됩니다. -->
<div class="writer">김코딩</div>
<div class="content">SNS는 인생의...</div>

HTML 구성하기

실제 VScode의 레이아웃을 분석해 큰 틀에서 추상화하면, 다음과 같이 영역을 나눌 수 있다.

Atomic CSS방법론 : 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법.(https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/)

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있는데, 이 HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 한다.

(사례)

언급한 문제를 해결할 몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다.

(예시)

* {
 box-sizing: border-box;
}

body {
 margin: 0;
 padding: 0;
}

Flexbox

박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다. display: flex 라는 CSS 속성도 Flexbox속성 중 하나이다.

display:flex 분석

• 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
• 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다

main {
  **display: flex;**
  border: 1px dotted red;
}

부모 요소에 적용해야하는 Flexbox 속성들
1.flex-direction : 정렬 축 정하기
2.flex-wrap : 줄 바꿈 설정하기
3. justify-content : 축 수평 방향 정렬
4. align-items : 축 수직 방향 정렬

1. flex-direction : 정렬 축 정하기

• 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정한다.
• 아무 설정도 해주지 않으면 기본값인 flex-direction : row 가로로 정렬한다.

main {
	display: flex;
	**flex-direction : row;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */

주요 속성값.

2. flex-wrap : 줄 바꿈 설정하기

• 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정함.
• 설정해 주지 않으면 줄 바꿈을 하지 않는다.

main {
	display: flex;
	**flex-wrap : nowrap;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */

3. justify-content : 축 수평 방향 정렬

-플렉스아이템들이 플렉스박스 주추글 따라 배치될 때, 요소 사이의 공간을 분배 하는 방식을 결정한다.

• 이 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다.
• 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성
• 주요 속성값으로는 flex-start , flex-end, center, space-between, space-around 이 있다

  flex-start : 기본값.
  flex-end : 순서는 유지한체 뒷쪽으로 붙인다.
  center : 가운데로 정렬한다.
  space-between : 양끝쪽의 여백 없이 item을 펼친다.
  space-around : flex item이 각자 동일한 여백을 가지고 정렬된다.
  space-evenly : 양끝을 포함해서 모든 여백이 동일하다.

4. align-items : 축 수직 방향 정렬

• 이 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.
• 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성
• 주요 속성값으로는 stretch , flex-start , flex-end , center , baseline 이 있다

stretch : 플렉스아이템이 교차축 길이에 맞춰 늘어난다.(너비, 높이가 우선)
flex-start : 교차축의 시작점으로부터 끝점을 향해 배치한다.f
lex-end : 교차축의 끝점으로부터 시작점을 향해 배치한다.
center : 교차축의 중심부에 배치한다.

flex 속성의 값

세 가지 값을 지정해 줄 수 있다.

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

grow(팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
shrink(수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
basis(기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지

1. flex-grow : 플렉스아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당 받을 수 있는 공간을상대적으로 정의할 수 있는 속성

grow(팽창 지수)는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이라고 생각하면 이해하기 쉽습니다.

2. flex-shrink : 플랙스아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성

shrink(수축 지수)는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다. 비율이 클수록 더 많이 줄어드는 것이죠. 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장합니다.