알아야 할 내용
목록
- Introduction to Baisic CSS
- Change the Color of Text
- Use CSS Selectors to Style Elements
- Use a CSS Class to Style an Element
- Style Multiple Elements with a CSS Class
- Change the Font Size of an Element
- Set the Font Family of an Element
- Import a Google Font
- Specify How Fonts Should Degrade
- Size Your Images
- Add Borders Around Your Elements
- Add Rounded Corners with border-radius
- Make Circular Images with a border-radius
- Give a Background Color to a div Element
- Set the id of an Element
- Use an id Attribute to Style an Element
- Adjust the Padding of an Element
- Adjust the Margin of an Element
- Add a Negative Margin to an Element
- Add Different Padding to Each Side of an Element
- Add Different Margins to Each Side of an Element
- Use Clockwise Notation to Specify the Padding of an Element
- Use Clockwise Notation to Specify the Margin of an Element
- Use Attribute Selectors to Style Elements
- Understand Absolute versus Relative Units
- Style the HTML Body Element
- Inherit Styles from the Body Element
- Prioritize One Style Over Another
- Override Styles in Subsequent CSS
- Override Class Declarations by Styling ID Attributes
- Override Class Declarations with Inline Styles
- Override All Other Styles by using Important
- Use Hex Code for Specific Colors
- Use Hex Code to Mix Colors
- Use Abbreviated Hex Code
- Use RGB values to Color Elements
- Use RGB to Mix Colors
- Use CSS Variables to change several elements at once
- Create a custom CSS Variable
- Use a custom CSS Variable
- Attach a Fallback value to a CSS Variable
- Improve Compatibility with Browser Fallbacks
- Inherit CSS Variables
- Change a variable for a specific area
- Use a media query to change a variable
- Basic CSS를 끝마치며...
Introduction to Basic CSS
설명
아래한글이나 워드문서를 사용해 본 분들이 많을 것이다.
HTML은 워드문서로 디자인 없이 글을 적는 단계였다고 생각하면 된다.
CSS(Cascading Style Sheets, 캐스케이딩 스타일 시트)는 HTML로 만든 텍스트와 컨텐츠를 브라우저에 어떻게 표현할지에 대한 디자인 언어라고 생각하면 편할 듯 하다.
- 컬러 (color 색깔)
- 폰트 (font 글꼴)
- 포지셔닝 (positioning 위치)
- 스페이싱 (spacing 띄어쓰기)
- 사이징 (sizing 크기)
- 데코레이션 (decoration 꾸밈)
- 트랜지션 (transitions 변화)
CSS 스타일링을 적용하는데는 크게 세 가지 방법이 있다.
- 인라인 (inline) : HTML 엘레먼트(element)에 직접 적용하는 방법
- 스타일 태그 : HTML 도큐먼트(document)에 CSS 룰을 적용하는 방법
- 스타일 시트(sheet) : HTML 도큐먼트와 별도의 CSS 시트를 만들어 연결하는 방법
개발자 대부분은 HTML 엘레먼트와 별도로 관리가 가능한 스타일 시트를 만들어 관리하는 방법을 선호한다.
또 다른 장점으로는 읽기가 쉽다는 점 (readability) 그리고 재사용이 가능하다는 점 (reusability)이 있다.
HTML 엘레먼트를 타게팅하여 CSS 스타일을 적용하는 방법으로 웹페이지에 보여지는 방식에 변화를 줄 수 있다.
CSS를 배우면, 텍스트만 쓰는 게 아닌 훨씬 더 많은 것을 할 수 있을 것이다.
Basic CSS: Change the Color of Text
설명
<h2></h2> 엘레먼트에 스타일을 적용하여, 텍스트의 색깔을 바꿔보자.
텍스트 색깔을 바꾸는 스타일 프로퍼티(property 특성)는 color이다.
<h2></h2> 엘레먼트 텍스트의 색을 파란색으로 바꾸려면 이렇게 하면 된다.
<h2 style="color: blue;">CatPhotoApp</h2>
참고로, HTML 엘레먼트에 직접 적용하는 인라인 스타일 디클러레이션(declaration 선언)을 할 때, 끝에 ; 표시를 해주는 것이 정석이다.
문제
<h2></h2> 엘레먼트의 텍스트 컬러를 빨간색으로 바꿔보자.
답변
<h2 style="color: red;">CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Use CSS Selectors to Style Elements
설명
CSS 프로퍼티(property)로 엘레먼트의 스타일을 바꿀 수 있다. 게다가 방법은 수없이 많다.
위에서 배운 인라인(inline) CSS 방법으로는 <h2></h2> 엘레먼트 하나의 스타일을 바꿔 보았다.
하지만 이 방법으로는 모든 엘레먼트 하나하나에 따로따로 적용해야 한다는 단점이 있다.
그래서 이번엔 스타일 블록(block)을 사용해 보려 한다.
스타일 블록은 페이지 상단에 <style></style> 태그를 사용하면 된다.
그리고 이 안에서 <h2></h2> 엘레먼트 스타일을 적용하면, 페이지 내에 있는 모든 <h2></h2> 엘레먼트에 이 스타일이 적용된다.
예는 다음과 같다.
<style>
h2 {
color: red;
}
</style>
여기서 중요한 점은 스타일 적용 시, 오프닝(opning) 클로징(closing) 컬리 브래켓 (curly bracket: "{, }")을 꼭 사용해줘야 한다는 점이다.
그리고 스타일 룰(rule) 끝에 세미콜론(semicolon ";")을 사용해줘야 한다는 점도 잊지말자.
문제
1. <h2></h2> 스타일 애트리븃(attribute 속성)을 지워보자.
2. 대신 스타일 블록을 만들어보자.
3. 모든 <h2></h2> 엘레먼트를 파란색으로 만들어보자.
답변
<style>
h2 {
color: blue;
}
</style>
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>Basic CSS: Use a CSS Class to Style an Element
설명
클래스(class)는 HTML 엘레먼트(element)에 그룹 이름을 만드는 것과 같은 역할을 한다.
그리고 클래스로 만든 그룹 이름에 동일한 CSS 스타일(style)을 적용할 수 있다.
예는 다음과 같다.
<style>
.blue-text {
color: blue;
}
</style>
<h2 class="blue-text">CatPhotoApp</h2>
blue-text 라는 클래스에 스타일을 적용한 것이다.
클래스에 스타일을 적용할 때에는 점(.)을 앞에 붙여주면 된다.
HTML 엘레먼트에는 점(.) 없이 클래스 이름만 붙여주면 된다.
문제
1. <style></style> 태그 안에 <h2></h2> 셀렉터(selector)를 .red-text로 바꿔보자.
2. 컬러(colo)를 빨간색(red)로 바꿔보자.
3. <h2></h2> 엘레먼트에도 클래스 애트리븃(attribute)을 red-text로 붙여주자.
답변
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>Basic CSS: Style Multiple Elements with a CSS Class
설명
클래스(class)는 그룹 이름과 같이 사용할 수 있어, 여러 HTML 엘레먼트에 같은 CSS 스타일을 한 번에 적용할 수 있다.
문제
첫 <p></p> 엘레먼트에 red-text 클래스를 적용해 보자.
답변
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Change the Font Size of an Element
설명
폰트 사이트 (font size, 글꼴 크기)는 CSS 프로퍼티(property)인 font-size로 바꿀 수 있다.
이런 식으로 말이다.
h1 {
font-size: 30px;
}
문제
1. <style></style>에 현재 red-text 클래스가 들어있다.
2. <p></p> 엘레먼트에 폰트 사이즈를 16픽셀 (16px)로 설정해보자.
답변
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Set the Font Family of an Element
설명
폰트(font 글꼴) 모양도 바꿀 수 있다.
font-family 프로퍼티(property)를 사용하면 된다.
예를 들어, <h2></h2> 엘레먼트에 sans-serif 폰트를 사용하고 싶다면 다음과 같이 하면 된다.
h2 {
font-family: sans-serif;
}문제
모든 <p></p> 엘레먼트를 monospace 폰트로 만들어 보자.
답변
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Import a Google Font
설명
OS(Operating System, 운영시스템)에서 흔하게 볼 수 있는 폰트(font)를 사용할 수도 있겠지만, 웹에서 여러 종류의 폰트를 끌어와서 사용하는 것도 가능하다.
구글 폰트 라이브러리(library)를 사용하는 방법을 한 번 알아보려 한다.
구글폰트(Google Fonts)는 무료 웹폰트를 모아놓은 라이브러리로, URL 레퍼런스(reference, 참조)로 사용이 가능하다.
다만, 중국과 같이 구글이 막힌 곳에서는 사용이 불가능하다.
구글폰트에서 랍스터(Lobster) 폰트를 끌어다 사용하는 것으로 예를 들어보려 한다.
아래의 코드를 HTML 페이지 가장 상단인 <style></style> 태그 위에 넣어보자.
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
이 코드를 넣음으로써, 이제 현 HTML 페이지에서는 랍스터 폰트 사용이 가능하다.
폰트패밀리(font-family)에 관련된 몇 가지 룰을 짚고 넘어가보자.
메인 폰트와 백업 폰트
폰트를 2개 적용하면, 처음 쓴 것이 우선 적용된다. 처음 쓴 폰트가 사용 불가하면, 두 번째 쓴 것이 적용된다.
구성은 "font-family: font-family name, generic name"과 같은 식이다.
font-family: Lobster, monospace;
이 코드를 보면, 랍스터 폰트가 우선 적용될 것이라는 점을 알 수 있다. 하지만 중국에서 접속하여 구글폰트 적용이 불가할 경우 (랍스터 폰트를 끌어오는 것이 불가할 경우), 모노스페이스 폰트를 사용하게 되는 것이다.
대소문자 구별 (case-sensitive)
랍스터 폰트는 Lobster로 써야한다. 소문자로 쓰면 에러가 날 것이라는 뜻이다.
띄어쓰기 필요 시, " "로 감싸주기
폰트에는 원래 스페이스(space, 띄어쓰기) 사용이 불가하다.
하지만 Open Sans 폰트와 같이 띄어쓰기가 필요한 경우가 있다.
이 때 "Open Sans"와 같이 " "로 감싸주면 된다.
문제
1. 구글폰트에서 랍스터 폰트를 끌어올 수 있는 레퍼런스 코드를 HTML 페이지 가장 상단에 심어보자.
2. <h2></h2> 엘레먼트에 랍스터 폰트를 적용해 보자.
답변
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: monospace;
}
h2 {
font-family: Lobster;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Specify How Fonts Should Degrade
설명
모든 브라우저에서 사용 가능한 폰트가 몇 개 있다.
예를 들면 모노스페이스(monospace), 세리프(serif), 샌스세리프(sans-serif) 등이 있다.
메인 폰트가 사용 불가할 경우, 백업 폰트로 디그레이드(degrade) 할 수 있다.
예를 들면, 메인 폰트로 헬베티카(Helvetica)를 사용하고 싶지만, 사용 불가시 샌스세리프를 사용하고 싶다면 다음과 같은 스타일링을 사용하면 된다.
구성은 "font-family: font-family name, generic name"과 같은 식이다.
p {
font-family: Helvetica, sans-serif;
}
백업 폰트로 사용하는 제네릭 네임 (generic name)은 케이스 센시티브 (case-sensitive, 대소문자 구별) 하지 않다.
CSS 키워드도 아니기 때문에, 따옴표(quote " ")도 필요하지 않다.
문제
1. <h2></h2> 엘레먼트에 monospace 폰트를 적용하자. 그러면 이제 Lobster와 monospace 모두 적용되어 있는 셈이다.
2. 링크로 구글폰트를 끌어와 사용하고 있는 중이다. Lobster는 구글폰트 링크로 사용하고 있는 셈이다. 이 링크를 코멘트로 만들어 보자. 이전에 이미 배운 내용이다.
3. 이제 <h2></h2> 엘레먼트의 폰트가 디그레이드 되어 monospace 폰트로 적용된 것을 알 수 있을 것이다. 다만, 컴퓨터 자체적으로 랍스터 폰트가 사용 가능하다면, monospace 폰트가 적용되지 않을 것이다.
답변
<!-- <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> -->
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Size Your Images
설명
CSS에는 위드쓰(width, 가로길이)라고 하는 프로퍼티(property, 특성)이 있다.
문자 그대로 가로길이를 조절한다.
이 프로퍼티는 px(pixel, 픽셀)로 크기를 조절할 수 있다.
예를 들어, larger-image라는 클래스(class)를 만들었다고 치자. 여기에 width 500px 프로퍼티를 부여할 수 있다.
이 프로퍼티를 적용할 HTML 엘레먼트에도 클래스로 묶어줘야 한다.
<style>
.larger-image {
width: 500px;
}
</style>문제
1. smaller-image라는 클래스를 만들자.
2. 이미지가 width가 100픽셀이 되도록 만들어 보자.
답변
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back." class="smaller-image"></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Add Borders Around Your Elements
설명
CSS 보더(border)를 더해보자.
보더에도 여러 프로퍼티(property, 특성)이 있는데, 스타일(style), 컬러(color), 위드쓰(width, 두께) 등이다.
예를 들자면, 아래 예와 같이 <style></style> 태그 안에 클래스(class)로 지정한 CSS 보더 특성을 더할 수 있다.
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>문제
1. <style></style> 태그 안에 thick-green-border 라는 클래스를 만들자.
2. 이 클래스에 보더의 특성을 더해보자: 5px의 위드쓰, 솔리드(solid) 스타일, 그리고 그린(green) 색상.
3. 고양이 사진 <img> 태그 클래스에 thick-green-border 클래스를 추가해보자.
4. 1개 HTML 태그에 2개 이상의 클래스를 더할 때는, 스페이스(space, 띄어 쓰기)로 나누면 된다.
답변
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.smaller-image {
width: 100px;
}
.thick-green-border {
border-width: 10px;
border-style: solid;
border-color: green;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Add Rounded Corners with border-radius
설명
현재 고양이 사진을 담고 있는 사각형의 꼭지점은 뾰족한 상태 (sharp corners)다.
이 부분을 보더 래디어스 (border-radius) 라는 CSS 프로퍼티(property, 특성)으로 둥그렇게 만들 수 있다.
문제
1. 고양이 사진에 10px의 보더 래디어스를 설정해보자.
2. thick-green-border 클래스 혹은 small-green-border 클래스 중 아무거나 하나만 사용하면 된다.
답변
thick-green-border를 사용하였다.
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 10px;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Make Circular Images with a border-radius
설명
보더 래디어스 (border-radius)를 둥그렇게 하는데는 픽셀(pixel, px) 뿐만 아니라, 퍼센트(percentage, %)도 사용할 수 있다.
문제
고양이 사진의 보더 래디어스를 50%로 설정해보자.
답변
thick-green-border 클래스의 특성을 변경하였다.
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Give a Background Color to a div Element
설명
엘레먼트(element)의 백그라운드 컬러 (background color, 바탕색) 또한 백그라운드 컬러 프로퍼티(property, 특성)으로 바꿀 수 있다.
예는 다음과 같다.
.green-background {
background-color: green;
}문제
1. silver-background 라는 클래스(class)를 만들어보자.
2. 백그라운드 컬러는 은색(silver)로 하자.
3. silver-background 클래스를 디브(div) 엘레먼트에 적용해보자.
답변
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Set the id of an Element
설명
지금까지는 HTML 엘레먼트에 클래스(class)로 그룹 이름을 부여하는 방식만을 사용했다.
클래스를 사용하여, 여러 엘레먼트에 같은 스타일을 적용하는 방법을 사용했다.
이번엔 아이디(id) 애트리븃(attribute, 속성)에 대해 배워보려 한다.
여러 엘레먼트를 하나의 이름으로 묶어주는 클래스와는 반대로, 아이디는 하나의 엘레먼트에 부여하는 이름이라고 생각하면 된다.
나중에 배우겠지만, 자바스크립트를 사용할 때 아주 유용하다.
하나의 엘레먼트에 부여하는 것이 아이디이다 보니, 아이디마다 유니크(unique, 독특)해야 한다.
아이디를 사용하는 방식은 클래스 사용 방식과 유사하다.
다만, 클래스에 프로퍼티(property, 특성)을 부여할 때 클래스 앞에 점( . )을 사용했다.
아이디 앞에는 파운드 혹은 해시 표시 (#)를 붙여준다.
<style>
#unique-id {
background-color: green;
}
</style>
<h2 id="unique-id">Unique ID</h2>문제
1. <form></form> 엘레먼트에 cat-photo-form 이라는 아이디를 달아주자.
2. HTML 폼 엘레먼트에만 적용해주면 된다.
답변
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Use an id Attribute to Style an Element
설명
아이디(id)도 클래스(class)처럼 CSS로 스타일(style)을 줄 수 있다.
하지만 클래스처럼 여러 엘레먼트에 사용하지 못 한다. 아이디는 한 엘레먼트에 한 번만 사용할 수 있다.
아이디는 클래스보다 스페시피시티(specificity, 특수성 / 중요성)이 더 높다.
예를 들어, 한 엘레먼트에 클래스로 빨간색 스타일링을 줬다고 생각해보자.
만약 이 엘레먼트에 아이디로 파란색 스타일링을 준다면 아이디 스페시피시티가 더 높아, 아이디의 스타일링이 우선 적용되는 것이다.
아이디를 사용하는 방식은 클래스 사용 방식과 유사하다.
다만, 클래스에 프로퍼티(property, 특성)을 부여할 때 클래스 앞에 점( . )을 사용했다.
아이디 앞에는 파운드 혹은 해시 표시 (#)를 붙여준다.
문제
1. <form></form> 엘레먼트에 cat-photo-form 이라는 이름의 아이디가 이미 부여된 상태이다.
2. <style></style> 태그 안에 cat-photo-form 아이디에 초록색 바탕 (green background)의 스타일링을 해주자.
답변
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
#cat-photo-form {
background-color: green;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Adjust the Padding of an Element
설명
지금까지 배운 것들에서 이미 느꼈는지는 모르겠지만, 모든 HTML 엘레먼트는 결국 사각형이라는 틀 안에 있다.
이 사각형 내부, 틀, 외부의 공간을 조정하는 프로퍼티(property, 특성)을 각각 패딩(padding), 보더(border), 마진(margin)이라 한다.
예를 들어, <h2></h2> 엘레먼트 안에 제목을 썼다고 해보자.
이 제목은 컨텐츠이다.
이 컨텐츠는 눈에 보이지 않는 사각형 틀 안에 있는 셈이다.
여기서 눈에 보이지 않는 사각형 틀이 보더(border)이다.
보더와 컨텐츠 사이의 공간, 즉 사각형 내부 공간을 패딩이라 한다.
사각형 바깥의 공간, 즉 사각형 외부 공간을 마진이라 한다.
문제
1. 블루 박스의 크기가 레드 박스 크기와 같아지도록 해야 한다.
2. 블루 박스의 패딩을 조절해보자.
답변
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Basic CSS: Adjust the Margin of an Element
설명
아래 그림을 보자.
레드 박스가 블루 박스보다 가로 길이가 더 짧은 것을 알 수 있다.
이건 사각형 내부 공간인 패딩이 아니라, 사각형 외부 공간인 마진으로 만든 결과다.
한 마디로 레드 박스 마진이 블루 박스의 마진보다 큰 것이다.
문제
1. 블루박스가 레드박스와 크기가 같아지게 해보자.
2. 다만, 블루박스의 마진 크기를 조절해야 한다.
답변
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: 20px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Basic CSS: Add a Negative Margin to an Element
설명
지금까지 설명한 바와 같이, 마진(margin)은 사각형 외부의 공간이다.
문제
1. 마진의 값을 마이너스 값으로 만들어보자.
2. 블루박스의 마진 값을 -15px로 만들어보자.
답변
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: -15px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: -15px;
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Basic CSS: Add Different Padding to Each Side of an Element
설명
상황에 따라 패딩(padding, 사각형 내부 공간) 전체가 아니라 사각형 각 변에 대한 공간을 다르게 조정하길 원할 수도 있을 것이다.
CSS에서는 패딩 탑 (padding-top), 패딩 라이트 (padding-right), 패딩 바텀 (padding-bottom), 패딩 레프트 (padding-left)로 따로 조정이 가능하다.
문제
1. 블루박스의 패딩을 조정해보자.
2. 블루박스 패딩 탑과 패딩 레프트를 40px로 조정해보자.
3. 블루박스 패딩 바텀과 패딩 라이트는 20px로 조정해보자.
답변
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
.blue-box {
background-color: blue;
color: #fff;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Basic CSS: Add Different Margins to Each Side of an Element
설명
상황에 따라 마진(margin, 사각형 외부 공간) 전체가 아니라 사각형 각 변에 대한 공간을 다르게 조정하길 원할 수도 있을 것이다.
CSS에서는 마진 탑 (margin-top), 마진 라이트 (margin-right), 마진 바텀 (margin-bottom), 마진 레프트 (margin-left)로 따로 조정이 가능하다.
문제
1. 블루박스의 마진을 조정해보자.
2. 블루박스 마진 탑과 마진 레프트를 40px로 조정해보자.
3. 블루박스 마진 바텀과 마진 라이트는 20px로 조정해보자.
답변
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
.blue-box {
background-color: blue;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Basic CSS: Use Clockwise Notation to Specify the Padding of an Element
설명
지금까지는 패딩 탑 (padding-top), 패딩 라이트 (padding-right), 패딩 바텀 (padding-bottom), 패딩 레프트 (padding-left)를 하나하나 설정했다.
이 모든 것을 라인 하나에 처리할 수 있다.
아래의 예와 같이 하면 된다.
padding: 10px 20px 10px 20px;
순서는 탑, 라이트, 바텀, 레프트 순이다. 시계 방향으로 12시부터 시작한다고 생각하면 된다.
그래서 이를 클락와이즈 노테이션 (clockwise notation, 시계방향 표기법)이라 한다.
문제
1. 블루박스의 패딩을 조정해보자. 단, 한 라인에 모두 처리해야 한다.
2. 블루박스 패딩 탑과 패딩 레프트를 40px로 조정해보자.
3. 블루박스 패딩 바텀과 패딩 라이트는 20px로 조정해보자.
답변
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px 40px 20px 40px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 40px 20px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Basic CSS: Use Clockwise Notation to Specify the Margin of an Element
설명
지금까지는 마진 탑 (margin-top), 마진 라이트 (margin-right), 마진 바텀 (margin-bottom), 마진 레프트 (margin-left)를 하나하나 설정했다.
이 모든 것을 라인 하나에 처리할 수 있다.
아래의 예와 같이 하면 된다.
margin: 10px 20px 10px 20px;
순서는 탑, 라이트, 바텀, 레프트 순이다. 시계 방향으로 12시부터 시작한다고 생각하면 된다.
그래서 이를 클락와이즈 노테이션 (clockwise notation, 시계방향 표기법)이라 한다.
문제
1. 블루박스의 마진을 조정해보자. 단, 한 라인에 모두 처리해야 한다.
2. 블루박스 마진 탑과 마진 레프트를 40px로 조정해보자.
3. 블루박스 마진 바텀과 마진 라이트는 20px로 조정해보자.
답변
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: crimson;
color: #fff;
margin: 20px 40px 20px 40px;
}
.blue-box {
background-color: blue;
color: #fff;
margin: 40px 20px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Basic CSS: Use Attribute Selectors to Style Elements
설명
지금까지는 특정 엘레먼트를 스타일링 하기 위해 아이디(id)와 클래스(class) 애트리븃(attribute, 특성)을 사용했다.
이를 아이디 셀렉터 (ID Selector) 혹은 클래스 셀렉터 (Class Selector)라 한다.
이 방법 외에도 엘레먼트를 그룹으로 묶어 같은 스타일링을 적용시키는 방법이 있다.
바로 애트리븃 셀렉터 (Attribute Selector)이다.
[애트리븃 = 발류] 과 같은 모양으로 애트리븃 셀럭터를 스타일링 할 수 있다.
아래는 애트리븃에 타입(type)을 넣었고, 발류(value, 값)에 라디오(radio, 선택 버튼)를 사용하여 애트리븃 셀럭터를 적용한 예시이다.
[type='radio'] {
margin: 20px 0px 20px 0px;
}문제
1. 타입 애트리븃 셀럭터를 사용하자.
2. 발류에는 체크박스(checkbox)를 사용하자.
3. 탑 마진 (top margin)은 10px로 설정하자.
4. 보톰 (bottom margin)은 15px로 설정하자.
답변
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
[type='checkbox'] {
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Basic CSS: Understand Absolute versus Relative Units
설명
지금까지는 마진(margin, 사각형 내부 공간)과 패딩(padding, 사각형 외부 공간)을 픽셀(pixel)이라고 불리는 유닛(unit, 단위)으로 직접 조정했다.
CSS에는 픽셀 유닛 말고도 공간이나 크기를 조정할 수 있는 방법이 있다.
유닛에는 앱솔룻(absolute, 절대값)과 렐래티브(relative, 상대값)로 크게 2가지 타입으로 나뉜다.
앱솔룻 유닛은 밀리미터(mm)나 인치(in)와 같이 실제 길이를 의미한다.
한 마디로, 앱솔룻 유닛으로 설정하면 항상 같은 길이로 설정된다는 것이다.
컴퓨터 화면으로 보든, 핸드폰 화면으로 보든, 길이가 변하지 않는다는 것이다.
렐래티브 유닛은 엠(em)이나 렘(rem) 등으로 설정할 수 있다.
em과 같은 경우, 기존 폰트 사이즈가 어떻게 설정되어 있느냐에 따라 상대적으로 조정이 가능하다.
더 자세한 내용은 추후 리스폰시브 웹 디자인 (responsive web design, 반응형 웹 디자인)에서 다룰 예정이다.
문제
1. 레드박스 클래스의 스타일을 조정해보자.
2. 패딩 프로퍼티(property, 특성)를 1.5em으로 설정해보자.
답변
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
padding: 1.5em;
}
.green-box {
background-color: green;
margin: 20px 40px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
Basic CSS: Style the HTML Body Element
설명
모든 HTML 페이지에는 바디(body) 엘레먼트가 있다.
문제
현재 페이지는 텅 비어있는 상태이다.
하지만 바디 엘레먼트가 존재한다는 사실을 증명해보려 한다.
1. <style></style> 태그 안에 백그라운드 칼라 (background-color)를 블랙으로 설정해보자.
답변
<style>
body {
background-color: black;
}
</style>
Basic CSS: Inherit Styles from the Body Element
설명
HTML 페이지에는 바디(body) 엘레먼트가 있다는 점을 CSS 스타일링으로 증명해보았다.
지금까지 공부했던 여러 엘러먼트와 마찬가지로 바디 엘레먼트 또한 CSS 스타일링이 가능하다는 점을 기억하자.
그리고 바디 엘레먼트 안에 들어가는 여러 다른 엘레먼트는 바디 엘레먼트의 스타일을 인헤릿(inherit, 상속 - 물려받음) 받는다.
아래 문제에서는 바디 엘레먼트를 상급 엘레먼트라고 친다면, 헤딩(heading) 엘레먼트는 바디보다 하급 엘레먼트이다.
그래서 상급 엘레먼트에 설정한 스타일을 하급 엘레먼트도 물려받는다는 식으로 이해하면 될 듯 하다.
문제
1. <h1></h1> 엘레먼트를 만들고, Hello World 라는 텍스트를 써넣자.
2. 바디 엘레먼트에 칼라(color) 스타일을 그린으로 설정해보자.
3. 바디 엘레먼트에 폰트 패밀리 (font-family)를 모노스페이스(monospace)로 설정해보자.
답변
<style>
body {
background-color: black;
color: green;
font-family: monospace;
}
</style>
<h1>Hello World</h1>Basic CSS: Prioritize One Style Over Another
설명
HTML 엘레먼트가 많아지고, 상급 엘레먼트의 스타일과 복잡하게 얽히게 될 수도 있다.
이러한 문제가 생기지 않도록 하기 위해 CSS 스타일에는 우선순위가 있다.
이러한 우선순위를 실험해보도록 하자.
문제
1. <style></style> 태그 안에 pink-text 라는 CSS 클래스(class)를 만들어보자.
2. pink-text 클래스에 칼라 핑크 스타일을 적용해보자.
3. <h1></h1> 엘레먼트에 pink-text 클래스를 적용하자.
답변
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
Basic CSS: Override Styles in Subsequent CSS
설명
위에서 실험해본 결과에 따르면, 핑크 텍스트 클래스가 기존에 있던 바디 엘레먼트의 CSS 스타일링을 무시하고 덮어씌워버렸다.
우리가 증명한 바에 따르면, 클래스는 바디 엘레먼트의 CSS 스타일을 덮어씌울 수 있다.
그렇다면, 핑크 텍스트 클래스의 CSS 스타일을 덮어씌울 수 있는 방법에는 무엇이 있을까?
문제
1. 핑크 텍스트 클래스 아래에 블루 텍스트 (blue-text) 클래스를 만들어보자. 꼭 핑크 텍스트 아래에 블루 텍스트 클래스를 만들어야 한다.
2. 블루 텍스트 클래스에 블루 칼라 스타일을 주자.
3. <h1></h1> 엘레먼트에 있는 핑크 텍스트 클래스를 지우지 말고, 핑크 텍스트 클래스 다음에 블루 텍스트 클래스를 집어넣자. 이 때, 어떤 클래스가 먼저 오는지는 상관 없다.
여기서 우리는 <style></style> 태그 안에 있는 클래스의 순서에 따라, 어떤 클래스가 적용되는지 확인하려 한다.
이미 예상했겠지만, 처음 만든 클래스가 무시되고, 나중에 만든 클래스가 이를 덮어씌운다.
답변
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="blue-text pink-text">Hello World!</h1>
Basic CSS: Override Class Declarations by Styling ID Attributes
설명
위 실험 결과에 따르면, 브라우저가 CSS를 위에서 아래 순서로 읽어 내린다는 것을 알 수 있다.
즉, 같은 엘레먼트에 스타일이 여러 개 적용될 경우, 가장 마지막 스타일이 적용된다는 것이다.
왜냐하면, <h1></h1>에 클래스를 쓸 때는 블루 텍스트 클래스를 먼저 넣었음에도 불구하고, <style></style> 안에 적은 순서대로 스타일이 적용됐기 때문이다.
이번에는 아이디를 사용하여 클래스에 적용된 스타일을 무시하고 덮어씌워보자.
문제
1. <h1></h1> 엘레먼트에 오렌지 텍스트 (orange-text) 아이디(ID)를 넣어보자.
2. <h1></h1> 엘레먼트에 있는 블루 텍스트 클래스와 핑크 텍스트 클래스는 그대로 두자.
3. <style></style> 태그 안에 오렌지 텍스트 아이디(#)를 사용하여, 칼라를 오렌지로 줘보자.
답변
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
#orange-text {
color: orange;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
Basic CSS: Override Class Declarations with Inline Styles
설명
위 실험 결과에 따르면, 아이디가 클래스를 무시하고 CSS 스타일을 뒤집어 씌운 것을 알 수 있다.
이번에는 아이디도 무시할 수 있는 방법을 알아보려 한다.
문제
1. 예전에 배웠던 인라인(inline, 같은 줄에 바로 적용) 스타일을 사용해보자.
2. 블루 텍스트와 핑크 텍스트 클래스 그리고 오렌지 텍스트 아이디는 모두 그래도 두자.
3. <h1></h1> 태그에 인라인 스타일을 적용해보자. <h1 style="color: white;">
답변
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 style="color: white;" id="orange-text" class="pink-text blue-text">Hello World!</h1>
Basic CSS: Override All Other Styles by using Important
설명
위 실험에서와 같이, 인라인 스타일이 지금까지 배웠던 스타일 방식을 모두 무시하고 덮어 씌운 것을 알 수 있다.
그러나 인라인 스타일마저도 무시할 수 있는 마지막 방식이 남아있다. 가장 강력한 방식이라고 생각하면 된다.
바로 !important 키워드를 사용하는 방식이다.
혹시라도 다른 CSS 스타일로 덮어 씌워지는 상황을 방지하기 위해, 임포턴트(important, 중요)를 사용하면 안심할 수 있다.
다시 한 번 핑크텍스트가 어떤 순서를 거쳐 덮어 씌워졌는지 되돌아 보자.
1. 스타일 태그 안에서 가장 마지막 스타일이 적용된다는 점을 이용하여, 핑크텍스트 대신 블루텍스트가 적용됨.
2. 아이디를 사용하여, 블루텍스트 대신 오렌지텍스트가 적용됨.
3. 인라인 스타일을 적용하여, 오렌지텍스트 대신 화이트 칼라가 적용됨.
문제
스타일 태그 안에 있는 핑크텍스트에 임포턴트 키워드를 적용해보자.
color: pink !important; 와 같은 식이다.
답변
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink !important;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
Basic CSS: Use Hex Code for Specific Colors
설명
지금까지는 칼라 단어를 직접 적어서 칼라 스타일을 적용하였다.
칼라 스타일을 적용할 수 있는 또 다른 방법 중 하나는 헥사데서몰 코드 (hexadecimal code, 16진수 코드)를 사용하는 것이다. 줄여서 헥사 코드라고도 한다.
우리는 일반적으로 데서몰(decimal, 10진수) 숫자를 사용한다. 0부터 9까지 총 10가지의 숫자를 이용하여, 수많은 숫자를 표현하는 것이다.
헥사 코드는 16진수로, 0부터 9라는 숫자와 A부터 F의 알파벳을 이용하여, 총 16가지의 옵션을 사용한다.
더 자세한 사항은 위키피디아 사이트를 참고하도록 하자.
CSS에서는 총 6자리의 헥사코드를 사용하여 칼라를 정할 수 있다. 각 2자리는 각각 레드(R), 그린(G), 블루(B)를 구성하는 색을 의미한다.
예를 들어, 가장 낮은 레드 색상과 그린 색상 그리고 블루 색상을 합치면 블랙 칼라가 된다. 이를 헥사코드로는 앞에 해시심볼을 붙여 #000000 과 같은 식으로 사용한다.
body {
color: #000000;
}문제
블랙이라는 단어를 헥사코드로 바꿔보자.
답변
<style>
body {
background-color: #000000;
}
</style>
Basic CSS: Use Hex Code to Mix Colors
설명
앞서 설명한 바와 같이, 헥사코드(hex code)는 레드(R), 그린(G), 블루(B)에 각 2자리의 16진수 수를 사용하여 칼라를 만들어낼 수 있다.
결론적으로 말하면, 레드, 그린, 블루의 조합으로 1,600만개 이상의 색을 만들어낼 수 있다는 뜻이다.
예를 들어, 오렌지 색상은 레드 칼라와 약간의 그린 칼라로 만들어낼 수 있다.
이를 헥사코드로 나타내면, #FFA500으로 표현할 수 있다. 블루 칼라가 없기 때문에 마지막 2자리는 00인 것이다.
0은 색이 없다는 의미로 생각하면 되고, F는 가장 밝은 색을 의미한다고 생각하면 된다.
문제
<style></style> 안에 있는 색을 다음 헥사코드로 재정의 해보자.
1. Dodger Blue - #1E90FF
2. Green - #00FF00
3. Orange - #FFA500
4. Red - #FF0000
답변
<style>
.red-text {
color: #FF0000;
}
.green-text {
color: #00FF00;
}
.dodger-blue-text {
color: #1E90FF;
}
.orange-text {
color: #FFA500;
}
</style>
<h1 class="red-text">I am red!</h1>
<h1 class="green-text">I am green!</h1>
<h1 class="dodger-blue-text">I am dodger blue!</h1>
<h1 class="orange-text">I am orange!</h1>
Basic CSS: Use Abbreviated Hex Code
설명
아마도 대부분 1,600만개의 색상 옵션이 있다는 사실이 그닥 달갑지 않을 것이다. 고르는 것도 일이기 때문이다.
헥사코드를 일일이 외울 수도 없다.
다행히도 헥사코드를 약간 줄여서 사용하는 방법이 있긴 하다.
6자리 수를 3자리 수로 줄이는 것이다. 그러면 RGB의 조합은 유지하되, 색상 수의 조합은 4천여개 정도로 줄어들게 된다.
#FF0000은 #F00으로 줄여서 사용할 수 있다. 결과도 같은 결과를 가져오니 걱정하지 말자.
문제
1. 3자리 헥사코드를 사용해보자.
2. Cyan - #0FF
3. Green - #0F0
4. Red - #F00
5. Fuchsia - #F0F
답변
<style>
.red-text {
color: #F00;
}
.fuchsia-text {
color: #F0F;
}
.cyan-text {
color: #0FF;
}
.green-text {
color: #0F0;
}
</style>
<h1 class="red-text">I am red!</h1>
<h1 class="fuchsia-text">I am fuchsia!</h1>
<h1 class="cyan-text">I am cyan!</h1>
<h1 class="green-text">I am green!</h1>
Basic CSS: Use RGB values to Color Elements
설명
색상 설정에 사용할 수 있는 또 다른 방법은 RGB 발류(RGB value, RGB 값)를 이용하는 방법이다.
RGB발류를 이용해서 색상을 검정색으로 표현하기 위해서는, rgb(0, 0, 0)과 같은 식으로 사용하면 된다.
반대로 RGB 발류의 최고값은 RGB(255, 255, 255)로 흰색으로 표현된다.
헥사코드와 비교해서 보면, 6자리의 수가 3자리 수로 줄어들었다는 점이고, 숫자 0에서 255까지로 표현된다는 점이다.
표현하는 방법만 달라졌을 뿐이고, 두 가지 방법 모두 표현할 수 있는 색상의 가능성은 동일하다.
문제
1. 백그라운드 칼라 (background-color, 바탕색)을 바꿔보자.
2. rgb(0, 0, 0)으로 바탕색을 설정해보자.
답변
<style>
body {
background-color: rgb(0, 0, 0);
}
</style>
Basic CSS: Use RGB to Mix Colors
설명
헥사코드와 같이 RGB발류로 여러가지 다른 색상을 만들어 낼 수 있다.
문제
헥사코드로 된 색상을 RGB 발류로 바꿔보자.
1. 블루 - rgb(0, 0, 255)
2. 레드 - rgb(255, 0, 0)
3. 오키드 - rgb(218, 11, 214)
4. 시에나 - rgb(160, 82, 45)
답변
<style>
.red-text {
color: rgb(255, 0, 0);
}
.orchid-text {
color: rgb(218, 112, 214);
}
.sienna-text {
color: rgb(160, 82, 45);
}
.blue-text {
color: rgb(0, 0, 255);
}
</style>
<h1 class="red-text">I am red!</h1>
<h1 class="orchid-text">I am orchid!</h1>
<h1 class="sienna-text">I am sienna!</h1>
<h1 class="blue-text">I am blue!</h1>
Basic CSS: Use CSS Variables to change several elements at once
설명
클래스를 기억하는가?
여러 HTML 엘레먼트를 특정 그룹으로 묶어, 동시에 같은 CSS를 한 번에 적용할 수 있었다.
CSS 배리어블(variable, 변수)은 CSS를 그룹으로 묶을 수 있는 방법이라고 생각하면 편할 듯 하다.
문제
<style></style> 태그 안에 .penguin 클래스가 보일 것이다.
여기에 있는 칼라를 바꿔보자.
1. 블랙을 그레이로 바꾸자.
2. 그레이를 화이트로 바꾸자.
3. 옐로우를 오렌지로 바꾸자.
아래 답변을 보면, <style></style> 태그 안에 var(--penguin)과 같은 식으로 써져 있는 곳이 여러 군데다.
바로 CSS 그룹(variable)을 만들어 한 번에 여러 CSS를 바꾼 것이다.
답변
<style>
.penguin {
/* Only change code below this line */
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
/* Only change code above this line */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
background: var(--penguin-skin, gray);
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
background: var(--penguin-skin, gray);
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
background: var(--penguin-skin, gray);
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
background: var(--penguin-belly, white);
width: 60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
background: var(--penguin-belly, white);
width: 95%;
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.right-feet {
top: 85%;
left: 60%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
background: var(--penguin-beak, orange);
width: 15%;
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}
</style>
<div class="penguin">
<div class="penguin-bottom">
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-feet"></div>
<div class="left-feet"></div>
</div>
<div class="penguin-top">
<div class="right-cheek"></div>
<div class="left-cheek"></div>
<div class="belly"></div>
<div class="right-eye">
<div class="sparkle"></div>
</div>
<div class="left-eye">
<div class="sparkle"></div>
</div>
<div class="blush-right"></div>
<div class="blush-left"></div>
<div class="beak-top"></div>
<div class="beak-bottom"></div>
</div>
</div>
Basic CSS: Create a custom CSS Variable
설명
CSS 배리어블(variable, 변수)을 만들기 위해서는, 만들 이름 앞에 하이픈(hyphen, - )을 2개 붙이면 된다.
--penguin-skin: gray;
이런 식으로 말이다.
문제
1. <style></style> 태그 안에 있는 .penguin 클래스에 penguin-skin 배리어블을 만들어 보자.
2. --penguin-skin 에는 그레이 칼라를 주도록 하자.
답변
.penguin {
/* Only change code below this line */
--penguin-skin: gray;
/* Only change code above this line */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}Basic CSS: Use a custom CSS Variable
설명
배리어블(variable)에 이름을 짓고 나면, 이 이름을 사용해서 배리어블에 만든 룰을 다른 곳에도 적용할 수 있다.
예를 들어, background: var(--penguin-skin); 이라는 방식으로 백그라운드에 펭귄스킨 배리어블을 적용하면, 우리가 펭귄스킨 배리어블에 적어둔 룰이 대신 적용하는 것이다.
배리어블 이름을 정확하게 적용해야 한다는 점에 주의하자.
문제
1. 백그라운드에 --penguin-skin 배리어블을 적용해보자.
2. <style></style> 태그 안에 있는 penguin-top, penguin-bottom, right-hand, left-hand에 있는 백그라운드에 적용하면 된다.
답변
.penguin-top {
top: 10%;
left: 25%;
/* Change code below this line */
background: var(--penguin-skin);
/* Change code above this line */
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
/* Change code below this line */
background: var(--penguin-skin);
/* Change code above this line */
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
/* Change code below this line */
background: var(--penguin-skin);
/* Change code above this line */
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
/* Change code below this line */
background: var(--penguin-skin);
/* Change code above this line */
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}Basic CSS: Attach a Fallback value to a CSS Variable
설명
CSS 프로퍼티(property, 특성) 값으로 배리어블(variable, 변수)을 설정할 때, 폴백(fallback, 백업용) 발류(value, 값)를 설정해둘 수도 있다.
이는 혹시라도 기존의 발류가 잘못되거나 오류가 생겼을 대를 대비해서 설정할 수 있는 방식이다.
브라우저 컴패터빌리티(compatibility, 호환성)를 위한 방법은 아니다.
사용하는 방법은 이런 식이다:
background: var(--penguin-skin, black);
이러면 펭귄스킨 배리어블이 적용되지 않았을 경우, 검은색으로 반영이 되는 것이다.
문제
펭귄탑 클래스, 펭귄보톰 클래스에 문제가 생긴 듯 하다. 이를 고쳐보자.
1. 스펠링이 틀려 배리어블이 적용 안된 점은 그냥 넘어가자. 스펠링을 고치지 말라는 말이다.
2. 대신 .penguin-top과 .penguin-bottom 클래스에 폴백 발류로 블랙을 넣어보자.
답변
.penguin-top {
top: 10%;
left: 25%;
/* Change code below this line */
background: var(--pengiun-skin, black);
/* Change code above this line */
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
/* Change code below this line */
background: var(--pengiun-skin, black);
/* Change code above this line */
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}Basic CSS: Improve Compatibility with Browser Fallbacks
설명
CSS로 일을 하다 보면, 언젠가는 브라우저 컴패터빌리티(compatibility, 호환성) 문제에 부딪히게 될 것이다.
그래서 브라우저 폴백 발류(fallback value, 백업용 값)를 설정해두는 것이 중요한 것이다.
위에 설명한 일반 폴백 발류와는 또 다른 것이다.
브라우저가 웹페이지에서 CSS를 파싱(parsing, 읽어서 이해)할 때, 브라우저가 지원하지 않는 기능이 있다거나 할 때는 그 부분을 무시해버린다.
예를 들어 우리가 웹페이지를 CSS 배리어블(variable, 변수)을 사용하여 CSS를 스타일링 했다고 치자.
인터넷 익스플로러에서는 CSS 배리어블을 읽어드릴 기능이 없기 때문에, 디폴트 발류(default value, 기본값)를 사용해버린다.
열심히 웹페이지를 만든 우리 입장에서는 그리 달가운 상황은 아닌 것이다.
그래서 미리 다른 발류를 가장 기본적인 CSS 룰을 사용하여, 브라우저 폴백용도로 설정해 두면 편하다.
그러면 버전이 오래된 브라우저에서도 문제 없이 돌아갈 수 있을테니 말이다.
쉽게 말하자면, CSS 배리어블을 사용한 바로 앞전에 기본 CSS 룰을 설정해 두면 되는 것이다.
이런 식으로 말이다:
background: red;
background: var(--red-color);문제
레드박스 클래스에 기본 CSS 룰을 사용하여, 백그라운드 칼라를 레드로 CSS 배리어블보다 먼저 설정해두자.
답변
<style>
:root {
--red-color: red;
}
.red-box {
background: red;
background: var(--red-color);
height: 200px;
width:200px;
}
</style>
<div class="red-box"></div>
Basic CSS: Inherit CSS Variables
설명
CSS 배리어블(variable, 변수)은 하위(descendant, 자손) 셀렉터로 인헤릿(inherit, 상속)이 가능하다.
나는 이 부분을 이해하는 것이 약간 어려웠다.
그런데 HTML 코드의 가장 하단으로 내려가면 이와 같이 되어 있다:
<div class="penguin">
<div class="penguin-bottom">
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-feet"></div>
<div class="left-feet"></div>
</div>
<div class="penguin-top">
<div class="right-cheek"></div>
<div class="left-cheek"></div>
<div class="belly"></div>
<div class="right-eye">
<div class="sparkle"></div>
</div>
<div class="left-eye">
<div class="sparkle"></div>
</div>
<div class="blush-right"></div>
<div class="blush-left"></div>
<div class="beak-top"></div>
<div class="beak-bottom"></div>
</div>
</div>
분명히 각 클래스는 별도로 존재하지만, HTML에 적용할 때 서로 급이 분명하게 나눠진 것이 보인다.
펭귄이 가장 상위에 있는 클래스이다.
그 아래에는 펭귄보톰, 펭귄탑이 있다.
펭귄보톰 아래에는 또 4가지 하위 클래스가 있고, 펭귄탑에는 더 많은 하위 클래스가 있다.
결국 가장 상위에 있는 펭귄 클래스에 적용한 CSS 룰은, 그 하단에 있는 모든 클래스에 인헤릿이 가능하다는 것이다.
그렇다면 그 어디에든 적용할 수 있는 가장 최상위의 클래스를 만들 수 있는 방법이 있을까?
:root 는 HTML의 루트(root, 근원)와 매칭이 되는 셀렉터이다.
결국 :root 에 설정하는 CSS 룰은 글로벌리 어베일러블 (globally available, 전체적으로 사용 가능) 하여, 페이지 어디서든 인헤릿이 가능하다는 것이다.
문제
1. :root 셀렉터에 --penguin-belly 라는 배리어블을 만들어보자.
2. 이 셀렉터의 발류를 핑크로 설정해보자.
3. 그러면 모든 차일드(child, 하위) 엘레먼트에서 이 배리어블의 발류를 인헤릿 할 것이다.
답변
:root {
/* Only change code below this line */
--penguin-belly: pink;
/* Only change code above this line */
}Basic CSS: Change a variable for a specific area
설명
CSS 배리어블(variable, 변수)을 :root(루트, 최상위 위치)에 만들면, 전체 페이지에 이 발류(value, 값)를 설정한다.
그러면 특정 엘레먼트에 뒤집어 씌우는 방식을 사용하여 다른 CSS 룰을 적용하면 된다.
문제
펭귄벨리를 화이트 색상으로 바꿔보자.
1. penguin 클래스에서 --penguin-belly의 색을 white로 바꿔보자.
답변
.penguin {
/* Only change code below this line */
--penguin-belly: white;
/* Only change code above this line */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}Basic CSS: Use a media query to change a variable
설명
CSS 배리어블(variable)은 굉장히 간편하게 미디어 쿼리 (media queries, 화면크기에 따라 바뀌는 디자인 설정)를 설정할 수 있게 해준다.
예를 들면, 미디어 쿼리 브레이크 포인트 (media query break point, 디자인이 바뀌게 설정한 화면 크기 값이 바뀌는 지점)보다 스크린(screen, 화면)이 더 작거나 클 수 있다.
이에 따라 배리어블 발류(value, 값)를 다르게 하여 스타일을 설정할 수 있다.
문제
미디어 쿼리의 루트(:root, 최상위) 셀렉터를 건드려 보자.
1. --penguin-size의 발류를 200px로 설정해보자.
2. --penguin-skin의 발류를 black으로 설정해보자.
3. 브라우저 스크린 크기를 마우스로 늘렸다가 줄이면서 펭귄의 모습에 어떤 변화가 생기는지 직접 확인해보자.
답변
@media (max-width: 350px) {
:root {
/* Only change code below this line */
--penguin-size: 200px;
--penguin-skin: black;
/* Only change code above this line */
}
}
Basic CSS를 끝마치며...
CSS의 가장 기본을 확인해봤다. 아마도 이제는 더 실용적인 것을 배우게 되지 않을까 생각된다.
하루에 하나씩 올리니, 부담도 적고 매일 뭔가 새로운 것을 배울 생각에 오히려 하루 하루가 기대된다.
오늘보다 더 나은 내일이 되게 하기 위해, 앞으로도 꾸준히 노력하련다.
Applied Visual Deisign으로 가기
'freeCodeCamp 프리코드캠프 > 1 반응형 웹 디자인' 카테고리의 다른 글
| 1-6 CSS 플렉스 박스 - CSS Flexbox (0) | 2020.08.17 |
|---|---|
| 1-5 반응형 웹 디자인 원칙 - Responsive Web Design Principles (0) | 2020.07.24 |
| 1-4 접근성 - Applied Accessibility (0) | 2020.07.21 |
| 1-3 시각 디자인 - Applied Visual Design (0) | 2020.07.01 |
| 1-1 HTML (0) | 2020.03.31 |
