오늘은 HTML의 기본 개념과 마크업, 그리고 css 속성에 대해서 간단하게 배웠다.
특히 css 속성 중 아~주 많이 쓰이는 display: flex를 배웠는데 다시 한번 정리해보자!
1. HTML 태그의 특징
Block, Inline
HTML의 태그 사이즈는 Block과 Inline으로 나뉜다.
block: 페이지의 가로 넓이 전체를 차지하는 요소
inline: 자신의 크기만큼만 차지하는 요소
2. CSS의 정렬
2-1. Position
position의 속성은 relative, absolute, static, fixed, sticky가 있다.
position: relative
선택한 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다! 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.
position: absolute
position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데, 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다.
따라서 absolute를 사용할 때는 상위요소에 relative를 주는 것이 일반적!!
position: static
position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.
position: fixed
position속성을 fixed로 지정하면 요소를 항상 고정된(fixed) 위치에 배치할 수 있다. (ex. 웹페이지에서 스크롤해도 항상 top: 0에 고정되어 있는 header)
position: sticky
스크롤하지 않을 때는 position: static처럼 동작하다가 스크롤할 때는 position: fixed와 유사하게 동작한다.
position속성을 sticky로 설정되어 있는 엘리먼트는 마치 position 속성이 static으로 설정되어 있는 것처럼 부모 엘리먼트 내부에서 공간을 차지한다. 하지만 스크롤할 때는 마치 position 속성이 fixed로 설정되어 있는 것처럼 다른 엘리먼트들이 상하좌우로 움직일 때 지정된 자리에서 움직이지 않는다.
2-2. Flex
flex의 핵심은 여러태그를 하나로 묶어 정렬하는데에 있다.
정렬하는데 중요한 점은 정렬시 기준이 필요하다는 점 이며, flex는 기준을 부모박스로 두고 움직이게 된다.
flex-direction: row //가로 정렬
flex-direction: column //세로 정렬
자주 사용되는 flex 속성들
/* 부모박스 */
display: flex;
/* 행기준: row, 열기준: column */
flex-direction: row;
flex-direction: column;
/* flex-direction 기준 수평 방향으로 자식박스 정렬 */
justify-content: center;
/* flex-direction 기준 수직 방향으로 자식박스 정렬 */
align-items: center; 그리고 오늘 작업한 싸이월드 1일차!
