CSS 편 - 1일차

 

1일차

 

 

 

---

01. 수업 소개

• 이 수업은 앞의 'HTML과 인터넷 수업'에 의존하는 수업이다. HTML이 무엇인지 모른다면 아래의 링크로 공부한 후에 수업을 진행하는 것을 권장한다.
• https://impnem.tistory.com/11

 

• 웹이 처음 세상에 등장했을 때는 'HTML' 단 하나의 기술만이 존재했다.
• HTML을 이용하면 전자문서를 만들 수 있었다. 즉, 컴퓨터를 통해 정보를 표현할 수 있게 되었다.
• 그러던 중 웹 페이지를 좀 더 아름다우면서 보기 좋은 형태로 만드는 방법이 필요하게 되었다.
• 그 방법으로 등장한 것이 CSS이며 이제부터 아름답게 꾸며나갈 것이다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=Ok0bBJPtgJI

 

---

 

 

 

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

• 웹을 만든 사람들은 웹 페이지를 아름답게 만드는 방법에 대한 깊은 고민에 빠진다.
• 그러면서 두 가지 갈림길에 서게 된다.
• 하나는 HTML이라는 이미 있는 언어의 디자인과 관련된 새로운 태그를 추가하는 것
• 또 하나는 디자인에 최적화된 완전히 새로운 언어를 만드는 것
• 전자는 쉽지만 한계가 있는 방법이고, 후자는 어렵지만 근본적인 해결책이다.
• 먼저 CSS를 살펴보기 전에 쉽지만 한계가 있던 방법에 대해 먼저 살펴보자

 

• 지금은 사용되지 않는 디자인을 위한 태그를 하나 소개한다.
• 이 태그는 지금 쓰지 않기 때문에 이 수업이 끝나면 머릿속에서 지워버려야 한다.
• 바로 <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>

• 이 코드를 추가하면 링크의 전형적인 색깔인 파란색이 빨간색으로 바뀌게 된다.
• <font>태그가 등장하면서 다른 색깔의 글자를 표현할 수 있게 되었다.
• 하지만 위 예제의 <h1>태그나 <a>태그는 <font>태그와는 다르다.
• <a>태그는 "'WEB'이라는 정보가 링크다"라는 것을 설명하는 정보이다
• <h1>태그는 "'WEB'이란 문자가 이 웹 페이지에서 제목이다"라는 중요한 정보를 나타낸다.
• 바로 이런 정보를 통해 우리가 알고 있는 검색 엔진과 같은 시스템들이 필요한 정보를 찾게 한다.
• 반대로 <font>라는 태그는 'WEB'이란 문자에 대해 어떠한 정보도 가지고 있지 않는다. 단지 빨간색으로 표현해야 한다는 디자인을 나타낼 뿐이다.
• 그래서 웹 페이지라고 하는 소중한 정보 안에 정보가 아니라고 할 수 있는 디자인에 대한 코드가 섞이면서 웹 페이지가 정보로서의 가치가 현격하게 떨어지는 문제가 생긴다.

 

• 그리고 우리가 짠 이 코드에는 또 다른 문제가 있다. 만약 <a>태그가 4개가 아니라 1억 개라고 생각해보아라.
• 만약 누군가 1억 개의 <a>태그를 아침, 점심, 저녁으로 색깔을 바꿔달라고 요청한다면 불행해질 것이다.
• 그래서 이러한 상황을 극복하게 해주는 놀라운 기술인 CSS를 배웠을 때 해방된 느낌이 들 것이다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=-OWx2vM4tLI 

 

---

 

 

 

 

03. CSS의 등장

• 앞서 작성한 코드를 복사해서 붙여넣은 다음 기존 코드는 컴퓨터가 무시하도록 만든다.
• 이를 위해 주석코드 '<!--'와 '-->'를 작성하고, 이것의 의미는 웹 브라우저에게 두 기호 사이의 콘텐츠는 없는 셈 치라는 뜻이다.
• 전 장에서 작성한 <font>태그를 없애고 원래대로 되돌린다.
• 먼저 CSS는 HTML과 완전히 다른 컴퓨터 언어이기 때문에 웹 브라우저에게 CSS 코드를 사용할 테니 HTML이 아니라 CSS 문법에 따라 해석해야 된다고 HTML 문법으로 이야기해야 한다.
• <style>이라는 태그는 HTML의 문법이면서, 동시에 <style>태그의 안쪽에 있는 내용은 CSS이므로 CSS의 언어의 문법에 맞게 처리해야 한다는 의미를 지니고 있다.
• 이제 기존의 코드를 생각해보면 <a>태그의 폰트 색상을 빨간색으로 하라는 뜻이었는데 이것을 CSS로 작성하면 아래와 같다.

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

• 위의 코드에서 "모든 <a> 태그에 대해서"라는 뜻을 의미하는 코드는 a이다. 그리고 중괄호를 열고 폰트 색상이 빨간색이라는 뜻을 의미하는 코드는 color: red;이다.
• 이처럼 CSS는 <a>태그가 1억 개든 10억 개든 순식간에 바뀌는 폭발적인 효과를 갖게 된다.
• 다시 기존 코드를 보자.

<!--
<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>
-->

• 여기서 <font>태그는 똑같은 내용이 중복해서 등장한다. 그런데 CSS를 통해 중복된 코드를 단 하나의 코드로 만들어 중복을 제거하였다.
• 이처럼 중복을 제거하면 규모가 큰 곳에서는 큰 차이를 느낄 수 있고, 만약 누군가 red를 black으로 바꾸는 것도 수정하기 쉬워진다.
• 즉, 유지보수를 편리하게 할 수 있고, 가독성 또한 훨씬 더 높아짐을 알 수 있다.
• 또 중요하다고 할 수 있는 한가지는 디자인과 관련된 코드가 <style>이란 태그 안에 갇혀 있기 때문에 HTML이 정보 전달에만 전념이 가능하다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=L41Zjl7XANI 

 

---

 

04. CSS의 기본 문법

• 전 장에서 말했듯이 HTML에서 어디부터 어디까지가 CSS인지를 알려주기 위해서는 <style>태그가 그런 역할을 한다는 것을 알았습니다.
• 그리고 또 다른 방법이 하나 있는데 그것은 태그를 통하는 것이 아니라 속성을 이용하는 방법이다.
• 아래의 코드를 보자.

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

...

<h1><a href="index.html">WEB</a></h1>
<ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html" style="color:red;text-decoration: underline;">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
</ol>

• 기존의 <style>태그에서 지정한 <a>태그는 글자색이 검정색이고 밑줄은 없게 지정이 되어있다. 그런데 CSS에 해당되는 <a>태그에는 글자색을 빨간색, 그리고 밑줄은 있게 하고 싶을 경우에 위처럼 사용한다.
• 이처럼 HTML 태그 내에 HTML의 속성인 style=""을 사용하여 CSS의 효과를 낼 수 있다.
• <style>태그 안에서는 웹 페이지에서 주고 싶은 효과를 누구에게 줄 것인가를 선택하기 위해 '(대상) { }'과 같은 코드를 사용하고 이것을 선택자(selector)라고 한다. 그리고 선택자에 지정될 효과를 효과 혹은 declaration이라고 부르며, 한국어로는 '선언'이라는 뜻이 있다.

 

• 정리하면 웹 페이지 안에 CSS를 삽입하는 두 가지 방법이 있는데, 첫 번째 방법은 "<style> 태그를 쓴다"이고 두 번째 방법은 "style 속성을 쓴다"이다.
• 그리고 <style>태그 안에 세미콜론(;)은 구분자로서 존재한다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=h0AlL9YI6bM

 

---

 

05. 혁명적 변화

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

• 위 그림에서 a라는 부분은 이 웹 페이지의 모든 a 태그를 선택한다는 점에서 선택자(selector)라고 한다.
• 그리고 color:red; 부분은 선택자가 지정한 태그에 대해 어떠한 효과를 줄 것인가에 해당하는 부분이며, 선언(declaration) 또는 효과라고 한다.
• color는 한국어로 속성, 영어로는 프로퍼티(property)라 부르고, red는 프로퍼티의 값(value)라고 한다.
• 이것을 이해했다는 것은 굉장히 중요한 의미를 갖는다.
• 이것을 이해하기 전까지는 무엇을 모르는지를 모르는 상태였지만, 이제는 배우지 못한 선택자나 효과를 만나거나 효과가 필요할 때 무엇을 모르는지 아는 상태가 되었다.
• 무엇을 모르는지 안다면 검색, 질문 등과 같이 궁금증을 풀 수 있다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=nC2-nJEXL2U

 

 

 

---

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---