1회차: HTML
HTML이 어떻게 생겼는지, 다양한 태그들에 대해 배워봤다.
2회차: CSS
CSS의 다양한 기능을 배워봤다.
하지만 짧은 시간동안 많은걸 배우려니 머릿속에 정리가 잘 안됐다ㅠ
인터넷에서 서치해가면서 (약간 야매로) 웹페이지를 만들긴 했는데 다시 한번 복습해야겠다.
em
- 부모 structure이 기준
rem
- 전체 structure이 기준 → 상대적인 고정값
%
- 내가 보고 있는 frame에서의 상댓값
self-closing
- div를 <div />로 쓰는 경우도 있음: style.css에서 조정 시
css 다중 선택자: 먼저 설정 배정 —> 이후 개별적으로 설정
- class = “red box” → red 와 box 라는 클래스 2개인 것
- .box {} → box라는 클래스에 접근하겠다
- .box .red {} → box라는 클래스 안에 red라는 클래스에 접근하겠다
html은 초기값이 존재하기에 css reset을 해줌
- css에서 css reset해줌
Display
- block
- inline
- block 와 inline의 차이
- display block: 오른쪽에 공백을 기본으로 줌
- width & height 줄 수 있음
- inline: 줄바꿈 없음
- width & height 줄 수 없음
- display block: 오른쪽에 공백을 기본으로 줌
- inline-block
- flex: 가로 정렬을 부모 클래스한테 줌 → 기본값이 줄바꿈 없음 크기를 줄이더라도 절대 줄바꿈 x
- flex-wrap: 줄바꿈 해줌
- gap: margin으로 레이아웃 안잡고 gap으로 공백줌
- justify-content: center → 가운데 정렬
- justify-content: between → 양 맨끝으로 정렬
- none: 아예 없어짐
- visibility hidden: 숨기기만 한거임. 그 공간은 사라지지 않음
인접선택자
- css에서 .red:hover + .blue {} 작성
html 내에서 부모자식 (클래스 안에 클래스) 경우
- css에서 .red:hover > .blue {} 작성