웹 표준
[HTML] 기초
Chapter1. 웹 개발 이해하기
학습 목표
- 웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.
- VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.
- VScode를 이용하여 작성한 HTML을 브라우저에서 확인할 수 있다.
Chapter1-1. 웹 개발과 HTML & CSS & JavaScript
- 개념학습: 웹 개발에서 HTML, CSS, JavaScript 각각이 하는 역할에 대하여 학습합니다.
- 퀴즈: 개념학습을 통해 학습한 내용에 대한 이해도를 점검합니다.
퀴즈
Chapter1-2. Visual Studio Code
- 환경설정: VScode의 특징에 대해 학습하고, 설치 안내를 따라 VScode를 설치합니다.
- 튜토리얼: 강의를 따라 VScode 사용법을 실습합니다.
Visual Studio Code 설치
Visual Studio Code란?
Visual Studio Code(이하 VScode)는 마이크로소프트에서 개발한 전 세계에서 가장 대중적인 코드 에디터입니다. 프로그램, 웹 사이트, 웹 애플리케이션 등을 만들 수 있습니다. 여러분이 학습한 코드를 실제로 작성할 수 있을 뿐 아니라 개발자에게 필요한 다양한 기능을 제공하는 일종의 메모장이라고 생각하셔도 좋습니다.
Visual Studio Code의 장점
VScode는 전 세계의 개발자들에게 사랑받는 코드 에디터인 만큼 굉장히 많은 장점이 존재하는데, 그중에서 저희 코스와 관련된 장점을 나열하면 아래와 같습니다.
- macOS, Linux, Windows 등 OS와 상관없이 사용이 가능합니다.
- JavaScript, HTML, CSS를 모두 편집할 수 있습니다.
- 다양한 extension을 제공하여 개발자의 취향에 맞게 커스터마이징이 가능합니다.
- 디버깅(debugging)이 편리합니다.
- 무료로 사용할 수 있습니다.
여러분도 학습 전반부에 걸쳐서 VScode를 사용하여 실습과 과제, 그리고 프로젝트를 진행하게 됩니다. VScode를 설치하고, HTML 파일을 생성해 보겠습니다.
1. VScode 설치하기
VScode는 무료로 사용이 가능하고, OS에 상관없이 사용이 가능할 뿐만 아니라, 설치도 매우 간단합니다.
에 가면 이런 화면을 볼 수 있습니다. 오른쪽 위에 있는 Download 버튼을 클릭합니다.
PC에 설치된 OS에 맞게 설치하시면 됩니다.
2. 폴더 열기
VScode를 처음 실행시키면 위와 같은 화면을 볼 수 있습니다. 작업하고자 하는 폴더가 이미 있다면, 열기 버튼을 눌러서 작업하고자 하는 폴더를 선택하면 됩니다. 하지만 여러분은 이제 막 VScode를 실행했으므로 새로운 폴더를 생성하도록 하겠습니다. '열기'를 누른 후, 좌측 하단의 '새로운 폴더' 버튼을 눌러서 새로운 폴더를 생성합니다. 폴더의 이름은 ‘로그인 페이지'로 하겠습니다.
폴더가 생성됐다면, 열기 버튼을 눌러서 폴더를 엽니다.
3. HTML 파일 만들기
이런 화면이 나왔다면 성공입니다. 이번에는 HTML 파일을 생성해 보겠습니다. 왼쪽 사이드바에 폴더명이 나와 있는 것을 볼 수 있습니다.
폴더명에 마우스를 대면 4개의 아이콘이 보입니다. 가장 왼쪽에 있는 아이콘이 새로운 파일을 생성하는 아이콘입니다. HTML 파일을 생성해야 하므로 파일명은 login.html로 하겠습니다.
아래와 같은 화면이 나왔다면 HTML을 작성할 준비가 된 것입니다.
생성된 폴더와 파일은 Chapter2-3에서 사용할 예정이므로, 삭제하지 않으시는 걸 권장합니다.
Chapter2. HTML 기초
학습 목표
- HTML이 "구조를 표현하는 언어"라는 의미를 자신의 언어로 표현할 수 있다.
- HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
- 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
- <div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
- <ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
- <input> 요소에 type을 설정하여 다양한 종류의 <input> 요소를 활용할 수 있다.
- id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(semantic) HTML 문서를 작성할 수 있다.
- HTML5 시멘틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
- 시멘틱 요소가 무엇인지 설명할 수 있다.
- 시멘틱 요소를 사용하는 이유에 대하여 이해한다.
- 검색을 통해 시멘틱 요소를 찾고 적절하게 적용할 수 있다.
Chapter2-1. HTML 기본 구조와 문법
- 개념학습: HTML의 기본 구조와 문법을 학습합니다.
- 퀴즈: 개념학습을 통해 학습한 내용에 대한 이해도를 점검합니다.
퀴즈
Chapter2-2. 자주 사용하는 HTML 요소
- 개념학습: 자주 사용하는 HTML 요소들을 학습합니다.
- 퀴즈: 개념학습을 통해 학습한 내용에 대한 이해도를 점검합니다.
퀴즈
Chapter2-3. 로그인 페이지 만들기
실습: 로그인 페이지에 들어가는 HTML 요소를 적용합니다.
실습
앞서 Chapter2-3에서 진행한 실습에서 간단한 로그인 페이지를 만들어보았습니다. 이번 실습에서는 이 로그인 페이지의 HTML에 id와 class를 추가해 봅시다. 이번에는 VScode가 아닌 CodeSandbox를 사용합니다. 실습 링크로 들어간 후 학습 콘텐츠를 따라가며 진행해 주세요.
1. 실습 파악하기
우선 index.html을 확인해 보면 앞서 진행했던 실습과 동일한 코드가 들어있는 것을 확인할 수 있습니다.
<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label>
<link rel="stylesheet" href="style.css">
그런데 마지막 줄엔 처음 보는 코드가 있는 것도 보이는데요. Unit5에서 배울 CSS와 관련된 코드입니다. 지금은 id와 class 종류에 따라 요소의 디자인을 변경시켜 주는 코드라고만 알아두시면 충분합니다. 여러분이 콘텐츠를 따라서 id와 class를 적절하게 추가하면 화면의 디자인도 함께 변하게 될 겁니다.
그럼 앞서 공부한 id와 class를 추가하는 방법을 사용해 id와 class를 추가해 봅시다. 각 요소에 추가해 줄 id와 class는 다음과 같습니다.
2. id 추가하기
첫 번째 태그는 같이 진행해 볼까요? 우선 아이디부터 추가해 봅시다. 아이디를 추가하기 위해서는 여는 태그 안에 id= 를 적고, 뒤에 문자열 형태로 추가할 아이디를 적어주면 됩니다. 우리가 추가할 아이디 명은 id-input이니 id="id-input"이라고 작성합시다.
<input id="id-input" type="text" placeholder="ID">
코드 작성을 완료했다면 코드를 저장해 주세요. 좌측 상단 버튼 → File → Save를 눌러 저장하거나, 스페이스 바 좌측의 Command(⌘) + S를 눌러 저장할 수 있습니다.
코드를 저장한 후 미리 보기 화면을 확인해 보면 id만 작성했을 뿐인데 input 창의 모양이 변한 것을 확인할 수 있습니다.
3. class 추가하기
이번에는 같은 태그에 클래스를 하나 추가해 봅시다. 클래스를 추가하기 위해서는 여는 태그에 class=를 적고, 뒤에 문자열 형태로 추가할 클래스를 적어주면 됩니다. 우리가 추가할 클래스 명은 input이니까 class="input"이라고 작성합시다.
<input id="id-input" class="input" type="text" placeholder="ID">작성을 완료했다면 코드를 저장한 후 미리 보기 화면을 확인해 보세요. 이번에도 화면이 변한 것을 볼 수 있습니다.
하나만 더 같이 해볼까요? 첫 번째 태그에 아직 추가할 클래스가 하나 더 남아있습니다. focus 클래스인데요. 마저 작성해 봅시다. 하나의 태그에 클래스를 여러 개 작성해 주고 싶을 땐 하나의 문자열 안에서 띄어쓰기로 구분해 주면 됩니다.
<input id="id-input" class="input focus" type="text" placeholder="ID">
이번에도 작성을 완료한 후에 코드를 저장합니다. 미리 보기 창을 확인해 보면, 인풋 태그를 클릭했을 때 배경색이 변하는 것을 확인할 수 있습니다.
여기까지 잘 따라오셨다면 여러분 자신도 충분히 나머지 태그에 id와 class를 추가할 수 있습니다. 표에 맞춰서 각 태그에 맞는 id와 class를 추가해 보세요! 그리고 하나씩 추가할 때마다 코드를 저장하며 화면이 변하는 것도 확인해 보세요. 모두 잘 추가하셨다면 다음과 같은 화면을 보실 수 있습니다.
이번 실습에서는 HTML 태그에 id와 class를 추가해 보았습니다. id와 class만 추가했는데 화면 디자인이 변하는 과정이 신기하지 않으셨나요? 이 과정에 대해서는 바로 다음 유닛에서 공부하실 수 있습니다. 이번 실습에서는 id와 class를 추가하는 방법을 잘 익히셨다면 성공적입니다.
style.css
.input {
display: block;
width: 200px;
height: 30px;
text-indent: 10px;
border: 2px solid lightgray;
}
#id-input {
border-radius: 10px 10px 0 0;
}
#password-input {
border-radius: 0 0 10px 10px;
border-top: 0;
margin-bottom: 5px;
}
.focus:focus {
background-color: rgb(227, 237, 255);
}
#login-button {
display: block;
height: 35px;
width: 200px;
border-radius: 10px;
border: 2px solid rgb(132, 175, 255);
background-color: rgb(58, 133, 255);
transition: 0.1s;
color: white;
font-weight: 900;
}
#login-button:hover {
background-color: rgb(136, 179, 255);
}
#login-button:active {
transform: translateY(1px);
background-color: rgb(188, 213, 255);
border: 2px solid rgb(167, 197, 255);
}
#keep-checkbox {
margin-top: 10px;
margin-left: 50px;
}
body {
margin: 30px;
}Chapter2-4. 시멘틱 요소
- 개념학습: 시멘틱 요소에 대하여 학습합니다.
- 퀴즈: 개념학습을 통해 학습한 내용에 대한 이해도를 점검합니다.
개념학습
시멘틱 요소란?
HTML의 최신 버전인 HTML5에서는 시멘틱 웹(semantic web)이 중시되면서 여러 시멘틱 요소(semantic element)가 새롭게 만들어졌습니다. 시멘틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다. 시멘틱 요소 중 하나인 <h1> 요소를 예로 들어 보겠습니다. 최상위 제목(top level heading)을 표현할 때 사용하는 요소인 <h1> 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 합니다. 이와 같은 효과는 <div> 요소, <span> 요소에 CSS 속성을 추가하여 <h1> 요소와 똑같이 보이도록 할 수 있습니다. 그러나 <h1> 요소를 사용할 때처럼 의미적 가치는 없다고 할 수 있습니다.
시멘틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 <div> 요소를 주로 사용했습니다. 그러다 보니 웹 페이지 하나에 <div> 요소 수십 개가 중첩된 이른바 <div> 지옥이 되는 경우가 많았습니다.
시멘틱 요소를 사용해야 하는 이유
의미 있는 요소를 사용하는 것보다 <div> 요소를 사용하되 용도에 맞게 스타일을 부여하면 되는데, 왜 시멘틱 요소를 사용하는 것을 추구할까요? 그 이유를 몇 가지 소개해 보겠습니다. 첫째, 검색 엔진이 시멘틱 요소를 더 좋아하기 때문입니다. 네이버, 구글 등은 모두 고유한 검색엔진을 보유하고 있습니다. 여러분이 키워드를 입력하고 검색을 하면 각 웹 페이지를 방문하여 그 키워드를 포함하고 있는지 확인하여 결과를 보여 줍니다. 그런데 검색 엔진이 웹페이지들을 방문할 때, 시멘틱 요소를 중요한 키워드로 고려합니다. 즉, 시멘틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것입니다. 둘째, 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다. 그뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.
따라서 HTML 요소를 작성할 때, 항상 작성할 데이터를 가장 잘 설명할 수 있는 요소는 무엇일지 고려해야 합니다.
시멘틱 요소의 종류
시멘틱 요소의 종류는 굉장히 다양하지만 주로 쓰이는 몇 가지를 알아보겠습니다.
- <article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
- <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
- <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
- <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
- <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
- <main> : 문서의 주된 콘텐츠를 표시합니다.
다른 HTML 요소와 마찬가지로, 시멘틱 요소와 의미를 모두 암기하고 있을 필요는 없습니다. 필요할 때 검색해서 사용할 수 있을 정도면 충분합니다. 관련된 내용을 추가적으로 학습하고 싶다면 아래 레퍼런스를 참고하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 요소 예제 페이지</title>
</head>
<body>
<div class="header">
<h1>웹사이트 제목</h1>
<div class="nav">
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="article">
<h2>독립적인 콘텐츠 제목</h2>
<p>이것은 독립적이고 자체 포함된 콘텐츠의 예시입니다. 예를 들어, 블로그 포스트나 뉴스 기사 등이 이에 해당됩니다.</p>
</div>
<div class="aside">
<h3>관련 정보</h3>
<p>이것은 본문 콘텐츠와 관련된 추가 정보를 제공하는 사이드바의 예시입니다. 여기에는 광고, 링크 목록, 소셜 미디어 버튼 등이 포함될 수 있습니다.</p>
</div>
</div>
<div class="footer">
<p>저작권 © 2024. 모든 권리 보유.</p>
<p>연락처 정보: <a href="mailto:example@example.com">example@example.com</a></p>
</div>
</body>
</html>
[코드 1-1] 시맨틱 요소를 사용하지 않은 html 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 요소 예제 페이지</title>
</head>
<body>
<header>
<h1>웹사이트 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>독립적인 콘텐츠 제목</h2>
<p>이것은 독립적이고 자체 포함된 콘텐츠의 예시입니다. 예를 들어, 블로그 포스트나 뉴스 기사 등이 이에 해당됩니다.</p>
</article>
<aside>
<h3>관련 정보</h3>
<p>이것은 본문 콘텐츠와 관련된 추가 정보를 제공하는 사이드바의 예시입니다. 여기에는 광고, 링크 목록, 소셜 미디어 버튼 등이 포함될 수 있습니다.</p>
</aside>
</main>
<footer>
<p>저작권 © 2024. 모든 권리 보유.</p>
<p>연락처 정보: <a href="mailto:example@example.com">example@example.com</a></p>
</footer>
</body>
</html>
[코드 1-2] 시맨틱 요소를 사용한 html 문서
Chapter3. HTML 심화
학습 목표
- 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
- 와이어프레임만 보고 HTML로 코딩할 수 있다.
- <div> 요소 또는 <section>, <header> 등의 시멘틱 요소로 영역을 구분하는 이유를 이해할 수 있다.
- HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.
Chapter3-1. 웹 앱의 구조 잡기
- 개념학습: 웹을 구성하는 요소를 파악할 수 있다.
- 퀴즈: 개념학습을 통해 학습한 내용에 대한 이해도를 점검합니다.
개념학습
퀴즈
Chapter3-2. id와 class 사용하기
- 개념학습: 각 요소마다 고유한 값을 부여하고 활용할 수 있다.
- 퀴즈: 개념학습을 통해 학습한 내용에 대한 이해도를 점검합니다.
개념학습
퀴즈
Chapter3-3. 로그인 페이지 만들기2
- 실습: HTML 요소에 id와 class 속성을 추가하고 변화를 확인합니다.
실습하기
앞서 Chapter2-3에서 진행한 실습에서 간단한 로그인 페이지를 만들어보았습니다. 이번 실습에서는 이 로그인 페이지의 HTML에 id와 class를 추가해 봅시다. 이번에는 VScode가 아닌 CodeSandbox를 사용합니다. 실습 링크로 들어간 후 학습 콘텐츠를 따라가며 진행해 주세요.
login2_practice (forked) - CodeSandbox
login2_practice (forked) by woondo.kwak
codesandbox.io
1. 실습 파악하기
우선 index.html을 확인해 보면 앞서 진행했던 실습과 동일한 코드가 들어있는 것을 확인할 수 있습니다.
<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label>
<link rel="stylesheet" href="style.css">
그런데 마지막 줄엔 처음 보는 코드가 있는 것도 보이는데요. Unit5에서 배울 CSS와 관련된 코드입니다. 지금은 id와 class 종류에 따라 요소의 디자인을 변경시켜 주는 코드라고만 알아두시면 충분합니다. 여러분이 콘텐츠를 따라서 id와 class를 적절하게 추가하면 화면의 디자인도 함께 변하게 될 겁니다.
그럼 앞서 공부한 id와 class를 추가하는 방법을 사용해 id와 class를 추가해 봅시다. 각 요소에 추가해 줄 id와 class는 다음과 같습니다.
2. id 추가하기
첫 번째 태그는 같이 진행해 볼까요? 우선 아이디부터 추가해 봅시다. 아이디를 추가하기 위해서는 여는 태그 안에 id= 를 적고, 뒤에 문자열 형태로 추가할 아이디를 적어주면 됩니다. 우리가 추가할 아이디 명은 id-input이니 id="id-input"이라고 작성합시다.
<input id="id-input" type="text" placeholder="ID">
코드 작성을 완료했다면 코드를 저장해 주세요. 좌측 상단 버튼 → File → Save를 눌러 저장하거나, 스페이스 바 좌측의 Command(⌘) + S를 눌러 저장할 수 있습니다.
코드를 저장한 후 미리 보기 화면을 확인해 보면 id만 작성했을 뿐인데 input 창의 모양이 변한 것을 확인할 수 있습니다.
3. class 추가하기
이번에는 같은 태그에 클래스를 하나 추가해 봅시다. 클래스를 추가하기 위해서는 여는 태그에 class=를 적고, 뒤에 문자열 형태로 추가할 클래스를 적어주면 됩니다. 우리가 추가할 클래스 명은 input이니까 class="input"이라고 작성합시다.
<input id="id-input" class="input" type="text" placeholder="ID">
작성을 완료했다면 코드를 저장한 후 미리 보기 화면을 확인해 보세요. 이번에도 화면이 변한 것을 볼 수 있습니다.
하나만 더 같이 해볼까요? 첫 번째 태그에 아직 추가할 클래스가 하나 더 남아있습니다. focus 클래스인데요. 마저 작성해 봅시다. 하나의 태그에 클래스를 여러 개 작성해 주고 싶을 땐 하나의 문자열 안에서 띄어쓰기로 구분해 주면 됩니다.
<input id="id-input" class="input focus" type="text" placeholder="ID">
이번에도 작성을 완료한 후에 코드를 저장합니다. 미리 보기 창을 확인해 보면, 인풋 태그를 클릭했을 때 배경색이 변하는 것을 확인할 수 있습니다.
여기까지 잘 따라오셨다면 여러분 자신도 충분히 나머지 태그에 id와 class를 추가할 수 있습니다. 표에 맞춰서 각 태그에 맞는 id와 class를 추가해 보세요! 그리고 하나씩 추가할 때마다 코드를 저장하며 화면이 변하는 것도 확인해 보세요. 모두 잘 추가하셨다면 다음과 같은 화면을 보실 수 있습니다.
이번 실습에서는 HTML 태그에 id와 class를 추가해 보았습니다. id와 class만 추가했는데 화면 디자인이 변하는 과정이 신기하지 않으셨나요? 이 과정에 대해서는 바로 다음 유닛에서 공부하실 수 있습니다. 이번 실습에서는 id와 class를 추가하는 방법을 잘 익히셨다면 성공적입니다.
퀴즈
[CSS] 기초
Before You Learn
- 개발자 도구 이용법: 개발자 도구 Element 탭을 사용하여 웹 페이지의 각 요소에 적용된 CSS 속성을 확인할 수 있습니다.
- HTML 요소 사용법: HTML로 짜인 구조에 CSS로 디자인을 적용하는 실습을 진행합니다. 특히 id와 class 속성의 사용법을 아는 것이 중요합니다. 또한, id와 class가 부여된 HTML 요소를 다양한 CSS Selector를 사용하여 선택하는 연습문제도 준비되어 있습니다.
Chapter1. CSS 기초
HTML이 웹 페이지의 구조를 담당한다면, CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당합니다. 이번 챕터를 학습하고 나면 같은 HTML 구조를 가지고 있는 문서에, 각기 다른 CSS 파일을 적용하여 전혀 다른 웹사이트처럼 보이게 할 수도 있습니다.
Chapter1-1. CSS와 프론트엔드 개발
- 개념학습: 웹 개발에서 CSS의 역할과 프론트엔드 개발과의 관계를 학습합니다.
- 퀴즈: 학습한 내용의 이해도를 점검합니다.
개념학습
CSS (Cascading Style Sheets)
CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다. 지금까지 학습한 HTML로 웹 페이지의 구조를 잘 세우고 나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있습니다. CSS가 개발자인 여러분에게 어떤 의미가 있을까요? 미래의 프론트엔드 개발자로서 앞으로 CSS에 대해 가져야 할 마음가짐을 공유하고자 합니다.
CSS는 좋은 사용자 경험을 제공하기 위한 도구입니다.
아래 두 웹 사이트 중 어떤 웹 사이트가 더 보기 좋은가요? 단순한 정보 전달을 위한 사이트라면 왼쪽도 괜찮겠지만, 좀 더 편안한 분위기, 정돈된 레이아웃, 문단 간격을 조정한 오른쪽이 조금 더 보기 좋고, 가독성이 좋아 보입니다. 놀랍게도 두 사이트는 똑같은 HTML 파일을 씁니다. 같은 파일이지만, 전달력의 차이가 생겼습니다.
[그림] CSS가 만들어 낸 사용자 경험의 차이
이처럼 CSS는 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 합니다. 개발자는 이 CSS로 무엇부터 만들게 될까요? 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스(user interface)부터 만들게 됩니다.
사용자 인터페이스(UI; user interface)
사용자 인터페이스(UI; user interface)에 관해서 설명하기 전, 인터페이스(interface)에 대해서 알아보겠습니다. 쉽게 설명하자면 인터페이스는 컴퓨터와 교류하기 위한 연결고리입니다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI를 사용했습니다. 키보드로 작성한 비밀 암호 같은 코드를 적어서 엔터를 눌러야만 애플리케이션을 작동시킬 수 있었습니다.
[그림] 개발자가 애플리케이션과 소통하는 방법
요즘은 어떤가요? 트위터로 메시지를 보내려면 메시지를 키보드 인터페이스로 톡톡톡 입력하고, 마우스로 버튼 모양의 인터페이스를 누르면 됩니다. 잘 만들어진 인터페이스 덕분입니다. 이렇게 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부릅니다.
[그림] 일반 사용자도 쉽게 쓸 수 있는 UI
트위터를 잘 쓰던 사용자에게 갑자기 CLI로 메시지를 전송하라고 요구를 하면, 어떻게 반응할까요? 적어도 하루는 고생해서 비밀 암호와 같은 코드를 알아내야만 할 것이고, 아마 평범한 트위터 사용자라면 해당 애플리케이션 사용을 포기할 것입니다. UI는 사용자가 애플리케이션을 사용하게 하는데 매우 중요한 역할을 하고, UI가 없으면 애플리케이션과 소통이 불가능하다는 교훈을 얻었습니다.
[그림] UI가 어려워서 애플리케이션을 쓰지 못하는 일반 사용자
직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양입니다.
웹 프론트엔드 개발자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당합니다. 그래서 애플리케이션과 소통에 필요한 UI 제작은 프론트엔드 개발자의 기본 소양입니다. CSS를 이용하여 글자에 밑줄을 그어 하이퍼링크로 제작하는 것, 사각형 모양 도형 아래에 그림자 효과를 주어 버튼처럼 보이게 만드는 것, 콘텐츠가 더욱 잘 보이게 레이아웃을 적절히 디자인하는 것 모두 프론트엔드 개발자가 해야 할 일입니다.
다음과 같은 UI를 한번 살펴볼까요? 이 앱은 자동차의 주행 기록을 기록합니다. 다소 복잡해 보이는 UI를 가지고 있지만, 자동차의 주행 기록을 필요로 하는 사람에게는 최고의 솔루션입니다. 만약 이 앱에서 버튼을 전부 없다면 어떨까요? 어제와 오늘, 그리고 다른 날짜의 기록을 확인하거나 기록을 다운로드하는 데에 큰 어려움을 겪을 겁니다.
[그림] UX가 고려되지 않은 주행 기록 애플리케이션
좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나옵니다.
이번에는 UX를 고려해 보겠습니다. 복잡한 내용을 단순하게 구분 짓고, 페이지를 나누어 사용자가 한 페이지에서 볼 수 있는 내용을 제한했습니다. 화면크기는 같지만, 사용자가 하나의 내용에 집중할 수 있도록 UX를 고려하여 리디자인 했습니다.
[그림] UX를 고려하여 리디자인한 주행 기록 애플리케이션
- 참고: 모바일 앱에도 CSS, 또는 이와 유사한 스타일링 기술을 사용합니다.
UX를 고려하여 디자인하려면, 디자인을 배워야 하는 것 아닌가요?
놀랍게도, UX를 충분히 고려한 위 애플리케이션의 로고나 이미지는 전문적인 이미지 툴 없이 제작했습니다.
- 검색을 통해 무료로 사용할 수 있는 아이콘을 쉽게 찾을 수 있습니다. (검색어: free app icon)
- 네모 혹은 모서리가 둥근 네모, 동그라미와 같은 도형은 CSS로 쉽게 만들 수 있습니다.
전 세계의 수억 명이 사용하고 있는 사이트에 접속하세요.
위의 웹 페이지와 똑같이 만드는 것은 전문 디자이너만 할 수 있는 일이 아닙니다. 물론 위에서 소개한 웹 페이지는 훌륭한 디자이너들이, 웹 페이지가 고유의 기능에 충실하게 하기 위해 엄청난 연구를 한 결과물입니다. 그러나 코드로 구현하기 위한 기술은 어려운 것이 아닙니다. 다시 말해, 여러분도 충분히 모방할 수 있습니다.
프론트엔드 개발자가 되려면...
그래서 프론트엔드 개발자가 되려면 지금까지 다룬 여러 내용을 실제 만들어서 웹 페이지로 만들 수 있는 능력이 필요합니다. 웹 페이지 제작을 위해서는 아래 역량이 필요합니다.
- 컴포넌트 기능별로 묶어서 제작
- 화면의 구성이나 배치 (레이아웃 디자인)
- 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
그리고 아래의 내용은 프론트엔드 개발자에게 있으면 좋고, 없어도 크게 상관없는 부분입니다.
- 정렬이나 배색에 대한 감각
- UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
위 역량을 갖추면, 적어도 아래 보노보노 ppt 디자인의 문제점이 무엇인지 분석할 수 있고, 해결책을 제안할 수 있어야 합니다.
[그림] ppt 보노보노에 관한 고찰
CSS는 어렵다?
[그림] 디자인 아트, CSS IS AWESOME
이상하게도 CSS는 웹 개발자가 배우기 가장 쉬운 동시에, 가장 어려운 언어 중 하나입니다. 특정한 HTML 요소에, 적용할 스타일 속성과 값을 정의하면 필요한 부분이 거의 완성됩니다. 그러나 프로젝트의 규모가 조금만 더 커져도 CSS를 의미 있게 구성하는 일이 어렵고 복잡합니다. 한 페이지에서 특정 HTML 요소를 CSS로 스타일링하기 위해서 CSS 파일 중 한 부분을 변경했더니, 다른 페이지의 HTML 요소가 변경되는 의도치 않은 상황이 연출되곤 합니다.
그러나 어떤 모범 사례가 가장 좋은 사례인 지에 대해 합의된 내용이 없습니다. 실제로 많은 모범 사례가 서로 완전히 상충하기도 합니다. 이런 점이 CSS를 어렵고 복잡하게 느끼게 합니다.
이처럼 CSS가 가진 고유의 복잡함을 다루기 위해, 많은 종류의 다양한 모범 사례(Best practice)가 만들어졌습니다.
퀴즈
Chapter1-2. CSS 따라하기
Chapter1-2. CSS 따라 하기
- 실습: 학습한 CSS를 적용하여 실습합니다.
CSS로 기본적인 스타일링하기
지금부터 CSS를 학습합니다. CSS는 스타일링 도구이므로, 독립적으로 기능하지 않습니다. 반드시 HTML이 있어야만 동작할 수 있습니다. 한 폴더에 간단하게 작성한 HTML 파일인 index.html이 있습니다. 같은 폴더에 새로운 CSS 파일 index.css을 만들어 웹사이트를 만들어 보겠습니다.
이 실습의 목표는 직접 다음 화면을 만드는 겁니다.
[그림] CSS 챕터의 최종 목표
index.html 파일부터 살펴보겠습니다. 이 파일에 등장하는 <header>, <main>, <nav>, <aside>, <footer> 요소는 기능적으로는 <div> 요소와 똑같지만, 이 요소가 감싸고 있는 영역이 어떤 역할을 담당하는지 개발자가 쉽게 파악할 수 있도록 돕는 시멘틱 요소입니다. index.html 파일이 비어있다면, 아래의 내용을 붙여 넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<h4>This is the navigation section.</h4>
<ul>
<li>Home</li>
<li>Mac</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</nav>
<main>
<h1>This is the main content.</h1>
<p>...</p>
</main>
<aside>
<h4>This is an aside section.</h4>
<p>...</p>
</aside>
</div>
<footer>
<ul>
<li>개인정보 처리방침</li>
<li>이용 약관</li>
<li>법적 고지</li>
</ul>
</footer>
</body>
</html>
[코드] index.html 파일
index.html 파일을 살펴봤습니다. 위의 HTML 파일은 다양한 구조를 나타냅니다. 그러나 HTML 파일을 실행하더라도 구조가 눈에 보이지 않아 파악하기 힘듭니다. 이 문제를 해결하기 위해 index.css 파일을 작성합니다.
CSS를 이용해 멋지게 꾸며보고 싶지만, 일단 각 요소의 영역 구분을 위해서 요소마다 고유한 색상을 지정하겠습니다. 아래 코드를 지금 당장 완벽하게 이해하지 못해도 좋습니다. 앞으로 만날 수많은 과제를 통해 천천히 알아보아도 좋습니다. index.css 파일이 비어있다면, 아래의 내용을 붙여 넣습니다.
body {
margin: 0;
padding: 0;
background: #fff;
color: #4a4a4a;
}
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}
nav {
background: #eee;
}
main {
background: #f9f9f9;
}
aside {
background: #eee;
}
[코드] index.css파일
별도의 파일을 작성하지 않더라도, codepen에서 바로 확인해 볼 수 있습니다.
[그림] HTML과 CSS를 이용한 간단한 웹페이지는 코드펜에서 쉽게 확인할 수 있다.
CSS 내용 분해하기
CSS의 문법 구성은 다음 그림에 잘 나타나 있습니다.
[그림] CSS의 문법 구성
선택자는 요소 이름이나 id, 또는 클래스를 선택합니다. 선택자로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성합니다. 요소에 적용할 수 있는 내용을 속성이라고 합니다. 색상, 글자 크기 등 다양한 속성이 있습니다. 속성에 적용할 적절한 값을 입력하여 스타일을 표현합니다. 그림에 나타나 있는 color: red;는 이 요소의 색상을 빨간색으로 스타일링합니다. 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분합니다. 하나의 속성만 존재할 때는 세미콜론을 붙이지 않아도 무방하지만, 속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋습니다.
질문
- 위 CSS 예제에서 등장하는 속성은 어떤 것들이 있나요?
- 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
- 글자 색을 바꾸기 위한 속성은 무엇인가요?
- 배경 색을 바꾸기 위한 속성은 무엇인가요?
- background 속성과 background-color 속성은 어떻게 다른가요?
CSS 파일 추가
여러분은 위에서 HTML 파일과 CSS 파일을 작성했습니다. 이번에는 CSS 파일에 작성된 내용을 HTML 파일에 적용하는 방법을 학습합니다. 코드펜에서 확인할 수 있었던 것처럼, 이미 두 파일은 연결되어 있습니다. CSS 파일을 HTML 파일과 연결하는 부분은 index.html 파일의 6번째 줄에 있습니다. CSS 파일을 HTML 파일에 연결할 때는, <link> 태그 안에서 href 속성을 통해 파일을 연결합니다.
<link rel="stylesheet" href="index.css" />
[코드] link 태그와 link 태그의 속성
<link> 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다. <link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다. CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet를 추가합니다. href 속성에는 파일의 위치를 추가해야 합니다. 지금 작성한 두 파일은 한 폴더 내에 있으므로 파일 이름만 입력합니다. 다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할 수 있습니다.
똑같은 구조에 다른 스타일을 적용하면, 완전히 다른 스타일로 탈바꿈할 수 있습니다. 새로운 CSS 파일을 layout.css라는 이름으로 만들고, 다음의 내용을 붙여 넣습니다. 그리고 이 CSS 파일을 연결하기 위해 새로운 <link> 요소를 추가합니다. layout.css 파일은 index.css 파일과는 달리 HTML 요소를 배치하는 역할을 합니다. 이 파일에서 나타나는 flex와 같은 다양한 속성은 레이아웃을 학습할 때 좀 더 자세히 살펴봅니다.
<link rel="stylesheet" href="index.css" /><link rel="stylesheet" href="layout.css" />
[코드] index.html 파일에 새로운 link 요소를 추가합니다.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
main {
flex: 1;
padding: 0 20px;
}
nav {
flex: 0 0 180px;
padding: 0 10px;
}
aside {
flex: 0 0 130px;
padding: 0 10px;
}
[코드] layout.css 파일을 만들고 위 내용을 붙여 넣습니다.
[그림] layout.css 파일을 추가한 상태에서 index.html을 실행한 모습
별도의 파일을 작성하지 않더라도 codepen에서 확인할 수 있습니다.
CSS 스타일을 적용할 수 있는 방법은 3가지가 있습니다. 그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 요소 내에 작성하는 내부 스타일 시트, 그리고 앞서 설명한 외부 스타일 시트입니다. 아래의 예제는 세 가지 방법 중 인라인 스타일에 해당합니다.
<nav style="background: #eee; color: blue">...</nav>
[코드] CSS 스타일 적용법 중 인라인 스타일
그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않습니다. 가끔은 파일로 굳이 구분하지 않아도 될 만큼 적은 CSS를 사용하는 경우도 있습니다. 이런 특수한 경우를 위해, 직접 CSS 속성을 추가하는 방법은 함께 안내하니 참고하시기 바랍니다.
기본적인 선택자 (selector)
id로 이름 붙여서 스타일링 적용하기
위에서 작성해 본 HTML 문서에는 <h4> 나 <p> 요소가 여럿 존재합니다. navigation section 아래에 있는 <h4> 요소에만 색을 바꾸려면 어떻게 해야 할까요? 일단 <h4> 요소를 선택해 색상을 변경해 봅시다.
h4 {
color: red;
}
[코드] h4 요소의 색상을 변경
변경한 내용은 codepen에서 확인할 수 있습니다.
문서를 다시 살펴보면, navigation section에만 적용하려고 했던 의도와는 달리, aside section의 <h4> 요소에도 변경한 색상이 적용됐습니다. navigation section 아래의 <h4> 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있습니다. 이름을 붙일 때는 가능한 의미를 담아서 구분할 수 있도록 합니다. id가 있는 요소를 선택할 때는 #기호를 이용합니다. id는 하나의 문서에서 한 요소에만 사용해야 합니다.
<h4 id="navigation-title">This is the navigation section.</h4>
[코드] h4 요소에 id를 붙입니다.
#navigation-title {
color: red;
}
[코드] id로 요소를 선택해 스타일링합니다.
변경한 내용은 codepen에서 확인할 수 있습니다.
class로 스타일을 분류하여 적용하기
id와 유사하게 특정 요소에 class를 지정하는 방법도 있습니다. 이번에는 navigation section의 자식 <li> 요소에 밑줄을 쳐보려고 합니다. 일단 <li> 요소를 선택해 스타일링해 보겠습니다.
li {
text-decoration: underline;
}
[코드] li 요소에 밑줄을 칩니다.
변경한 내용은 codepen에서 확인할 수 있습니다.
그랬더니 모든 <li> 요소에 스타일링이 적용되었습니다. 이번에도 id를 사용해 해결하려고 해 보겠습니다. 다음 예제는 navigation section의 모든 <li> 요소에 id를 추가하고 CSS를 적용했습니다. 그러나 앞서 말했듯 id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 합니다. 따라서 이 예제는 id를 잘못 사용한 예제입니다.
<!-- 잘못된 예제 -->
<ul>
<li id="menu-item">Home</li>
<li id="menu-item">Mac</li>
<li id="menu-item">iPhone</li>
<li id="menu-item">iPad</li>
</ul>
[코드] 잘못된 id의 사용
동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용해야 합니다. navigation section의 모든 <li> 요소에 동일한 class를 추가하면, 동일한 스타일을 여러 요소에 적용할 수 있습니다. class는 #이 아닌 .을 이용해 선택합니다.
<!-- 바른 예제 -->
<ul>
<li class="menu-item">Home</li>
<li class="menu-item">Mac</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">iPad</li>
</ul>
[코드] 여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용합니다.
.menu-item {
text-decoration: underline;
}
[코드] class menu-item을 선택하여 밑줄을 적용합니다.
변경한 내용은 codepen에서 확인할 수 있습니다.
여러 개의 class를 하나의 엘리먼트에 적용하기
바로 위 예제에서, 하나의 class를 여러 요소에 적용했습니다. 이번에는 반대로, 여러 class를 하나의 요소에 적용해 보겠습니다. 여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 적용하려는 class들의 이름을 구분합니다. 다음 예제를 통해 <li> 요소에 2개의 class가 적용된 내용을 확인할 수 있습니다.
- 요소를 만들거나, 요소에 스타일링을 적용할 때는 항상 이름과 목적이 일치하는지 잘 살펴보세요.
<li class="menu-item selected">Home</li>
[코드] 하나의 요소에 여러 class를 적용하는 방법
.selected {
font-weight: bold;
color: #009999;
}
[코드] 특정 클래스(selected)를 통해 요소를 스타일링하는 모습
마무리
- id와 class의 차이점을 반드시 기억하세요.
Chapter1-3. 텍스트 꾸미기
- 개념학습: CSS 기초에 대해 학습한 내용을 적용하여 다양한 텍스트 효과를 적용합니다.
- 퀴즈: 학습한 내용의 이해도를 점검합니다.
개념학습
색상
글자의 색상을 변경하는 속성은 color입니다. 속성에 삽입할 수 있는 값은, HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있습니다.
.red {
color: #ff0000;
}
[코드] red class의 color 속성에 #ff0000 값을 할당합니다.
배경 색상이나, 이후에 나올 박스 테두리 색상을 적용할 수도 있습니다.
.box {
color: #155724; /* 글자 색상 */
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */
border-style: solid; /* 테두리 스타일 적용 */
}
[코드] 글자, 배경, 테두리의 색상은 각기 다른 속성을 가지고 있습니다.
글꼴
글꼴의 속성은 font-family입니다.
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
[코드] font-family 속성을 통해 글꼴(폰트)을 설정할 수 있습니다.
글꼴의 이름은 따옴표를 붙여서 적용할 수 있습니다. 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있습니다. 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있습니다. fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책입니다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있습니다. 입력된 순서대로 fallback이 적용됩니다.
보다 다양한 글꼴을 사용하고 싶어요!
fallback으로 짐작할 수 있듯이, 내가 보여주고 싶은 글꼴을 항상 적용할 수 있는 것은 아닙니다. 기본적으로, 컴퓨터를 비롯한 사용자의 전자기기에 설치되어 있지 않은 글꼴은 적용되지 않습니다. 이 부분은 개발자의 의도를 사용자에게 충분히 전달할 수 없는 문제가 있습니다. 이 문제는 웹 폰트 기술을 통해 해결할 수 있습니다. 개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드하게 하는 기술입니다. 관련한 내용은 하이퍼링크를 통해 확인하실 수 있습니다.
Google Fonts 서비스는 다양한 웹 폰트를 쉽게 사용할 수 있게 도와줍니다. HTML의 link 태그를 사용하여 간단하게 embed 할 수 있습니다. 한글 글꼴도 많이 있고, embed를 위한 코드도 제공돼, 쉽게 사용할 수 있습니다.
[그림] Google Fonts 서비스
크기
글자의 크기를 변경하기 위해서는 font-size 속성을 사용합니다.
.title {
font-size: 24px;
}
[코드] title class에 글자 크기를 24px로 적용합니다.
기타 스타일링
추가적으로 텍스트를 꾸밀 때 자주 사용하는, 알아두면 유용한 속성입니다. 사용하는 방법은 W3Schools나, MDN을 통해 쉽게 확인할 수 있습니다. 직접 검색해서 내용을 확인해 보세요!
- 굵기: font-weight
- 밑줄, 가로줄: text-decoration
- 자간: letter-spacing
- 행간: line-height
정렬
가로로 정렬할 경우 text-align을 사용합니다. 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있습니다.
세로로 정렬할 경우에는 문제가 조금 복잡합니다. vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 합니다. 세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있는데, 박스를 먼저 학습한 다음에 이해하는 게 좋습니다. 이후 학습할 박스 모델 및 레이아웃에서 이 문제를 조금 더 자세히 다룹니다.
어떤 태그를 사용해야 하나요?
텍스트를 담는 여러 가지 태그가 존재합니다. 우리가 이미 알고 있는 <div> <span> 태그를 비롯해 앞서 CSS 따라 하기 챕터를 통해 시멘틱 태그에 대해 학습했습니다. 어떤 태그를 사용해도 상관이 없고, 고유의 스타일을 가지고 있는 태그를 이해할 수 있으면 됩니다. 예를 들어 <li> 태그의 경우에는 항상 bullet이 등장하고, 왼쪽에 여백이 있습니다.
<center> <font>를 사용하지 말아야 하는 이유
HTML의 초기에는, 스타일을 별개로 정의한다는 콘셉트가 없었습니다. 그래서 <center>가운데 정렬</center> 혹은 <font color="#ff0000">빨간 글자</font>와 같이 사용했습니다. 그러나 지금은 관심사 분리라는 패러다임을 적용하여, 더 이상 이 태그(<center></center>, <font></font>)를 사용하지 않습니다. HTML 파일로는 구조를 설계하는 일에만 신경 쓰고, CSS 파일로는 스타일링만 담당하게 작성해 주세요.
퀴즈
Chapter1-4. 절대 단위와 상대 단위
- 개념학습: CSS에 사용되는 절대 단위와 상대 단위에 대하여 학습합니다.
- 퀴즈: 학습한 내용의 이해도를 점검합니다.
개념학습
알아야 할 몇 가지 단위
글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 무엇보다 중요합니다. 크기의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다.
- 절대 단위: px, pt
- 상대 단위: %, em, rem, ch, vw, vh 등
MDN, W3Schools 등에서 단위에 대한 더 많은 정보를 확인할 수 있습니다. 여기에서는 절대 단위와 상대 단위를 비교합니다. 그리고 언제, 어떤 단위를 써야 하는지 안내합니다.
글꼴 사이즈를 정할 때
- 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px(픽셀)을 사용합니다. 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리합니다. 글꼴의 크기를 픽셀로 설정하면, 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정됩니다. 개발자가 제목(heading)을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정했으나 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있습니다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
- 일반적인 경우 상대 단위인 rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)
화면 사이즈를 정할 때
- 반응형 웹(responsive web)에서 기준점을 만들 때 반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 예를 들어, 데스크톱에서 볼 때, 스마트폰에서 세로 모드로 볼 때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다를 수 있겠죠. 이때에는 디바이스 크기별로 CSS를 달리 적용해야 합니다. 이때, 디바이스 크기를 나누는 기준을 보통 px로 정합니다. 예를 들어 iPhone 12 Pro Max의 너비는 414px입니다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋습니다. 크롬 브라우저에서는 자주 사용하는 디바이스의 너비(width)와 높이(height) 별로 실제로 어떻게 보이는지 테스트해 볼 수 있습니다.
[그림] 크롬 브라우저에서 디바이스의 너비를 변경하면서, 변동 사항을 확인할 수 있습니다.
- 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 이때에는 vw, vh를 사용하세요. 웹사이트의 보이는 영역을 Viewport라고 합니다. vw, vh는 각각 viewport width와 viewport height를 뜻하며, 1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh를 사용해 구현한 것입니다. (참고로 <body> 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때 비율입니다.)
퀴즈
Chater2. 박스모델
하나의 웹 페이지 내에 있는 모든 콘텐츠는 고유의 영역을 가지고 있습니다. 그 영역은 항상 직사각형으로 이루어져 있기 때문에, 박스(box)라고 부릅니다. 박스는 높이와 넓이, 테두리와 여백 등 다양한 속성을 가지고 있습니다. 이번 챕터에서는 웹 페이지를 구성하는 박스모델에 대하여 학습하고 실습합니다.
Chapter2-1. 박스모델 기초
- 개념학습: 박스모델에 대한 기본 개념을 학습합니다.
- 퀴즈: 학습한 내용에 대한 이해도를 점검합니다.
개념학습
모든 콘텐츠는 고유한 영역이 있습니다.
[그림] HTML 문서의 레이아웃
모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됩니다.
박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가집니다. CSS를 이용해 속성과 값으로 그 크기를 설정합니다. 다음 예제에 width, height 속성을 넣어 테스트해 보세요.
- 박스가 차지하는 영역을 시각적으로 확인하기 위해 배경색을 꼭 넣으세요!
<h1>Basic document flow</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p>
[코드] HTML 예시
h1 {
background: gray;
width: 60%;
}
p {
background: rgba(255,84,104,0.3);
width: 80%;
height: 200px;
}
span {
background: yellow;
width: 100px;
height: 100px;
}
[코드] CSS 예시
변경 사항은 codepen에서 확인할 수 있습니다.
질문
- 위 HTML에서 줄 바꿈이 적용되는 요소는 무엇인가요? 줄 바꿈이 적용되지 않은 요소는 무엇인가요?
- 위 CSS 코드에서 실제로 작동하지 않는 것이 존재합니다. 무엇일까요?
줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있습니다. 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부릅니다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있습니다.
위 예제에서, 줄 바꿈이 되는 요소와 그렇지 않은 요소는 무엇이었나요?
정답
- 위 HTML에서 줄 바꿈이 되는 요소는 무엇인가요? 줄 바꿈이 적용되지 않은 요소는 무엇인가요?
- 줄 바꿈이 되는 요소: <h1>, <p>
- 줄 바꿈이 되지 않는 요소: <span>
정답을 통해, <h1>, <p> 등의 요소는 block 박스이며, <span> 요소는 inline 박스임을 알 수 있습니다. 작성한 요소가 어떤 박스인지 어떻게 확인할 수 있을까요? 크롬 브라우저에서 단축키 F12, Ctrl + Shift + i, 또는 Cmd + Opt + i(MacOS)를 입력해 개발자 도구를 열고, 개발자 도구의 Elements 탭에서 이 내용을 확인할 수 있습니다. block 요소의 목록은 MDN block 엘리먼트 목록을 통해, inline 요소의 목록은 inline 엘리먼트 목록을 통해 확인할 수 있습니다.
다음은 block level 요소입니다.
[그림] 크롬 개발자 도구의 Elements 탭에서 확인한 블록 요소
다음은 inline level 요소입니다.
[그림] 크롬 개발자 도구의 Elements 탭에서 확인한 인라인 요소
- 각 요소가 어떤 요소인지 무작정 외우는 것보다는, 개발하면서 자연스럽게 익히길 권장합니다.
- block 요소의 대표적인 예는 <div>, <p> 입니다.
- inline 요소의 대표적인 예는 <span>입니다.
두 번째 질문에 대한 정답을 알아봅시다. 어떤 요소에는 CSS의 width, height 등 박스의 크기를 설정하는 속성이 작동하지 않는 경우가 있습니다.
정답
- 위 CSS 선언 중 실제로 작동하지 않는 것이 존재합니다. 그게 무엇인가요?
- span
위 예제에서 <span> 요소의 경우는 width, height 속성이 적용되지 않습니다. block 박스와는 다르게 inline 박스는 width, height 속성이 적용되지 않습니다. 이번엔 위 CSS에서 span에 대한 속성을 다음과 같이 바꿔보겠습니다.
span {
background: yellow;
display: inline-block;
width: 100px;
height: 100px;
}
[코드] CSS에서 span 요소에 'display: inline-block'을 추가합니다.
변경 사항은 codepen에서 확인할 수 있습니다.
inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가집니다. 이 세 가지 박스의 특징을 정리해 보겠습니다.
[그림] span 요소에 display 속성을 추가하고, 값으로 inline-block을 지정합니다.
[표] block, inline-block, inline의 특징
퀴즈
Chapter2-2. 박스를 구성하는 요소
- 개념학습: 박스를 구성하는 요소에 대해 학습합니다.
- 퀴즈: 박스를 구성하는 요소에 대한 이해도를 점검합니다.
개념학습
박스를 구성하는 요소
CSS 박스 모델은 다음 그림만 기억하면 됩니다.
[그림] border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있습니다.
border (테두리)
테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용합니다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭니다. 다음의 코드를 통해 테두리를 실선으로 확인할 수 있습니다.
p {
border: 1px solid red;
}
[코드] p 요소에 1px의 빨간색 실선을 추가합니다.
border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)입니다. 괄호 안에 적힌 것들이 바로 border 속성에 추가할 수 있는 세부 속성입니다. 이외에도 border-style mdn과 같은 키워드를 구글에 검색하면, 테두리 스타일에 대한 다양한 세부 속성을 찾아볼 수 있습니다.
질문
- 테두리를 점선으로 만들고 싶으면 어떻게 해야 할까요? border-style의 값 중 하나를 바꿔보세요.
- 테두리를 둥근 모서리로 만들 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, border 속성만으로는 둥근 모서리를 만들 수 없습니다.
- 박스 바깥쪽에 그림자를 넣을 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, 그림자를 명확하게 보기 위해서는 background 속성이 불투명해야 합니다.
margin (바깥 여백)
각각의 값은 top, right, bottom, left로 시계방향입니다.
p {
margin: 10px 20px 30px 40px;
}
[코드] p 요소의 상하좌우에 여백을 추가합니다.
크롬 개발자 도구의 Elements 탭에서 위의 코드가 어떻게 적용되는지 확인할 수 있습니다. margin은 주황색으로 표현됩니다.
[그림] 크롬의 개발자 도구를 이용해 margin 영역을 확인할 수 있습니다.
값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px입니다.
p {
margin: 10px 20px;
}
[코드] p 요소의 위아래와 좌우에 각각 여백을 추가합니다.
값을 하나만 넣으면 모든 방향의 바깥 여백에 적용됩니다.
p {
margin: 10px;
}
[코드] p 요소의 모든 방향에 여백을 추가합니다.
물론 다음과 같이 방향을 특정한 속성도 존재합니다.
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
[코드] margin의 위치를 특정해 여백을 추가할 수 있습니다.
- 위와 같은 규칙은 padding에도 동일하게 적용됩니다.
재미있게도 바깥 여백에는 음수 값을 지정할 수 있습니다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듭니다. 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있습니다.
p {
margin-top: -2rem;
}
[코드] p 요소의 margin-top 속성에 음수 값을 지정합니다.
변경 사항은 codepen에서 확인할 수 있습니다.
padding (안쪽 여백)
padding은 border를 기준으로 박스 내부의 여백을 지정합니다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left입니다.
p {
padding: 10px 20px 30px 40px;
}
[코드] p 요소의 padding 속성에 여백을 추가합니다.
배경색이나 border를 적용하면, 안쪽 여백을 더욱 선명하게 확인할 수 있습니다.
p {
padding: 10px 20px 30px 40px;
border: 1px solid red;
background-color: lightyellow;
}
[코드] p 요소에 border, background-color 속성을 추가합니다.
크롬 개발자 도구의 Elements 탭에서 다음 그림과 같은 모양을 확인할 수 있습니다. padding은 초록색으로 표현됩니다.
[그림] 크롬의 개발자 도구를 이용해 padding 영역을 확인할 수 있습니다.
박스를 벗어나는 콘텐츠 처리
박스의 height 속성에 콘텐츠가 차지하는 공간보다 작은 값을 지정하세요. 콘텐츠가 박스 바깥으로 빠져나오나요? 아니면 박스에 맞게 가려지나요?
p {
height: 40px;
}
[코드] p 요소의 height 속성에 콘텐츠가 차지하는 높이보다 작은 값을 할당합니다.
박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옵니다. 그러나 이런 상황을 원하는 사람은 거의 없을 겁니다. 이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만듭니다.
p {
height: 40px;
overflow: auto;
}
[코드] p 태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시합니다.
변경 사항은 codepen에서 확인할 수 있습니다.
overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다. 다른 경우에는 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 수 있습니다. 이때에는 overflow 속성에 hidden 값을 사용합니다. overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤하거나 세로 방향으로 스크롤할 수 있게끔 지정할 수 있습니다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있습니다.
박스 크기 측정 기준
박스 크기를 측정하는 기준은 매우 중요합니다. 예제를 보며 함께 살펴봅니다.
<div id="container"><div id="inner">
안쪽 box
</div></div>
[코드] html 예시
#container {
width: 300px;
padding: 10px;
background-color: yellow;
border: 2px solid red;
}
#inner {
width: 100%;
height: 200px;
border: 2px solid green;
background-color: lightgreen;
padding: 30px;
}
[코드] CSS 예시
변경 사항은 codepen에서 확인할 수 있습니다.
혹시 어떤 부분이 문제인지 알겠나요? id가 container 인 박스의 width 속성에 300px을 지정했습니다. 그러나 개발자 도구로 확인한 해당 요소의 width 값은 324px입니다. CSS에서 지정한 두 요소에 대해 아래와 같이 확인할 수 있습니다.
- #container의 너비는 300px이 아니라, 324px입니다. 브라우저는 다음과 같은 계산을 실행합니다.
- 300px (콘텐츠 영역) + 10px (padding-left) + 10px (padding-right) + 2px (border-left) + 2px (border-right)
- #inner의 100%는 300px이 아니라, 364px입니다. 브라우저는 다음과 같은 계산을 실행합니다.
- 300px (300px의 100%) + 30px (padding-left) + 30px (padding-right) + 2px (border-left) + 2px (border-right)
처음 레이아웃 디자인을 할 때 가장 많이 하는 실수가 있습니다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다.
레이아웃 디자인을 조금 더 쉽게 하는 방법이 있습니다. 여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것입니다. 한 번 적용해 보겠습니다. *은 모든 요소를 선택하는 선택자입니다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.
* {
box-sizing: border-box;
}
[코드] 모든 요소에 'box-sizing: border-box'를 추가합니다.
변경 사항은 codepen에서 확인할 수 있습니다.
이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다. 일반적으로 box-sizing은 HTML 문서 전체에 적용합니다. box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있습니다. 앞으로 레이아웃과 관련된 이야기를 할 때는 border-box 계산법을 기준으로 이야기합니다. 박스 크기 측정 기준 두 가지를 항상 기억해 주세요.
- content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.
퀴즈
Chapter3. CSS Selector
이전 유닛에서 id와 class를 사용하여 HTML 태그에 CSS 속성을 적용할 수 있다는 것을 학습하였습니다. 이처럼 CSS 속성을 적용할 대상을 선택하는 방법을 CSS selector라고 합니다. 지금까지는 id와 class를 사용해 적용하는 방법을 주로 사용했지만, 이번 챕터에서는 보다 다양한 CSS selector를 학습합니다. 학습 후에는 CSS selector의 실제 사용 예시를 익히는 퀴즈를 풀어보겠습니다.
Chapter3-1. 다양한 CSS selector
- 개념학습: 다양한 CSS Selector에 대하여 학습합니다.
개념학습
앞서 학습한 선택자는 class 선택자(.)와 id 선택자(#)였습니다. 실제 환경에서는 선택자를 더욱 다양한 방법으로 사용할 수 있습니다.
기본 선택자
전체 선택자
전체 선택자는 문서의 모든 요소를 선택합니다.
* { }
태그 선택자
태그 선택자는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다.
h1 { }
div { }
section, h1 { }
ID 선택자
ID 선택자는 #id로 입력하여 선택합니다.
#only { }
class 선택자
class 선택자는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택합니다.
.widget { }
.center { }
attribute 선택자
attribute 선택자는 같은 속성을 가진 요소를 선택합니다. (모두 암기하실 필요는 없습니다.)
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
자식 / 후손 / 형제 선택자
자식 선택자
자식 선택자는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다. 아래 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <div> 요소는 선택되지만, <p> 요소의 자식인 <div> 요소는 선택되지 않습니다. (마찬가지로 후손 선택자와의 차이를 반드시 알고 있어야 합니다.)
header > div { }
예시)
<header>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
</header>
후손 선택자
후손 선택자는 첫 번째로 입력한 요소의 후손을 선택합니다. 아래 예시의 경우 <header> 요소의 자식인 <div> 요소뿐 아니라, <p> 요소의 자식인 <div> 요소까지 모두 선택됩니다. (자식 선택자와의 차이점을 반드시 알고 있어야 합니다.)
header div {}
예시)
<header>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
</header>
형제 선택자
형제 선택자는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다. 아래 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택합니다.
section ~ p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</header>
인접 형제 선택자
인접 형제 선택자는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택합니다. 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택합니다.
section + p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p>
<p></p>
</header>
기타 선택자
가상 클래스 선택자
가상 클래스는 요소의 상태 정보에 기반해 요소를 선택합니다.
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
UI 요소 상태 선택자
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
구조 가상 클래스 선택자
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
부정 선택자
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
정합성 확인 선택자
input[type="text"]:valid { }
input[type="text"]:invalid { }
