오늘은 강력한 CSS 수업 첫 날!
저번주까지 자스문제로 낑낑대다가 css로 넘어오니까 마음이 편-안해졌다,,ㅋㅋㅋ
하지만 익숙하다고 해서 소홀히 하지않고 열심히 해야겠다!!🤓
1. inline 요소와 block 요소
block 요소
- 블록 요소를 여러개 연속해서 쌓을 경우 자동으로 다음 줄로 넘어간다.
- 좌우 양 옆 쪽으로 늘어나 부모 요소의 너비를 가득 채운다.
inline 요소
- 여러개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다.
- 태그에 할당된 공간 만큼의 너비만 차지한다.
2. float
HTML 요소를 일반적인 흐름(normal flow)으로부터 벗어나서 특정한 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성
*float 레이아웃은 PC로만 인터넷에 접속할 수 있던 시절에 고안되었기 때문에, 반응형 웹에는 적합하지 않다.
float의 영향을 받지 않아야 할
div위 쪽에
<div class="clearfix"></div>에
.clearfix {clear:both;}를 줌으로써 float의 영향을 받지 않게 할 수 있음!
3. flex
flex는 레이아웃 배치 전용 기능으로 고안되었기 때문에 float에 비해 훨씬 편리하다.
컨테이너에 적용하는 속성들
- display : flex
- flex-direction (배치 방향 설정)
row(행) : 중심축을 가로 방향으로 배치column(열) : 중심축을 세로 방향으로 배치
- justify-content (메인축 방향 정렬)
- 메인축은
flex-direction방향과 동일 - 메인축 방향으로 어떻게 정렬할지 결정
- align-items (교차축 방향 정렬)
- 교차축 방향, 즉 메인축의 수직 방향으로 어떻게 정렬할지 결정
오늘 한 일기장 과제!
똑같이 만들기는 좀 심심해서 여러 스타일을 적용해서 만들어 보았당
프론트엔드 대장이 되어보쟈