Flexbox 와는 다르게 레이아웃을 두 방향으로 배치가 가능하다. Flexbox를 완전 대체할 수는 없다. 구조 flex와 같이 container와 item으로 이루어져있다. 용어 grid track grid의 행 또는 열 grid cell grid item을 담고 있는 한 칸 grid line grid cell을 구분하는 선 grid number grid line의 각 번호 grid gap grid cell 사이의 간격 grid area grid line으로 둘러싸인 사각형 영역, 그리드 셀의 집합임 속성 초록색은 컨테이너 노랑색은 아이템 grid-template-rows grid-template-columns 컨테이너의 grid track의 크기를 지정하는 속성 여러가지 단위 사용 가능. 섞어 쓸 ..

flexbox 레이아웃 배치 시 좀 더 유연하도록 고안된 기능. 기존 inline-block, float으로 레이아웃을 배치하는 것보다 유연하다고 하는데 얼마나 그런지 살펴보자 1차 학습 후 정리 메인 축 또는 교차 축 기준으로 어떻게 정렬하는지 등의 설정에 따라 아이템들이 배치가 되어 유연하다고 생각. 2차 학습 후 정리 아이템에 적용할 수 있는 속성을 배운 후 왜 유연하단건지 깨달음. 설정한 값에 따라 아이템들이 유연하게 늘었다 줄었다 하기 때문.. 총 정리하자면 메인축 또는 교차축을 기준으로 어떻게 정렬이 되는지 등의 설정에 따라 아이템들이 유연하게 배치되는 기능이다. 구조 flex container와 flex item으로 나뉘어져 있음 컨테이너가 아이템을 포함하는 구조. 플렉스 아이템들이 설정된 ..

특정 미디어 또는 화면의 크기가 특정 픽셀일 경우 따로 설정한 css를 사용하도록 하는 소프트웨어 모듈이다.

해당 속성이 설정된 요소를 설정된 방향으로 두고 감싸는 모양이 되도록 한다. float이 설정되어있으면 해당 요소의 자식 요소들을 품고 있지 않은 것처럼 인식된다. 따라서 가상요소나 clear: both 를 가진 요소를 적재적소에 추가하여 정상적으로 인식되도록 해야한다.

브라우저마다 다르게 설정된 요소의 서식을 초기화하여 똑같이 보이도록 하는 작업이다. *를 쓸 수도 있지만 모든 태그에 작업을 할 경우 처리량의 차이가 있기에 보통은 다른 사람이 작성해놓은 코드를 사용한다고 함.

html 요소들은 위와 같은 box model을 가지고 있다. box-sizing 속성의 값은 두 가지로 나눌 수 있다. content-box: width속성의 값이 내용(content)에만 적용된다. border-box: width속성의 값이 내용 + padding + border 값 만큼 적용된다. 따라서 content의 크기는 width - padding + border 값으로 설정된다.

가장 많이 쓰이는 display속성은 다음과 같은 4가지이다. block, inline, inline-block, none block: 박스형태로 표시됨. 다른 요소가 수평으로 붙지 않고 줄바꿈으로 표시됨 inline: 내용(content)만큼만 표시됨. 또한 박스형태를 가지고 있지 않기 때문에 width 등의 속성이 적용되지 않음 inline-block: 박스형태로 표시되는데 다른 요소가 수평으로 붙을 수 있음 none: 표시 안함