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

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

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

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

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

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

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

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

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

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

HTML 태그를 쓰다 보면 어떤 태그는 항상 새 줄에서 시작하고, 어떤 태그는 글자 옆에 붙어서 따라온다. 이 차이는 CSS를 배우기 전에 꼭 짚고 가야 한다. 레이아웃을 이해하는 기초가 되기 때문이다.가로 전체를 차지하고, 앞뒤로 줄바꿈이 생기는 요소다. 항상 새 줄

<div>로만 구성된 페이지와 <header>, <nav>, <main>, <footer>로 구성된 페이지는 브라우저에서 똑같이 보일 수 있다. 하지만 코드의 의미는 완전히 다르다.태그 이름 자체가 콘텐츠의 의미를 담고 있는 태그다. <

로그인 화면, 회원가입, 검색창, 댓글 입력 — 사용자가 무언가를 입력하고 서버로 전송하는 곳이면 어디든 폼이 있다. HTML에서 사용자 입력을 받는 모든 요소가 폼과 관련된 태그들이다.<form>은 입력 요소들을 감싸고, 데이터를 어디로 어떻게 전송할지 정의한다

행과 열로 이루어진 데이터를 표현할 때 표를 쓴다. 시간표, 가격표, 비교표처럼 "이 항목이 저 항목과 어떻게 다른가"를 보여줄 때 특히 유용하다.<table> — 표 전체를 감싸는 태그<tr> — Table Row, 가로 한 줄<th> — Table

메뉴, 순서 있는 단계, 항목 나열. 웹 페이지에서 목록은 생각보다 훨씬 자주 등장한다. 네비게이션 바도 사실 <ul> 목록을 CSS로 가로로 펼쳐놓은 것이다.<ul>(Unordered List)은 순서가 중요하지 않은 항목들을 나열할 때 쓴다. 기본적으로

웹이 '웹'인 이유는 페이지들이 서로 연결되어 있기 때문이다. 그 연결을 만드는 태그가 <a>고, 텍스트 외에 시각적인 콘텐츠를 넣는 태그가 <img>다. 이 둘은 거의 모든 웹 페이지에서 빠지지 않는다.<a> 태그는 다른 페이지나 위치로 이동하는 하이

HTML에서 가장 많이 쓰는 태그들은 대부분 텍스트와 관련된 것들이다. 제목, 문단, 강조, 줄바꿈 — 텍스트를 어떻게 표현하느냐에 따라 태그가 달라진다.<h1>부터 <h6>까지 여섯 단계의 제목 태그가 있다. 숫자가 클수록 글자가 작아진다.<h1>은

웹 페이지를 처음 만들어보려고 하면 세 가지 파일이 등장한다. HTML, CSS, JavaScript. 이 셋은 각자 역할이 다르다.HTML — 내용과 구조 ("여기에 제목이 있고, 그 아래 문단이 있다")CSS — 디자인 ("제목은 파란색, 글자 크기는 24px")J

텍스트 편집기에서 Ctrl+Z를 누르면 방금 한 작업이 취소된다. 그리고 Ctrl+Y를 누르면 다시 실행된다. 이 기능을 구현하려면 "방금 한 작업"을 어딘가에 기록해둬야 한다. 작업이 무엇인지, 어떻게 되돌리는지도 함께.Command 패턴은 요청(작업) 자체를 객체로

라면을 끓이는 순서는 대체로 같다. 물을 끓이고, 면을 넣고, 스프를 넣는다. 신라면이든 짜파게티든 이 골격은 바뀌지 않는다. 달라지는 건 스프 종류나 토핑 같은 세부 과정이다.Template Method는 이 구조를 그대로 코드로 옮긴 패턴이다.알고리즘의 골격(순서)