CSS

HTML만으로 만든 페이지는 흰 배경에 검은 글씨가 전부다. 구조는 있지만 디자인이 없다. CSS가 없던 시절 웹이 딱 그랬다. CSS는 그 페이지에 색, 크기, 간격, 배치를 입히는 언어다.CSS(Cascading Style Sheets)는 HTML 요소가 화면에 어

웹 페이지의 분위기를 결정짓는 가장 빠른 요소가 색이다. CSS에서 색상을 다루는 방법과 배경을 설정하는 속성들을 정리한다.CSS에서 색을 지정하는 방법은 여러 가지다.기본 색상 이름 외에도 tomato, cornflowerblue, salmon 같은 이름도 지원한다.

디자인의 대부분은 텍스트다. 글자 크기, 굵기, 간격, 정렬 — 이것들만 잘 잡아도 페이지가 훨씬 읽기 편해진다. CSS에서 텍스트를 다루는 주요 속성들을 정리한다.쉼표로 여러 폰트를 나열하면 앞에서부터 순서대로 적용 가능한 폰트를 찾는다. 마지막에는 항상 serif,

CSS를 배우다가 "왜 여기에 여백이 생기지?", "왜 크기가 내가 지정한 것보다 크지?"라는 경험이 한 번씩은 생긴다. 이 혼란의 대부분은 박스 모델을 모르기 때문이다.HTML의 모든 요소는 눈에 보이지 않는 박스로 이루어져 있다. 이 박스는 네 가지 영역으로 구성된

HTML 파트에서 블록 요소와 인라인 요소를 배웠다. CSS의 display 속성은 그 기본 동작 방식을 바꿀 수 있다. <span>을 블록처럼 쓰거나, <div>를 인라인처럼 배치하는 것도 가능하다.가로 전체를 차지하고, 다음 요소는 새 줄로 밀린다widt

position 속성 요소를 특정 위치에 고정하거나, 다른 요소 위에 겹치게 하거나, 스크롤해도 화면에 따라오게 하려면 position 속성이 필요하다. 처음에는 개념이 헷갈리지만 각 값의 기준점이 어디인지를 이해하면 풀린다. position의 기준 positio

요소들을 가로로 나란히 놓거나, 세로 가운데 정렬을 하거나, 공간을 균등하게 나누는 작업이 Flexbox 이전에는 꽤 까다로웠다. float를 쓰거나, inline-block에 여백을 계산하거나. Flexbox가 등장하면서 이런 레이아웃 작업이 직관적으로 바뀌었다.di

Flexbox가 한 방향(가로 또는 세로)의 레이아웃을 다룬다면, Grid는 행과 열을 동시에 정의하는 2차원 레이아웃이다. 신문 지면처럼 칸을 나눠 콘텐츠를 배치하고 싶을 때 Grid가 적합하다.fr(fraction)은 그리드에서 사용 가능한 공간의 비율을 나타내는

같은 HTML 파일을 노트북으로 열면 넓은 화면에 맞게 보이고, 스마트폰으로 열면 작은 화면에 맞게 레이아웃이 바뀐다. 이걸 가능하게 하는 CSS 기능이 미디어 쿼리다.화면 크기, 해상도, 기기 종류에 따라 레이아웃과 스타일이 유연하게 바뀌는 웹을 말한다. 하나의 HT

마우스를 올렸을 때 색이 바뀌거나, 첫 번째 항목에만 스타일이 적용되거나, 요소 앞뒤에 내용이 자동으로 붙는 기능. 이런 것들이 HTML에 추가 클래스 없이 CSS만으로 가능하다. 의사 클래스와 의사 요소 덕분이다.요소의 특정 상태에 스타일을 적용한다. : 하나로 표기