[section 1] [HTML/CSS] 활용

1. 웹 레이아웃

레이아웃

웹 사이트의 각 요소의 위치를 목적에 맞게 배치

와이어프레임

뼈대를 그리는 작업, 단순하게 레이아웃과 구조를 보여주며 화면의 영역을 구분하는 일을 함

목업

실물크기의 모형, 웹에서는 HTML문서로 하드코딩하는 방식

❖하드코딩이란?
데이터를 코드 내부에 직접 입력하는 것

HTML 구성

• 수직 분할: 화면을 수직으로 구분
• 수평 분할: 화면을 수평으로 구분

레이아웃 리셋

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

0,0부터 시작하여 기본적인 html문서의 설정없이 시작 가능

---

1. Flexbox

flex = 유연한, 레이아웃의 박스를 유연하게 크기를 조정하는 방식

display: flex

• 부모~자식까지 모두 적용

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

부모요소(main)에 display:flex를 적용시켜 자식 요소 들의 속성을 변경(정렬, 차지하는 공간 설정)

부모요소에 적용하는 Flexbox 속성

• flex-direction: 자식요소 정렬 축 설정 row, column (기본은 가로 정렬)

flex-direction: row

• flex-wrap: 크기가 하위 > 상위이면 자동 줄 바꿈을 할지 결정(기본은 줄바꿈 X)

flex-direction: nowrap

• justify-content: 축의 수평방향 정렬, 요소들의 정렬방향에 따라 정렬 결정
  flex-start , flex-end, center,space-between, space-around

• align-items: 축의 수직방향으로 정렬 justify-content와 반대

---

자식요소에 적용하는 Flexbox 속성

-> 차지하는 공간

flex 속성값

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>
/*따로도 가능
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;*/

grow: 요소의 늘어날 크기 <-> shrink
basis: 기본크기 설정

기본값

flex: 0 1 auto;

---

계산기 만들기(목업)

HTML