정렬 방식 align은 수직 방향 정렬, justify는 수평 방향 정렬, place는 둘의 축약형이다. content는 grid container를 기준으로 grid cell을 정렬하고, items는 grid cell/area를 기준으로 정렬한다. start, center, end, stretch는 content와 items 모두에서 사용할 수 있지만 space로 시작하는 around, between, evenly는 content에서만 사용이 가능하다. flex도 동일한데 여지껏 아무 생각없이 남용하고 있었다; place는 conten와 items의 축약형인데, 항상 align을 먼저 쓴 다음 justify가 따라온다. place-content: ; place-items: ; 만약 값을 하나만 할당하면..
grid-auto-rows/columns 크기가 지정되지 않은 grid track의 크기를 지정할 수 있는 프로퍼티 See the Pen auto by summermong (@summermong) on CodePen. 이미지 갤러리를 만들 때 각 행의 높이를 200px로 지정하고 싶다. 이 때 grid-template-rows로 200px인 grid track 3개를 생성하려고 한다. 그래서 grid-template-rows: repeat(3, 200px)를 추가하지만 텍스트가 200px 밖으로 빠져나가게 된다. 이를 해결하기 위해 카드의 기본 크기는 200px이면서 넘치는 내용이 빠져나가지 않게 minmax()라는 grid 함수를 사용해 카드의 크기를 자동으로 늘리려고 한다. 이 함수는 크기의 최대, ..
Grid flex가 줄에 대한 정렬이라면, grid는 행렬을 사용한 보다 정교하고 복잡한 정렬이다. grid의 내부는 Lines, Track, Area, Gap이라는 영역으로 이루어져 있다. grid lines: 격자를 이루는 선의 집합으로 grid를 이루는 행과 열의 선 모두를 Lines라고 한다. 행은 grid row, 열은 grid column라고 한다. grid track: 평행한 grid의 두 줄 사이의 공간 grid area: grid line 4줄로 둘러 쌓인 공간 이렇게 4줄로 둘러 쌓이고 그 안이 더 이상 쪼개지지 않는 한 칸이라면 grid cell이라고 한다. 이런 셀이 1개 혹은 그 이상일 때 이 공간을 grid area라고 한다. grid gap: 행 여러 개와 열 여러 개 사이의 ..
마진 상쇄 (margin Collapsing) 보더(border)를 기준으로 경계선 내부를 패딩(padding), 외부를 마진(margin)이라고 한다. 마진과 패딩은 비슷하지만 서로 다른 두 요소를 위아래로 배치해서 마진을 사용할 때 마진의 특징이 보인다. See the Pen margin by summermong (@summermong) on CodePen. 마진을 20px씩 줬는데 위 아래 블록 사이 마진은 40px이 아니라 20px이다. 이런 경우 마진이 서로 상쇄됐다고 할 수 있다. See the Pen margin collapsing by summermong (@summermong) on CodePen. 아이디별로 마진을 나눠서 다시 줬다. #top의 아래쪽 마진은 20px, #bottom의 ..
선택자 선택자는 크게 단순 선택자, 복합 선택자, 가상 클래스(pseudo) 선택자로 나눌 수 있다. 이름이 중요한 것보다 어떤 특징이 있고 어떻게 쓰는지를 간단하게 정리한다. 직접 정의할 수 없고 HTML에서도 보이지 않는 가상 클래스는 이 글에서 정리하지 않는다. 단순 선택자 타입 선택자 해당 태그를 가진 요소 모두에 스타일을 적용한다. p 태그를 가진 모두의 색이 red로 변한다. p { color: red; } 아이디 선택자 HTML의 속성인 ID 이름으로 스타일을 적용한다. 한 문서에서 동일한 ID는 사용할 수 없어 서로 다른 요소들을 구별하기 위해 사용된다. p 태그 중에서 #goorm 이라는 ID를 가진 태그만이 배경 색이 파랗게 변한다. p { color: red; } #goorm { ba..
고정 크기 단위 단위 설명 px 픽셀(화소) pt 포인트 in 인치 cm, mm 센티미터, 밀리미터 px은 웹에서 대표적으로쓰이는 고정 크기 단위다. pixel, 화소는 디스플레이를 구성하는 최소 단위를 뜻하는데, 우리가 보통 모니터 해상도로 알고 있는 1920*1080이 바로 픽셀 수다. 가로 1920개의 픽셀과 세로 1080개의 픽셀을 곱해 총 2,073,600개의 픽셀로 모니터가 이루어져 있다. 12인치 모니터와 24인치 모니터 2대 모두 1920*1080의 해상도를 가지고 있다고 해보자. 두 모니터의 가로, 세로 길이는 다르지만 둘 다 200만 개가 넘는 픽셀을 모니터에 채워 넣어야 한다. 따라서 각 모니터의 픽셀 1개를 동일하게 1px이라고 불러도 1px의 크기가 서로 다르다. 이처럼 px은 장..
HTML 삽입 미리보기할 수 없는 소스 크게 어려운 건 없고 CSS 애니메이션을 어떻게 사용하는지 배웠다. 원형 로딩의 경우 span 모두를 inline-block으로 만들어 한 줄에 정렬하고 퍼센테이지에 따라 투명도와 스케일을 조절하는 애니메이션을 만들었다. 이 때 이 애니메이션을 적용할 때 animation delay를 걸어서 시작할 때 약간씩 시간차를 두면 천천히 로딩되는 화면을 구현할 수 있다. HTML 삽입 미리보기할 수 없는 소스 사각형으로 만든 로딩 화면은 약간 더 복잡하다. 현재 움직일 사각형 2개를 담을 수 있는 부모 사각형이 일단 있다 치고, 처음에는 부모 사각형의 좌측 상단에서 시작되게 한다. 좌측 상단 > 우측 상단 > 우측 하단 > 좌측 하단 > 좌측 상단으로 다시 돌아오는 형태인..
1. CSS 우선 순위 !important inline style (코드에 직접 삽입한 CSS 코드) id 선택자 class 선택자 태그 선택자 2. box-sizing box-sizing은 CSS 속성으로 요소의 크기를 계산하는 방식을 지정하는데 사용된다. HTML 요소의 크기는 그림의 파란색 부분, content의 크기에만 영향을 받지만, box-sizing을 사용하면 요소의 전체 크기에 여백(padding)과 테두리(border)를 포함해서 계산할 수 있다. 1) content-box (기본값) 요소의 크기가 내용 영역만 포함되어 계산된다. 여백과 테두리는 이 기본값에 추가로 더해진다. 2) border-box 요소의 크기가 내용 영역 + 여백과 테두리까지 포함된다. .box { width: 20..
CSS의 문법 a 태그로 시작하는 것 모두 빨간색으로 바꿔줘! HTML에 스타일 태그를 추가하는 것보다 CSS에서 관리하는 것이 유지보수 및 가독성 확보에 보다 효율적이며, CSS 코드를 통해 디자인 관련 정보를 전달해줄 수 있다. a: 선택자 (selector) color 부분을 Declaration이라고 하며, 선택자에게 지정될 효과를 적어준다. color는 property, red는 property value라고 한다. HTML에서는 이런 식으로 썼다. CSS 클래스와 ID 클래스 : 아래와 같이 코드가 있을 때 HTML, CSS 부분만 회색 폰트로 바꾸고 싶다. 각 태그에 위 볼드처리한 부분처럼 style을 넣어줘도 되지만 그럼 같은 내용을 2줄이나 써줘야 한다. 이럴 때 클래스를 사용해 별도로 ..
