오늘의 1차 학습목표
- 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
- 레이아웃을 위한 HTML을 만들 수 있다.
- 다음의 속성들에 대한 이해를 바탕으로 Flexbox를 이용해 레이아웃을 만들 수 있다.
방향: flex-direction
얼마나 늘릴 것인가?: flex-grow
얼마만큼의 크기를 갖는가?: flex-basis
수평 정렬: justify-content
수직 정렬: align-items
CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행한다.
(1) 수직분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치한다.
(2) 수평분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치한다.
수평으로 구분된 요소에 height 속성을 추가하면, 수평분할을 보다 직관적으로 할 수 있다.
.w70 { width: 70%; }
.h40 { height: 40%; }
와 같이 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법을 Atomic CSS 방법론이라고 한다.
3. 플렉스(flex)
Flexbox : 부모 박스 요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다.
기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치된다.
flexbox는 박스가 수직으로 분할되는 것이 기본값이다. 그러나 방향을 설정해 주면, 수평으로도 분할할 수 있다.
flex 속성에 적용되는 세 가지 값의 종류 :
grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
위의 세 속성은 순서대로 flex: 2 1 auto; 와같이 동시에 입력할 수 있다. 물론 따로 입력하는 것도 가능하다.
grow(팽창 지수)
flex-grow의 기본값은 0인데, 0보다 큰 값을 셋팅하게 되면 자식 박스들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다.
shrink(수축 지수)
shrink는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아진다.
flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 웬만하면 사용하지 말자!
비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식이 권장된다. (flex-shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문이다) 그렇기에 flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다.
basis(기본 크기)
자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다. flex-grow가 0일 때, basis 크기를 지정하면 cotent가 크기를 초과하지 않는 이상 그 크기는 유지된다.
width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선된다.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.
axis(축)
main axis 와 cross axis가 있다.
main axis는 flex-direction 속성에 의해서 결정된다. flex-direction의 기본 값이 row이면 main axis 는 가로축이 된다.
cross axis는 여러 개의 main axis와 수직을 이루는 방향입니다. main axis가 가로일 때 cross axis는 세로가 됩니다.
flex-direction
아이템들이 배치되는 축의 방향을 결정하는 속성이다. 즉 메인축(오뎅꼬치)의 방향을 가로로 할건지 세로로 할건지 정해주는 것이다.
row (기본값)
아이템들이 행(가로) 방향으로 배치된다.
row-reverse
아이템들이 역순으로 가로 배치된다.
column
아이템들이 열(세로) 방향으로 배치된다.
column-reverse
아이템들이 역순으로 세로 배치된다.
justify-content 속성은 main axis를 기준으로 정렬하며, align-items 속성은 cross axis를 기준으로 정렬한다.
콘텐츠 수평 정렬 (justify-content)
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
center: 요소들을 컨테이너의 가운데로 정렬
space-between: 요소들 사이에 동일한 간격을 둔다.
space-around: 요소들 주위에 동일한 간격을 둔다.
콘텐츠 수직 정렬 (align-items)
flex-start: 요소들을 컨테이너의 꼭대기로 정렬
flex-end: 요소들을 컨테이너의 바닥으로 정렬
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
baseline: 요소들을 컨테이너의 시작 위치에 정렬
stretch: 요소들을 컨테이너에 맞도록 늘린다.
align-self
align-items의 수직축 방향 정렬
auto, stretch, flex-start, flex-end, center, baseline
align-content
flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
center: 여러 줄들을 세로선 상의 가운데에 정렬
space-between: 여러 줄들 사이에 동일한 간격을 둔다.
space-around: 여러 줄들 주위에 동일한 간격을 둔다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘린다.
order
각 아이템들의 시각적 나열 순서를 결정하는 속성이다.
숫자값이 들어가며, 작은 숫자일 수록 먼저 배치된다.
“시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의해야 한다. 시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다는 것을 기억하자
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
위와같이 코딩을 하면 BCA가 정렬된다.
flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.
nowrap: 모든 요소들을 한 줄에 정렬 (삐져 나감)
wrap: 요소들을 여러 줄에 걸쳐 정렬
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬
flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
flex-direction, flex-wrap의 순으로 한 칸 띄고 입력하면 된다. (ex) flex-flow: row wrap;
와이어프레임 학습목표
- 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
- 와이어프레임만 보고 HTML로 코딩할 수 있다.
- div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.
- HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.
와이어프레임(Wireframe)
웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 즉 순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다.
목업
목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서와 CSS를 작성하는 것이다. 하지만 기능적으로는 동작하지 않는다.
3.
HTML에서 웹 앱의 구조 잡기
(1) 큰 틀에서 영역 나누기
(2) 각 영역을 태그로 표현하기
4.
id 고유한 이름을 붙일 때 사용
class 반복되는 영역을 유형별로 분류할 때 사용
HTML 구조를 처음 짤 때에는 태그를 모두 적지 않고 간략하게 적어준다. 예를들어
<div id="writing-sextion"> ---> dic#writing-section
<li class="comment"> ---> li.comment오늘은 지금까지 해오면서 가장 힘든 날이 아니였을까 싶다. HTML과 CSS에 대해분명히 어느정도는 공부를 했었지만 flex 앞에서 턱턱 막히니 많이 답답하기도 하고 화도 났다. 정규시간 이후에 약 4시간정도 따로 flex에 대해 공부를 했고, 확실히 오늘 어려웠던 부분들이 많이 이해되기 시작하면서 큰 성취감을 느꼈다. 어쩌면 프로그래밍을 하는 사람들은 모두 이런 성취감 때문에 하는 것이 아닐까란 생각도 든다. 오늘 정말 고생 많았고, 내일도 힘내서 더 열심히 해보자 파이팅!
개발 공부