오늘 배운 것
1. HTML
- HTML의 정의
- block / inline 태그
2. CSS
- 선택자
- 박스 모델
- flex
- position
1. HTML (Hyper Text Markup Language)
웹 페이지 구성 언어
태그(tag)를 통해 웹 페이지에 보여질 내용을 나타낸다.
태그는 약속된 명령어이므로 고유한 기능을 가지고 있다.
또한 속성과 값으로 부가적인 기능을 구현할 수 있으며, 이는 중첩이 가능하다.
HTML 태그의 특징
- blcok 태그: 화면의 가로를 전부 차지하는 태그
- inline 태그: 자기 너비만큼만 차지하는 태그
2. CSS
HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어이다.
속성, 값, 선택자로 이루어져 있다.
1) CSS 선택자
- 전체 선택자 : *
- 태그 선택자 : div 등
- class 선택자 : .class이름 -> 중복 사용 가능
- id 선택자 : #id이름 -> 단 하나만 존재
2) 박스모델
HTML 태그들은 모두 박스모델로 이루어져 있다.
- margin :박스의 바깥 여백
- border : 박스의 기준이 되는 바깥 테두리
- padding : 박스의 안쪽 여백
- contents : 박스의 내용
* border-box : 보더가 고정되고 컨텐츠의 크기가 변하는 속성. 레이아웃 틀을 잡기 쉬우므로 전체 선택자로 기본값을 boxsizing: border-box;로 설정해준다.
3) flex
여러 태그를 하나로 묶어서 정렬해주는 display 값이다.
정렬시 기준과 방향이 필요하므로 부모박스에 flex 기준을 적용시켜 준다.
- flex-direction: column; 세로 정렬
- flex-direction: row; 가로 정렬(기본값)
- justify-content: center; 가로 가운데 정렬
- align-items : center; 세로 가운데 정렬
* flex를 적용하면 부모박스 안의 자식박스들은 가로 방향으로 배치되고, inline 요소 처럼 자신이 가진 내용물의 width 만큼만 차지한다. height는 부모박스의 높이만큼 늘어난다.
flex 개념을 잘 설명해 놓은 참고 페이지
https://studiomeal.com/archives/197
4) Position
박스의 위치를 개별적으로 지정할 수 있다.
- position: absolute; 박스의 절대 위치
- position: relative; 부모 박스 기준으로 상대 위치
- position: fixed; 화면 기준으로 절대 위치
오늘의 회고
HTML, CSS 기초강의를 들었다.
어느정도 알고 있다고 생각했는데 직접 실습을 해보니 생각만큼 안되서 열심히 해야겠다고 생각했다.
특히 flex를 사용한 정렬이 익숙하지 않아서 어려웠다. float보다 정렬하기 편리하고 수정도 쉬운거같아서 자주 사용해봐야겠다.
실습하고 과제할 때 어려웠지만 다른 수강자들과 같이 코드를 공유하면서 서로 모르는 부분을 질문하고 답해주니 도움이 많이 되었다.
앞으로 더 열심히 해서 질문을 많이 하기 보다 도움을 많이 줄 수 있는 팀원이 되고싶다!
