오늘 한 것
- CSS 이론 마지막 수업이였다. 이론 학습 후, 게시판 화면을 구성해보는 시간을 가져봤다.
- 무료 책 집필 활동에 참여하기로 결정했다. 내가 참여한 곳은 개발자로 기술 면접을 준비하는 사람을 대상으로하며, 면접 질문과 답변, 그리고 상세한 설명을 책에 담기로 하였다. 이를 통해 면접 준비도 하며 좋은 경험이 될 것 같아 참여 의사를 전달했다.
오늘 배운 것
float
float 속성이 적용된 요소는 일반적인 흐름으로부터 빠진다. 그리고 그 주위를 감싸는 자기 컨테이너나 다른 부동된 요소의 가장자리에 닿을 때까지 좌나 우로 이동된다.
left: 왼쪽으로 떠움직여야 함right: 오른쪽으로 떠움직여야 함none: (기본값) 요소가 떠움직이면 안됨
inline,inline-block요소에 float 속성을 주게되면 block으로 계산되어 적용된다.
float 해제하기
clear
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다. 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 한다.
해결 방법
- 부모에게 높이 값 지정하기
- overflow 속성 지정하기
float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘친다.
이때 overflow 속성값을 hidden이나 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커진다. - clear-fix 방법
부모의 가상 요소::after를 사용하기.container::after { content:''; display:block; clear:left; }
flex(flexbox)
Flex(플렉스)는 Flexible Box, Flexbox라고 부르기도 한다.
flex는 1차원 레이아웃 모델로 설계되었다. flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻이다.
flexbox의 두 개의 축
주축(main axis)과 교차축(cross axis)
주축은flex-direction속성을 사용하여 지정하며, 교차축은 이에 수직인 축으로 결정된다.
주축
주축은 flex-direction에 의해 정의되며 4개의 값을 가질 수 있다:
row, row-reverse, column, column-reverse
row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행(가로행)을 따른다.
column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향(세로행)을 따른다.
교차축
교차축은 주축에 수직하므로, 만약 flex-direction(주축)이 row 나 row-reverse 라면 교차축은 열 방향을 따른다.
주축이 column 혹은 column-reverse 라면 교차축은 행 방향을 따른다.
flex container에 사용하는 속성
문서의 영역 중에서 flexbox가 놓여있는 영역을 flex container라고 부른다. flex container를 생성하려면 영역 내의 container 요소의 display값을 flex 혹은 inline-flex로 지정해야 한다. 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex item이다.
flex-wrap
컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘친다. 이때, 항목이 여러 행에 나열되도록 하려면 flex-wrap 속성의 값을 wrap으로 지정해야 한다.
flex-flow
flex-direction 속성과 flex-wrap 속성을 flex-flow라는 축약 속성으로 합칠 수 있다.
첫 번째 값은 flex-direction이고 두 번째 값은 flex-wrap이다.
justify-content
주축을 따라 아이템을들 정렬하는 방식 지정
flex-start(기본값) : 시작점부터 정렬 (왼쪽 or 위쪽)flex-end: 끝점으로 정렬 (오른쪽 or 아래쪽)center: 가운데로 정렬space-between: 아이템들의 “사이(between)”에 균일한 간격space-around: 각 아이템들의 “둘레(around)”에 균일한 간격space-evenly: 아이템들의 사이와 양 끝에 균일한 간격
align-items
교차축을 따라 아이템들을 정렬하는 방식을 지정
strech(기본값) : 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어남flex-start: 시작점으로 정렬 (위쪽 or 왼쪽)flex-end: 끝점으로 정렬 (아래쪽 or 오른쪽)center: 가운데로 정렬baseline: text 베이스라인을 기준으로 정렬
align-content
flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성
flex-start(기본값) : 시작점부터 정렬 (왼쪽 or 위쪽)flex-end: 끝점으로 정렬 (오른쪽 or 아래쪽)center: 가운데로 정렬space-between: 아이템들의 “사이(between)”에 균일한 간격space-around: 각 아이템들의 “둘레(around)”에 균일한 간격space-evenly: 아이템들의 사이와 양 끝에 균일한 간격
flex item에 사용하는 속성
flex-basis
아이템의 크기를 결정한다.(flex-direction이 row일 때는 너비, column일 때는 높이)
이 속성의 기본값은 auto이다. 아이템에 크기가 지정되어 있지 않을 때, 아이템의 내용물 크기가 flex-basis 값으로 사용된다. 따라서, flex항목들이 각 내용물 크기만큼 공간을 차지하게 된다.
flex-grow (늘리기)
주축에서 남는 공간을 아이템들에게 분배하는 속성이다.
양수로 지정하면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다. (기본값은 0)
flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하시면 된다.
예) 200픽셀이 남는 공간에서 각 항목의 flex-grow 비율이 2:1:1 이므로 첫 항목에게 100 픽셀, 두 번째와 세 번째 항목에게 50 픽셀씩 분배
flex-shrink (줄이기)
주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의한다.
즉, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다.
flex-shrink 값이 양수이면 flex 항목은 flex-basis에 지정된 크기보다 작아진다. (기본값 1)
flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있다.(고정 크기는 width로 설정)
flex
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성
flex 축약형의 값은 flex-grow(넓어짐), flex-shrink(좁아짐), flex-basis(기준 값) 순서로 지정된다.
align-self
align-items의 아이템 버전, 해당 아이템의 수직축 방향 정렬
align-self는 align-items보다 우선권이 있다.
auto(기본값) : align-items 설정을 상속받는다.strech: 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어남flex-start: 시작점으로 정렬 (위쪽 or 왼쪽)flex-end: 끝점으로 정렬 (아래쪽 or 오른쪽)center: 가운데로 정렬baseline: text 베이스라인을 기준으로 정렬
order
각 아이템들의 시각적 나열 순서를 결정하는 속성
숫자값이 들어가며, 작은 숫자일 수록 먼저 배치된다.
“시각적” 순서이기때문에, 시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다
오늘 생각
fiedset 요소에 flex가 적용이 안되다니!
fiedset 요소에 flex가 적용이 안됐다. 이유를 찾아보니까 버그라 했다.
그래서 해결할 방법으로 div 태그로 묶는 방식을 택했지만, W3C Markup Validation Service에서 검사해보니 웹 표준성에는 어긋난다고(fieldset 요소의 첫 번째 자식 으로 legend가 꼭 와야함) 했다. 웹 표준성을 지키기 위해 float를 사용하는 수 밖에 없었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>채팅</title>
</head>
<body>
<fieldset>
<div> <!--빼야함-->
<legend></legend>
<input>
</div> <!--빼야함-->
</fieldset>
</body>
</html>잊지못할 wrap-reverse
과제로 내준 flexboxfroggy의 24단계가 어려웠다. 색깔배치와 양쪽으로 배치하는 것까지 다 했었는데, 개구리 5 2를 개구리 2 5로 하는 방법을 찾지 못했다. 알고보니까 flex-wrap 속성에 wrap-reverse가 있는 것을 까먹고 계속 다른 부분에서 문제점을 찾고 있었던 것이다. 이제 wrap-reverse을 잊지 않을 것 같다.
flexboxfroggy (캡처를 위해 임의로 수정한 레이아웃입니다.)
출처
