7장. CSS 선택자의 기본
- 효과와 선택
<a> 태그의 글자를 모두 검은색으로 바꾸는 CSS가 적용된 상태이다.
<style>
a{
color: black;
text-decoration: none;
}
이 중, CSS 페이지에서 이미 읽은 HTML과 CSS만을 회색으로 표시하고 싶다면 어떻게 해야 할까?
우선 인라인 속성을 이용해 바꾸는 방법이 있다.
<ol>
<li><a href="1.html" style="color: blanchedalmond;">HTML</a></li>
<li><a href="2.html" style="color: blanchedalmond;">CSS</a></li>(회색이 아닌 다른 색으로 바꾸어 보았다.)
바뀐 페이지는 다음과 같다. 색이 잘 바뀐 것을 볼 수 있다.
그렇지만 두 개의 문장에서 중복이 발생하는 것을 알 수 있다, 이를 방지하기 위해서, 인라인 속성이 아닌 class를 지정하는 방법을 사용해 보자. 여기에서는 이미 본 페이지의 색을 달리하는 것이기 때문에 속성의 이름을 saw라고 두었다.
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
그리고 이 클래스 값을 갖는 모든 태그의 속성을 변경하면 된다.
아래와 같이 코드를 작성한다.
<style>
a{
color: black;
text-decoration: none;
}
.saw {
color: blanchedalmond;
}
</style>
"saw" 클래스의 css를 지정하기 위해서 .saw를 사용하였다. class 값이 특정한 태그를 지정할 때에는 온점 (.) 을 사용하는 것이 규칙이다.
바뀐 페이지는 아래와 같다.
https://01choco.github.io/WEB1/2.html
CSS란 무엇인가
01choco.github.io
class는 같은 속성을 가지는 태그끼리 하나로 묶을 수 있다.
또한 하나의 태그가 여러 개의 class를 가질 수 있으며, 이는 띄어쓰기를 통해 구분할 수 있다. 또한 순서에 따라 가장 뒤에 나온 클래스에 영향을 받기도 한다.
<style>
a{
color: black;
text-decoration: none;
}
.saw {
color: blanchedalmond;
}
.active {
color: red;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active">CSS</a></li>
<li><a href="3.html">Javascript</a></li>이렇게 코드를 작성하면, CSS라는 글자는 뒤에 있는 class인 active의 성질을 나타내므로 아래와 같이 빨간색으로 글자가 나타나게 된다.
이처럼 순서에 따라 나타내는 성질이 달라지는 것을 막기 위해 더 높은 우선순위의 태그 속성인 ID를 사용할 수 있다. ID를 active로 설정해 보자. ID는 #을 사용해 css를 적용한다.
<style>
a{
color: black;
text-decoration: none;
}
.saw {
color: blanchedalmond;
}
#active {
color: red;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">Javascript</a></li>
</ol>
잘 적용된 것을 확인할 수 있다.
우선순위는 아래와 같다.
ID > class > 태그 선택자
그리고 같은 순위라면, 뒤에 나오는 것이 더 우선순위가 높다.
id 값은 단 한번만 등장하는 반면, class는 여러 태그에 사용할 수 있다.
8장. 박스 모델
box.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>CSS</h1>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
</body>
</html>웹 화면으로는 아래와 같이 표시된다.
CSS 부분에 a 태그를 이용해 링크를 걸어 보자.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>CSS</h1>Cascading Style Sheets (<a href="https://namu.wiki/w/CSS">CSS</a>) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
</body>
</html>
링크가 잘 걸린 것을 확인할 수 있다.
각 태그가 가지는 부피를 확인하기 위해 테두리를 그려보자. CSS 속성 중 border-width, border-color, border-style을 이용한다.
<style>
h1 {
border-color: red;
border-style: solid;
border-width: 5px;
}
a {
border-color: red;
border-style: solid;
border-width: 5px;
}
</style>
h1은 화면 전체를 a는 그 글자 부분만 차지하는 것을 확인할 수 있다.
화면 전체는 쓰는 태그를 블록 레벨 엘리먼트, 자기 자신의 크기만큼 공간을 쓰는 태그를 인라인 엘리먼트라고 한다. 이는 display라는 속성을 이용해 조절할 수 있다. 위의 블록 레벨 엘리먼트인 CSS를 인라인 엘리먼트로 바꾸어 보자.
<style>
h1 {
border-color: red;
border-style: solid;
border-width: 5px;
display: inline;
}
a {
border-color: red;
border-style: solid;
border-width: 5px;
}
</style>
*display: none으로 설정하면 해당 태그는 보이지 않게 된다.
또한, 현재 코드에서는 h1 태그의 내용과 a 태그의 내용이 동일하므로, ,를 이용해 이 두 태그에서의 중복을 줄일 수 있다.
h1, a{
border-color: red;
border-style: solid;
border-width: 5px;
}또한, border 하나의 속성으로 이를 모두 나타낼 수 있다.
<style>
h1, a{
border: 5px solid red;
}
</style>순서는 영향을 끼치지 않는다.
콘텐츠, 테두리 사이의 여백을 주고 싶을 때는 padding 속성을 사용한다.
<style>
h1{
border: 5px solid red;
padding: 20px;
}
</style>
콘텐츠와 테두리 간의 여백이 생겼다.
콘텐츠 두 개 간의 여백을 주고 싶을 때, margin 속성을 사용한다.
0으로 설정하면 여백이 사라진다.
<style>
h1{
border: 5px solid red;
padding: 20px;
margin: 0;
}
</style>
너비는 width로 조정할 수 있다.
<style>
h1{
border: 5px solid red;
padding: 20px;
margin: 20px;
width: 100px;
}
</style>
margin, padding, border, content는 아래와 같이 나타낼 수 있다.
실제 페이지에서도 확인해 보자.
마우스 오른쪽 버튼 클릭 - 검사
이와 같이 적용된 CSS를 확인할 수 있다.
09장. 박스 모델 써먹기
아래쪽 테두리를 그어 보자.
h1{
font-size: 45px;
text-align: center;
border-bottom: 1px gray solid;
}아래쪽 선이 생긴 것을 확인할 수 있다.
이제 간격을 넓혀 보자. margin을 0으로, padding 값을 20으로 지정한다.
h1{
font-size: 45px;
text-align: center;
border-bottom: 1px gray solid;
margin: 0px;
padding: 20px;
}
간격이 잘 지정되었다.
이제 다음으로 넘어가 <ol> 태그에 줄을 넣어 보자. 오른쪽 선을 그으면 된다.
<ol> 은 블록 레벨 엘레먼트이기 때문에 오른쪽 맨 끝에 선이 생겼다. 그러므로 너비를 지정해 주자.
ol {
border-right: 1px gray solid;
width: 100px;
}
원하는 위치에 선이 잘 생겼다. 이제 선 끝의 여백을 없애기 위해 margin 값을 0으로 지정해 주었다.
body 태그의 margin도 0으로 지정해 주었다.
ol {
border-right: 1px gray solid;
width: 100px;
margin: 0px;
}
body {
margin: 0px;
}
원하는 대로 화면을 꽉 채우는 선이 생겼다.
10장. 그리드 소개
이제 목록과 본문이 나란히 위치하는 디자인을 하려고 한다.
CSS 본문을 위로 올리는 방법인 그리드를 여기서 소개한다.
grid.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GRID</title>
</head>
<body>
NAVIGATION ARTICLE
</body>
</html>디자인을 위해 태그를 나누어야 할 때, "무색무취" 의 태그인 <div> 를 사용한다.
테두리를 그리기 위해서 border 태그를 달아 보자.
span 태그는 동일한 기능을 하지만, <div> 태그는 블록 레벨, <span> 태그는 인라인 엘리먼트이다. 따라서 <div>를 사용하면 줄바꿈이 된다.
상위 태그로 div 지정 -> id grid로 설정 -> display: grid, grid-template-columns : (너비 설정, 전체 다는 1fr)
그리드가 생긴 모습이다. navigation은 150을 고정적으로 차지하게 된다.
11장. 그리드 써먹기
앞서 배운 그리드와 CSS 요소를 이용해 원하는 모양으로 웹 페이지를 만들어냈다.
12장. 미디어 쿼리 소개
반응형 웹 디자인: 화면 크기에 따라 웹 페이지의 각 요소가 반응하여 최적화된 모양으로 바뀌는 것. (Responsive web)
이를 순수한 웹 기술 CSS를 이용해 구현하는 미디어 쿼리에 대해 알아본다.
mediaquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MediaQuery</title>
<style>
div{
border: 10px solid green;
font-size: 60px;
}
</style>
</head>
<body>
<div>
responsive
</div>
</body>
</html>
다음과 같은 코드를 작성하였다.
이 div 태그가, 화면 크기가 800px보다 큰지 작은지에 따라 보이지 않게 해 보자. 화면 크기가 1000보다 작다면 보이지 않도록 설정하는 코드는 아래와 같다.
@media(max-width: 1000px) {
div {
display: none;
}
}화면 크기가 1000보다 작아지면 글자가 사라지는 것을 볼 수 있다.
13장. 미디어 쿼리 써먹기
우선 화면의 너비가 800px 이하일 때 그리드를 해제하는 코드를 작성하였다.
@media(max-width: 800px) {
#grid {
display: block;
grid-template-columns: 150px 1fr;
}
}
선들도 모두 없애 가독성을 좋게 하였다.
14장~15장. CSS 코드의 재사용, 수업을 마치며
지금까지 만든 코드를 모든 페이지에 적용하여 페이지를 완성하였다.
'생활코딩! HTML+CSS+자바스크립트' 카테고리의 다른 글
| WEB 6주차 (Javascript 16장~) (0) | 2023.09.10 |
|---|---|
| WEB 5주차 (Javascript 7~15장) (0) | 2023.09.03 |
| WEB 4주차 (Javascript 1~6장) (0) | 2023.08.26 |
| WEB 2주차 (HTML 17~22장, CSS 1~6장) (0) | 2023.08.13 |
| WEB 1주차 (HTML 1~16장) (0) | 2023.08.05 |