*코드스테이츠 부트캠프를 수강하며 회고하는 4번째 시간입니다.
오늘을 되돌아보며.
flex를 알고 있었다고 생각했지만 flex를 가지고 많이 활용해보지 않아 모르는 개념이 많았다. 그리고 flex 센터링 하는 법과 컨텐츠를 배치하는 것을 많이 연습하라는 선배 조언도 있어서 많이 연습해보는 시간을 가져야겠다고 생각했다. 그리고 행row과 열 colum을 정확하게 알고 넘어가는 시간이되어서 기쁘다!
몰랐던 부분.
0.행과 열 (중요!) 꼭 짚고 넘어가자!
열 colum 세로 배치
행 row 가로 배치
atomic css 방법론
https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/
1.와이어프레임 목업
atomic css
리셋
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}2. flex
"flex-flow : row wrap;"
플랙스 방향과 여러 줄 배치를 한 꺼번에 정리
부모박스 지정 속성
- display:flex 플랙스 박스형태 지정하기 (flex :박스레벨 / inline-flex:인라인레벨)
- flex-direction : 플렉스 방향 지정
- flex-wrap: 플랙스 항목 한줄 or 여러줄 배치
- justify-content: 주축 기준의 배치 방법 지정
- align-items: 축 수직 방향 정렬
좌측 상단부터
| row wrap | row-reverse wrap | row wrap-reverse | row-reverse wrap-reverse |
| colum wrap | colum -reverse wrap | colum wrap-reverse | colum -reverse wrap-reverse |
를 html 로 표현한 그림이다.
특징으로는 flex-flow 속성값에 따라 여백의 기준점이 달라진다는 점이다.
그래서 flex-direction : row를 기준으로 justify-content:flex-end; 속성을 넣어주면 여백이 해당 flex-flow의 속성값의 여백 기본값에 반대가 된다.
justify-content
: space-between 과 spacea-around space-evenly
이처럼 123번 박스의 여백 크기와 45번 박스의 여백 크기는 서로 영향을 받지 않는다.
margiin과 justify-content
:center, space-between, space-around 값에 의해 발생하는 flex item의 간격은 균등 분할되며 개별적으로 빈 공간을 제어하기를 원하는 경우 해당 flex item 요소에 별도의 margin을 추가해야한다. https://naradesign.github.io/flex-justify-align.html
align-items: baseline
Q .flex-direction: column 인 경우,
align-items:flex-start 와 align-items:baseline은 항상 같을까?
시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점으로 배치한다. 그리고 그 글자의 기준선과 다른 항목의 기준선을 맟추어 배치한다.
도대체 이게 무슨 말인가! 참네! 시작점은 교차축의 시작점을 의미한다면 글자기준선은 어디를 말하는 지 몰라 찾아봤다. 찾아보니 글자 아래 baseline 기준에 맟추어 정리 되고 이해따라 박스영역이 재배치되는 걸 의미했다.
하지만 flex-direction이 colum 일때
이참에 emment 사용해보기!
<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰입니다. 시멘틱하지 않습니다.
다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓰입니다.
<section> 태그는 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다.
<section> 요소는 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다.
원본:http://www.tcpschool.com/html-tags/section
3. text-align
ol : 순서 있는 목록 태그ul : 순서 없는 목록 태그
h2에 있는 내용 글씨안은 inline 인가
block 요소 태그종류 inline 태그 종류
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
1. block 요소에만 text-align 속성을 적용할 수 있다
2. 정렬되는 것은 block 요소안에 있는 lnline 요소만 가능함.
https://server-talk.tistory.com/265
4. & : 선택자
ol : 순서 있는 목록 태그ul : 순서 없는 목록 태그
h2에 있는 내용 글씨안은 inline 인가
block 요소 태그종류 inline 태그 종류
5. display: table-cell
ol : 순서 있는 목록 태그ul : 순서 없는 목록 태그
h2에 있는 내용 글씨안은 inline 인가
block 요소 태그종류 inline 태그 종류
6. attribute 셀렉터
7. :active 와 : focus
https://developer.mozilla.org/ko/docs/Web/CSS/:active
https://developer.mozilla.org/ko/docs/Web/CSS/:focus
7. ::first-child 와 :first-of-type
, :firt-of-type 은 실제 p 엘리먼트만을 기준으로 카운트를 하기 때문에 선택할 수 있는 것
7. :정합성 확인 셀렉터
8. 박스 크기
ㅇ앗! 너무 아쉽다! box-sizing border box 를 못봤다! 다음 테스트 목표는 만점 도전이다!
박스사이징
https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
지켜야하는 부분. (칭찬일기)
-12시에는 못잤지만 8시기상을 지킨 것.! -> 취침시간 8시간을 지키자!
-아침밥을 먹은 것. -> 편의점 김밥이나 라면보다 좀더 건강한 음식을 먹어보자!
-블로그를 작성한 것. -> 아주 잘하고 있다!
아주 칭찬해!
확인해야 하는 부분.(복습)
이해도 자가 점검 리스트
Chapter1. 레이아웃
- 레이아웃이 필요한 이유를 이해한다.
- 레이아웃을 위한 HTML을 만들 수 있다.
-> 레이아웃이 필요한 이유는
Chapter2. Flex
- display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.
- flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
- justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다.
- flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
- flex-basis 를 이용하여 요소의 기본 크기를 결정할 수 있다.
- VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
과제. 계산기 목업 만들기
- HTML로 계산기에 필요한 구조를 짤 수 있다.
- 숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
- 검색을 통해 다양한 CSS 속성을 적용할 수 있다.
자기주도적 학습 가이드
이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.
- 오늘 학습이 어려웠다면(0~6개)
- 개념학습 다시 보기
- 이해되지 않는 개념 아고라스테이츠에 질문하기
- 오늘 학습이 수월했다면(7-9개)
- Flexbox의 다양한 속성을 연습하고 블로그 작성하기
- 이해되지 않은 개념은 검색을 통해 자기주도적 학습 후 블로그에 정리하기
- 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기
- 추가적인 학습을 하고 싶다면(10~11개)
- 레이아웃을 구성할 때 Flexbox만큼 자주 사용되는 Grid에 대하여 학습하세요.
- 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기
