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