WEB2 - CSS

이슬비·2023년 4월 12일

CSS web

생활코딩

목록 보기

2/3

생활코딩 WEB2 - CSS

1. 수업소개

웹이 처음 세상에 등장했을 때 HTML 기술이 존재하였다. HTML 기술을 통해 정보를 표현할 수 있게 되었고, 이 정보를 인터넷을 통해 전세계 누구나 볼 수 있게 할 수 있었다.

웹이 점점 발전해나감에 따라 웹페이지를 좀 더 아름다우면서 보기 좋게 만드는 방법에 대한 기술들이 고안되었고, 이에 CSS가 등장하였다.

2. CSS가 등장하기 전의 상황

웹페이지를 아릅답게 만드는 방법에 대한 고민이 시작된다. 이에 두 가지 방법이 고안되었다.

HTML의 문법에 따른 디자인에 관한 새로운 태그를 추가하는 것.
디자인에 최적화된 완전히 새로운 언어(CSS)를 만드는 것.

우선 초기에 사람들은 더 쉬운 1번의 방법을 채택하였고, 그 한계를 깨닫게되자 CSS라는 새로운 언어를 만드는 해결책을 찾았다.

1번의 방법을 먼저 살펴보자. 이전에 만들었던 파일에서 'WEB', 'HTML', 'CSS', 'JavaScript' 문구의 색을 빨간색으로 바꾸고자 한다. <font> 태그를 사용하면 다음과 같이 구현이 가능하다.

<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<ol>
	<li><a href="1.html"><font color="red">HTML</font></a></li>
    <li><a href="2.html"><font color="red">CSS</font></a></li>
    <li><a href="3.html"><font color="red">JavaScript</font></a></li>
</ol>

하지만 이러한 방법은 문제점을 갖는다.

(1) 정보로서의 가치

다음 코드를 보자.

<h1><a href="index.html"><font color='red'>WEB</font></a></h1>

<h1> 태그는 'WEB'이라는 문자가 제목이다라는 것을 설명한다.
<a> 태그는 'WEB'이라는 정보가 링크라는 것을 설명한다.
다만, <font> 태그는 'WEB'의 글자색이 그저 빨간색이라는 디자인을 나타낼 뿐, 어떠한 정보도 갖지 않는다. 디자인 자체가 정보라고 볼 수는 없기 때문이다.
이는 정보로서의 가치가 떨어지게 되는 문제를 갖는다.

(2) 중복의 발생

해당 파일에는 링크가 4개 밖에 없지만, 이 링크가 무수히 많아진다면 <font> 태그 역시 무수히 많이 입력하고 수정해야하기 때문에 비효율적이다.

이에 CSS 기술이 탄생하게 된다.

현재 <font> 태그는 사용되지 않는다.

3. CSS의 등장

웹브라우저는 파일을 HTML 언어로 인지한다. CSS는 HTML과 완전히 다른 언어이기 때문에, 웹브라우저한테 "이 코드는 HTML이 아니라 CSS의 문법에 따라 해석해야해."라고 HTML의 문법으로 말해야한다.

<style> 태그는 HTML 문법이면서 태그 내에 있는 코드은 CSS의 문법이다.

<style>
	a {
    	color: red;
    }
</style>

이는 <a> 태그에 해당하는 내용의 색을 빨간색으로 한다는 것을 의미한다.

<font> 태그를 사용할 경우, 만약 글자색을 다른 색으로 바꾸고 싶을 때 코드 수정을 4번이나 해야한다. 이에 반해 CSS의 <style> 태그를 사용할 경우 코드 수정은 1번이면 된다.
CSS의 장점은 중복의 제거이고, 이는 코드의 사이즈가 작아지며 웹페이지의 유지보수를 좀 더 편리하게 할 수 있다. 또한 가독성도 높아진다.

CSS 언어의 도입

HTML이 정보에 전념하기 위해서 디자인에 관한 기능을 CSS로 분리하였다.
CSS을 이용함으로써 HTML보다 디자인에 있어서 좀 더 효율적이게 되었다.

주석 처리

command+/를 입력하면 코드가 주석 처리 된다.

<!-- <h1><a href="index.html">WEB</a></h1>
<ol>
	<li><a href="1.html">HTML</a></li>
	<li><a href="2.html">CSS</a></li>
	<li><a href="3.html">JavaScript</a></li>
</ol> -->

4. CSS의 기본 문법

웹페이지에서 CSS를 삽입하는 방법은 두 가지이다.

<style> 태그를 사용한다. (챕터 3)
style 속성(Attribute)을 사용한다. (챕터 4)

2.html에 머물고 있음을 나타내기 위해 'CSS' 문구에만 별도의 색을 넣고 싶다. 이때 <a> 태그에 style 속성을 별도로 사용하여 CSS를 삽입한다.

<li><a href="2.html" style="color: red;">CSS</a></li>

<style> 태그
<style>
	a {
    	color: red;
    }
</style>
위의 코드에서 효과(color: red;)를 어느 대상에 지정할 지 알려줘야하기 때문에 a { } 코드가 추가적으로 필요하다.
a { } : 선택자(Selector)
color: red; : 효과(Declaration )

style 속성
<a href="2.html" style="color: red;">CSS</a>
HTML과 CSS의 사용 설명서에는 다음과 같이 적혀있다.
"style 속성의 값을 웹브라우저는 CSS의 문법에 따라 해석하여, 해석한 결과를 style 속성이 위치하고 있는 태그에 적용한다."
style 속성을 사용할 경우, 해당 속성이 위치한 태그에 효과를 주기 때문에 선택자를 사용할 필요가 없다.

만약 'WEB', 'HTML', 'CSS', 'JavaScript' 문구에 밑줄을 없애고 싶으면 <style> 태그를 이용한다.

<style>
	a {
    	color: red;
        text-decoration: none;
    }
</style>

추가로 'CSS' 문구에만 밑줄을 긋고 싶다면 style 속성을 이용한다.

<li><a href="2.html" style="color: red; text-decoration: underline;">CSS</a></li>

CSS 사용

다수의 효과를 사용하고 싶다면 <style> 태그를 사용하는 것이 효율적이다. 원하는 선택자(Selector)에 원하는 효과(Declaration)를 넣는다.
특정 문구만에 효과를 원한다면 style 속성(또는 인라인)을 사용한다. 원하는 태그에 속성으로 사용하는 것이기 때문에 선택자(Selector)가 필요없다.

5. 혁명적 변화

CSS의 문법을 이론적으로 정리해보자.

<style>
	a {
    	color: red;
    }
</style>

a { }
선택자(Selector). 웹페이지에 있는 모든 <a> 태그에 적용한다.

color: red;
효과(Declaration). 선택자가 지정한 태그들에 대해 해당 효과를 적용한다.

color
속성(Property).

red
속성값(Property Value).

배우지 않은 선택자(Selector) 또는 모르는 효과(Declaration)를 보더라도 무엇을 모르는지 아는 상태이다. 이러한 문제는 충분히 검색을 통해 극복할 수 있으며, 이를 '혁명적 사건'으로 볼 수 있다.

6. CSS 속성을 스스로 알아내기

'WEB' 문구의 글자 크기를 더 크게하고 싶고 가운데 정렬도 하고 싶다면 어떻게 해야할까?

'WEB'이 속해있는 태그를 파악한다. <h1> 태그에 속해있다.
CSS를 삽입하고자 하는데 <h1> 태그는 한 번밖에 없으므로 <style> 태그를 사용한다.
```
<style>
	h1 {
	
    }
</style>
```
검색을 통해 글자 크기와 정렬에 관한 속성(Property)을 찾는다.

검색한 내용을 바탕으로 다음과 같이 코드를 작성한다.

<style>
	h1 {
    	font-size: 45px;
    	text-align: center;
	}
</style>

7. CSS 선택자의 기본

CSS를 이용하여 다음과 같이 수정하고자 한다.

기본적으로 모든 링크는 검은색으로 한다.
사용자가 방문했던 링크인 'HTML'과 'CSS'는 회색으로 한다.
현재 링크인 'CSS'는 빨간색으로 한다.

1번에 대한 코드는 다음과 같다.

<style>
	a {
    	color: black;
	}
</style>

2번을 해결하기 위해서 style 속성을 사용할 수 있다.

<li><a href="1.html" style="color: gray;">HTML</a></li>
<li><a href="2.html" style="color: gray;">CSS</a></li>

이 방법은 중복이 발생한다는 문제를 갖고 있다. 중복을 해결하기 위해서는 'HTML'과 'CSS'를 class 속성으로 그룹화한다. 속성값을 saw로 설정한다.

<li><a href="1.html", class="saw">HTML</a></li>
<li><a href="2.html", class="saw">CSS</a></li>

그리고 class가 saw인 태그를 선택하기 위해서 .saw 선택자를 사용한다. 이때 saw 앞에 .을 붙여야 하는데, 붙이지 않으면 saw라는 이름의 태그를 지칭하기 때문이다. 따라서 class="saw"에 해당하는 태그를 지칭하기 위해서는 .을 붙인다.

<style>
	.saw {
    	color: gray;
	}
</style>

3번을 해결하기 위해서 마찬가지로 'CSS'의 class 속성을 사용한다. 속성값으로 active를 추가한다.

<li><a href="2.html", class="saw active">CSS</a></li>

class 속성값은 띄어쓰기로 구분한다.

마찬가지로 .active 선택자를 사용한다.

<style>
	.active {
    	color: red;
	}
</style>

이 방법은 큰 문제를 갖고 있다.
<style> 태그에 속해있는 .saw 선택자와 .active 선택자의 순서를 바꾸게 되면, 우선순위의 문제로 인해 원하는 방향으로 CSS가 적용되지 않는다.

우선 순위를 지정하기 위해서는 ID 선택자(id)를 사용해야 한다.

<li><a href="2.html", class="saw" id="active">CSS</a></li>

그리고 id가 active인 태그를 선택하기 위해서는 #을 붙여 #active 선택자를 사용한다.

<style>
	#active {
    	color: red;
	}
</style>

선택자의 우선 순위는 다음과 같다.
ID 선택자(#acitve) > 클래스 선택자(.saw) > 태그 선택자(a, h1)

ID 선택자는 한 번만 나타나야 한다.

8. 박스 모델

제목과 목차, 그리고 내용을 구분 지어주는 수평선과 수직선을 디자인해보고자 한다. 이를 위해서는 박스 모델이라는 개념을 먼저 알아야 한다.

HTML의 태그들은 각각의 박스를 갖고 있다. 이 태그들은 각각의 성격과 일반적인 쓰임에 따라서 화면 전체를 쓰는 태그도 있고 자기 크기만큼을 쓰는 태그도 있다.
<h1> 태그와 같이 화면 전체를 쓰는 태그를 Block Level Element라 하고, <a> 태그와 같이 자기 크기만큼을 쓰는 태그를 Inline Element라고 한다.

시각적으로 보기 위해 태그의 박스를 그리고 싶으면 다음의 속성을 사용한다.
border-width : 박스 테두리 두께
border-color : 박스 테두리 색
border-style : 박스 테두리 모양

display 속성

display 속성을 이용하여 Block Level Element나 Inline Element로 설정할 수 있다.
<style>
	h1 {
    	display: inline;
    }
	a {
    	display: block;
	}
</style>
만약 해당 태그를 보이지 않게 하고 싶다면 속성값으로 none을 입력한다.

다음 코드를 보자.

<style>
	/* block level element */
    h1 {
    	border-width: 5px;
        border-color: red;
		border-style: solid;
	}
	/* inline element */
	a {
		border-width: 5px;
		border-color: red;
		border-style: solid;
	}
</style>

태그 선택자 h1과 a에 있는 내용이 중복되는 것을 볼 수 있다. ,를 사용하면 코드의 양을 줄일 수 있다.

<style>
	h1, a {
		border-width: 5px;
		border-color: red;
		border-style: solid;
	}
</style>

또한 테두리 관련 속성의 내용 역시 중복이다. 이 경우에는 border 속성을 이용한다.

<style>
	h1, a {
    	border: 5px solid red;
    }
</style>

속성값의 순서는 중요하지 않다.

박스에 관한 속성을 좀 더 알아보자.
padding : 내용과 박스 테두리의 간격을 의미한다.
margin : 해당 태그의 박스들 간의 간격을 의미한다.
width : 박스의 가로 길이를 의미한다.

[요소 점검]

[우클릭]-[요소 점검]을 클릭하면 태그와 CSS간의 다양한 관계과 영향을 알 수 있다.

9. 박스 모델 써먹기

이제 본격적으로 박스 모델을 이용하여 디자인해보자.

제목 밑에 가로선을 긋기 위해서 어떻게 해야 할까?
바로 태그 선택자 h1의 속성을 이용하면 된다. 아래 테두리만 설정하기 위해서 border-bottom 속성을 이용하고, margin과 padding 속성을 통해 간격을 조절한다.

<style>
	h1 {
    	border-bottom: 1px solid gray;
        margin: 0;
        padding: 20px;
	}
</style>

그렇다면 목차와 내용을 구분 짓는 세로줄은 어떻게 그을 수 있을까?
마찬가지로 태그 선택자 ol의 속성을 이용하면 된다. border-right 속성을 이용하여 오른쪽 테두리만 설정하고, width와 margin, padding 속성을 통해 간격을 조절한다.

<style>
	ol {
    	border-right: 1px solid gray;
        width: 100px;
        margin: 0;
        padding: 20px;
	}
</style>

제목 밑에 가로선 양 끝에 여백이 있음을 알 수 있다. 이는 태그 선택자 body의 margin 속성을 이용하면 된다.

<style>
	body {
    	margin: 0;
    }
</style>

[요소 점검]을 적극적으로 활용한다.

10. 그리드 소개

그렇다면 내용을 목차 우측으로 올리기 위해서 어떤 방법을 사용해야 할까? 우리는 '그리드'라는 것을 사용할 것이다.

디자인을 위해서 어떠한 의미도 갖지 않는 태그를 사용해야 할 때가 있다. 이때 사용하는 태그가 <div>와 <span> 태그이다.

<div> 태그는 Block Level Element.
<span> 태그는 Inline Element.

<div> 태그를 이용하여 'NAVIGATION'과 'ARITCLE'을 각각 묶는다. 그리고 이 두 내용을 나란히 놓기 위해서 부모 태그로 묶는다. 이때 부모 태그의 id를 grid로 명칭한다.

<div id="grid">
	<div>NAVIGATION</div>
    <div>ARTICLE</div>
</div>

ID 선택자 #gird와 태그 선택자 div의 박스를 그려보면 다음과 같다.

<style>
	#grid {
    	border: 5px solid pink;
    }
    div {
    	border: 5px solid gray;
	}
</style>

ID 선택자 #grid의 속성 display를 grid로 설정한다. 그리고 grid-template-columns 속성을 사용하면 <div> 태그가 열을 기준으로 정렬된다.

<style>
	#grid {
    	border: 5px solid pink;
        display: grid;
        grid-template-columns: 150px 1fr;
    }
    div {
    	border: 5px solid gray;
	}
</style>

grid-template-columns와 fr

grid-template-columns 속성을 이용하면 태그들이 열을 기준을 정렬된다.
이때 150px의 의미는 첫번째 열의 부피는 150 픽셀의 사이즈를 갖고, 1fr은 나머지 부분을 갖는다는 뜻이다.

fr은 박스를 비율에 따라 설정할 때에도 쓰인다.
<style>
	#grid {
        grid-template-columns: 2fr 1fr;
    }
</style>

최신 CSS의 기능을 사용하기 위해서는 현재 해당 기능을 사용해도 되는지 안되는지를 데이터에 근거해서 판단할 필요가 있다. 이는 Can I Use 사이트에서 확인할 수 있다.

11. 그리드 써먹기

이제 그리드를 이용하여 내용을 목차 우측으로 올려보자. 우선 내용에 해당하는 태그들을 <div id="artcle"> 태그로 묶고, 다시 <ol>태그와 함께 <div id="grid"> 태그로 묶는다.

그리고 <ol> 태그와 <div id="article"> 태그를 열을 기준으로 정렬하게 한다.

<style>
	#grid {
    	display: grid;
        grid-template-columns: 150px 1fr;
    }
</style>

목차의 위치를 오른쪽으로 조금만 옮기고자 한다. 이때는 태그 선택자 ol의 padding-left 속성을 이용한다.

<style>
	ol {
    	border-right: 1px solid gray;
        width: 100px;
        margin: 0;
        padding: 20px;
        padding-left: 33px;
    }
</style>

또한 ID 선택자 #article의 padding-left 속성도 조정한다.

<style>
    #article {
    	padding-left: 25px;
    }
</style>

위의 코드에는 위험성이 있다. <ol> 태그의 경우 본문에서도 충분히 나올 수 있기 때문에 <style> 태그 내에서 태그 선택자 ol을 그대로 사용하는 것은 위험하다.
<div id="grid"> 태그 내에 있는 <ol> 태그를 지칭하는 방법은 다음과 같다.

<style>
	#grid ol {
    	border-right: 1px solid gray;
        width: 100px;
        margin: 0;
        padding: 20px;
        padding-left: 33px;
    }
</style>

12. 미디어 쿼리 소개

반응형 웹(Responsive Web) 또는 반응형 디자인이란 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 동작하는 것을 의미한다.
반응형 디자인을 CSS를 통해서 구현하는 핵심적인 개념이 바로 미디어 쿼리(Media Query)이다.

다음 웹페이지를 보자.

우리가 하고자 하는 것은 화면의 크기에 따라서 'Responsive' 문구가 보이거나
보이지 않게 하는 것이다.

우선 스크린의 크기가 몇 픽셀인지 알아야 한다. 이는 [요소 점검]을 클릭하면 확인할 수 있다.

스크린의 크기는 1470 픽셀이다. 우리는 스크린의 크기가 800 픽셀 이상일 경우 'Responsive' 문구가 보이지 않게 하고자 한다. 참고로 'Responsive' 문구는 <div> 태그로 묶여있다.

스크린의 크기가 800 픽셀 이상이다라는 말은 결국 스크린의 최소 크기가 800이다라는 뜻이다.

<style>
	@media (min-width: 800px) {
    	div {
        	display: none;
        }
    }
</style>

13. 미디어 쿼리 써먹기

이제 미디어 쿼리를 적용해보자. 2.html 파일의 스크린의 크기가 800 픽셀보다 작아질 경우, 다른 상호작용을 적용해보고자 한다.

본문의 위치를 아래로 옮기고자 한다. ID 선택자 #grid의 display 속성을 block으로 설정하면 된다.

<style>
    @media (max-width: 800px) {
    	#grid {
        	display: block;
        }
    }
</style>

제목과 목차를 구분하는 선을 없애고자 한다.

<style>
	@media (max-width: 800px) {
    	#grid {
        	display: block;
        }
    	h1 {
        	border-bottom: none;
        }
        #grid ol {
        	border-right: none;
        }
    }
</style>

14. CSS 코드의 재사용

2.html 파일에서 적용한 디자인을 다른 파일에도 적용하고자 한다. 다른 파일에서 <style> 태그를 일일히 수정하여 만들 수도 있지만, 이는 중복의 문제가 발생하게 된다.

따라서 모든 웹페이지에서 중복될 CSS 코드를 복사하여 style.css 파일로 새로 만든다.

그리고 <link> 태그를 이용하여 style.css 파일을 참조하면 <style> 태그를 중복하지 않아도 CSS 코드가 적용된다.

<link rel="stylesheet" href="style.css">

만약 모든 웹페이지에 동일한 디자인을 적용하고 싶다면, 단순히 style.css 파일만 수정하면 된다. 이는 가독성과 유지보수의 측면에서 이점이 있다.

캐시(Cache)

만약 CSS 코드를 내장한 1.html 파일을 연다면 네트워크는 1.html 파일만 다운로드 받을 것이다. 챕터 14의 방법의 경우에는 1.html과 style.css 파일을 다운로드 받을 것이다.
그렇다면 어느 방법이 네트워크 측면에서 효율적일까? 전자의 경우가 그것 자체로는 더 효율적이다. 하지만 캐시를 이용하기 때문에 사실상 후자의 경우가 더 효율적이다.

한 번 style.css 파일을 다운로드 받으면 캐시에 저장되기 때문에, 이 파일은 수정되기 전까지 네트워크를 사용하지 않고 다운로드를 받을 수 있다. 따라서 후자의 경우가 전자보다 빠르고 경제적이다.

이슬비

이전 포스트

WEB1 - HTML & Internet

다음 포스트

WEB2 - CSS

생활코딩

1. 수업소개

2. CSS가 등장하기 전의 상황

(1) 정보로서의 가치

(2) 중복의 발생

3. CSS의 등장

CSS 언어의 도입

주석 처리

4. CSS의 기본 문법

`<style>` 태그

style 속성

CSS 사용

5. 혁명적 변화

6. CSS 속성을 스스로 알아내기

7. CSS 선택자의 기본

8. 박스 모델

`display` 속성

`[요소 점검]`

9. 박스 모델 써먹기

10. 그리드 소개

`grid-template-columns`와 `fr`

11. 그리드 써먹기

12. 미디어 쿼리 소개

13. 미디어 쿼리 써먹기

14. CSS 코드의 재사용

캐시(Cache)

WEB1 - HTML & Internet

WEB2 - JavaScript

0개의 댓글

WEB2 - CSS

생활코딩

1. 수업소개

2. CSS가 등장하기 전의 상황

(1) 정보로서의 가치

(2) 중복의 발생

3. CSS의 등장

CSS 언어의 도입

주석 처리

4. CSS의 기본 문법

<style> 태그

style 속성

CSS 사용

5. 혁명적 변화

6. CSS 속성을 스스로 알아내기

7. CSS 선택자의 기본

8. 박스 모델

display 속성

[요소 점검]

9. 박스 모델 써먹기

10. 그리드 소개

grid-template-columns와 fr

11. 그리드 써먹기

12. 미디어 쿼리 소개

13. 미디어 쿼리 써먹기

14. CSS 코드의 재사용

캐시(Cache)

WEB1 - HTML & Internet

WEB2 - JavaScript

0개의 댓글

`<style>` 태그

`display` 속성

`[요소 점검]`

`grid-template-columns`와 `fr`