[ HTML/CSS ] - 기초 활용

레이아웃

• 각각의 요소를 목적에 맞게 배치하는 것

 

와이어프레임

• 웹 & 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계
• 선,도형으로 웹 & 앱의 인터페이스를 시각적으로 묘사한 것

 

목업

• 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성
  ex) 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드 코딩하는 방식

 

와이어프레임 & 목업 꼭 해야 됨?

• HTML 문서를 통해 화면을 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어려움
• 설계도 없이 건물을 짓는 것과 같다.

 

레이아웃 리셋 기본 예시

 

레이아웃 리셋을 하는 이유

• Body 요소는 기본 스타일에 약간의 여백이 있다.
• width, heigth 계산이 여백을 포함하지 않아 계산에 어려움이 있다.
• 브라우저 마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다르다.

 

Flexbox

• 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법
• 속성 활용시, 요소의 정렬, 요소가 차지하는 공간을 설정 가능

 

부모 요소에 지정 하는 속성

• 자식 요소들의 정렬과 관련
• flex box 속성

flex-direction 속성은 자식 요소들을 정렬할 정렬 축을 결정한다.
//입력할 수 있는 값으로는 row, column, row-reverse, column-reverse가 있음

justify-content 속성은 자식 요소들을 수평 방향으로 어떻게 정렬할 것인지 결정한다.
//입력할 수 있는 값으로는 flex-start , flex-end, center, space-between, space-around이 있다.

align-items 속성은 자식 요소들을 수직 방향으로 어떻게 정렬할 것인지 결정한다.
//입력할 수 있는 값으로는 stretch , flex-start , flex-end , center , baseline 이 있다.

 

자식 요소에 지정하는 속성

• 요소가 차지하는 공간과 관련
• flex 속성

flex-grow : 팽창 지수요소의 크기가 얼마나 늘어날 것인지

flex-shrink : 수축 지수요소의 크기가 얼마나 줄어들 것인지

flex-basis. : 기본 크기늘어나고 줄어드는 것과 상관없이 요소의 기본 크기가 얼마인지

1.