📝 [Section1_Unit4] HTML / CSS 활용
와이어프레임
웹이나 앱을 개발할 때 뼈대를 만드는 작업을 와이어프레임(Wireframe)이라고 한다. 와이어프레임은 도형이나 선으로 인터페이스를 간결하게 묘사해주는 것이 특징이다.
목업
목업(mock-up)이란 실물처럼 보이는 모형을 뜻한다. 웹 또는 앱에서는 목업을 만들 때 실제로 작동하는 것처럼 보이는 프로그램을 작성한다. 실제처럼 보이게 하려면 하드코딩을 통해 HTML문서에 직접 데이터를 넣어주는 방법이 있다.
하드 코딩
하드코딩은 실제로 변수를 이용해 적절한 데이터를 넣어주는 것이 아닌 직접적으로 값을 넣어주는 방법이다.
Flexbox
flex(ilbe)의 잘 구부러지는, 유연한 이라는 뜻처럼 flexbox로 레이아웃을 구성하게 되면 박스를 유연하게 늘리거나 줄여 원하는대로 배치하기 유용해진다.
Flexbox의 속성
먼저 flex를 사용하지 않은 HTML을 보자. (간략하게 body만 기록)
<body>
<main>
<div>box1</div>
<div>box2</div>
<div>box3</div>
</main>
</body>css파일은 박스가 직관적으로 보일 수 있도록 했다.
main {
border: 1px dotted blue;
}
div {
border: 1px solid red;
}
* {
margin: 10px;
padding: 10px;
}
결과는 이렇다. box들은 자동으로 수직정렬되고, 사이즈를 지정해주지 않았기때문에 최대크기의 가로변을 가지게된다.
여기서 main에 flex 속성을 적용해보자.
main {
display: flex;
border: 1px dotted blue;
}
main안의 box들이 content만큼만 차지하는 최소크기로 줄어들었고, 가로정렬로 바뀌었다!
부모 요소에 적용해야 하는 flexbox 속성
부모 요소에 적용해야 하는 속성들은 정렬, 즉 요소가 차지하는 자리와 관련이 있다.
flex-direction
- row : 아무 설정도 해주지않으면 row가 기본값이 된다. 좌에서 우로 가로정렬.
- column : 마찬가지로 좌에서 우로 세로 정렬.
- row-reverse : 우에서 좌로 가로정렬. row와 반대된다.
- column-reverse : 좌에서 우는 변함없지만 아래에서 위로 정렬된다.
flex-wrap
줄바꿈을 설정해준다. 기본값은 nowrap으로 설정되어있다. (줄바꿈이 되지않음)
- nowrap
main {
display: flex;
flex-wrap: nowrap;
border: 1px dotted blue;
width: 200px;
height: auto;
}
- wrap
- wrap-reverse
justify-content
box들을 flex-direction으로 정한 가로, 세로축에서 어떤 방식으로 정렬할 것인지 정하는 속성이다.
주요 속성값으로는 flex-start, flex-end, center, space-between, space-around 가 있다.
align-items
flex-direction으로 정한 가로, 세로축의 반대축에서 어떤 방식으로 정렬할 것인지 정하는 속성이다.
주요 속성값으로는 stretch , flex-start , flex-end , center , baseline 이 있다.
자식 요소에 적용해야 하는 flexbox 속성
자식 요소에 적용해야 하는 속성들은 요소가 차지하는 공간과 관련이 있다.
flex 속성값
flex 속성은 grow(팽창 지수), shrink(수축 지수), basis(기본 크기)로 나뉜다.
- flex-grow : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지 정한다.
- flex-shrink : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지 정한다.
- flex-basis : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 정한다.
flex 속성들은 flex 코드 한줄에 설정할 수 있으며, 순서는 grow, shrink, basis 순이다. 값을 정해주지 않으면 아래의 기본값으로 설정된다. 콘텐츠는 좌에서 우순으로 배치된다.
flex: 0 1 auto;< 주의할 점 >
- flex-grow와 flex-shrink를 같이 사용하게되면 크기 설정 예측이 어려우므로 grow만 변화를 주어 변경하는 것을 추천.
- flex-grow가 0일 때만 flow-basis로 설정된 값이 유지됨.
- width와 flow-basis를 둘 다 설정할 경우, basis가 우선됨.
