공부정리_CSS(1~9강)

WEB2 CSS - 1. 수업 소개

웹이 처음 세상에 등장했을 때 HTML을 이용하면 전자 문서를 만들 수 있었다.

컴퓨터를 통해서 정보를 표현할 수 있게 된 것.

처음에는 HTML을 이용해서 문서를 만들 수 있게 된 것으로도

행복했지만 곧, 여러가지 불평들이 터져 나온다.

수많은 불만족 중에 우리 수업의 관심사는

웹페이지를 좀더 아름다우면서 보기 좋게 만드는 방법에 대한 불만족

출처 입력

WEB1에서 HTML만으로 만들어 준 웹페이지를 아름답게 꾸며 가면서 아름다움에 대한 우리의 욕망들을 하나씩 실현해 갈 것. 그 과정에서 CSS를 지배하는 쉽지만 가장 중요한 원리들을 살펴볼 것

또, 매우 자주 사용되는 효과들을 통계에 근거해서 공부

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

웹을 만든 사람들은 웹페이지를 아름답게 만드는 방법에 대한 깊은 고민에 빠짐.

HTML이라는 이미 있는 언어의 디자인과 관련된 새로운 태그를 추가하는 것과 디자인에 최적화된 완전히 새로운 언어를 만드는 것 중에서 어떤 것이 더 쉬운 것일까요?

HTML에 디자인에 대한 새로운 태그를 추가하는 것

웹브라우저를 만드는 사람들은 우선 쉬운 길을 선택하나 그 한계를 깨닫고, 근본적인 해결책을 찾음

= CSS라는 새로운 언어

한계가 있었던 방법

우리가 web1에서 HTML만으로 만든 웹페이지

처음에는 이렇게 색깔을 바꿀 수 있는 걸로도 괜찮았으나, 웹페이지가 많아지고 이 웹이라고 하는 기술이 중요해짐에 따라서 이런 방식의 한계를 느끼게 됨.

a 태그 ≠ font 태그

h1 태그≠ font 태그

h1 태그는 'WEB'이라고 하는 저 문자가 이 웹페이지에서 제목이다 라고 하는 중요한 정보.

바로 저러한 정보를 해석해서 검색엔진과 같은 시스템들이 우리가 필요한 정보를 찾아줌.

반대로, 여기 있는 font라고 하는 이 태그는 'WEB'에 대해서 어떤 정보도 가지고 있지 않다.

다만, 빨간색으로 표현해야 된다는 디자인을 나타낼 뿐

예를 들어서 시각 장애인분들이 봤을 때 의미가 없는 것은 정보가 아니라고도 여러분이 생각해볼 수 있다. 그래서 이 웹페이지라고 하는 이 소중한 어떠한 정보 안에 정보가 아니라고 할 수 있는 디자인에 대한 코드가 섞이면서 웹페이지가 정보로서의 가치가 현격하게 떨어지는 문제를 갖게 된다.

그리고 a 태그가 일억개일때 그리고 그 일억 개의 a 태그를 매일 매시간마다 바꿔야한다면 전자의 방식은 비효율적임

WEB2 CSS - 3. CSS의 등장

<!--이 텍스트는 나오지 않는다-->  
<!doctype html>
<html> 
  <head> 
    <title>web-css</title> 
    <meta charset="utf-8"> 
  <style>//CSS라는 새로운 언어의 문법
    /* style - "웹브라우저야, 이 태그 안쪽에 있는 내용은 CSS니까 
    넌 이것을 CSS라는 언어의 문법에 맞게 해석해서 처리해야 돼"*/
    a{ // { } -"웹브라우저야, 이 웹 페이지에 있는 모든 태그에 대해서..." color:black; }
  </style> 
  </head>
  <body> 
    <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>
    <h2>html</h2> 
  </body>
</html>

'코딩을 어떻게 할까?'

유일하게 얘기하는 '잘하는' 방법 중의 하나는 중복의 제거

유지보수를 훨씬 더 편리하게 할 수 있다는 것

그리고 가독성도 훨씬 더 높아진다는 것

CSS라는 기술이 등장하면서 우리가 얻을 수 있는 폭발적 효과는 웹페이지를 디자인할 때 HTML을 이용해서 디자인하는 것보다 훨씬 더 효과적이 될 수 있다는 것이고 이것이 우리가 CSS를 사용하는 매우 중요한 이유라는 것을 기억하자.

이 웹페이지의 이 코드는 이전에 있었던 코드와 비교했을 때 디자인과 관련된 코드는 단 한 줄도 들어 있지 않다

대신에 디자인과 관련된 코드는 스타일이라고 하는 이 태그 안에 갇혀 있게 된다

그럼 웹페이지를 해석하는 여러 가지 기계들은 디자인과 관련된 것이 필요 없다면 이 부분은 무시하고 정보만을 가지고 있는 이 코드를 분석해서 여러 가지 작업을 각자의 의도에 맞게 작업할 수 있겠죠

바로 이것이 CSS라는 언어가 도입된 정말 중요한 이유

첫 번째, HTML은 너무나 중요하기 때문에 HTML이 정보에 전념하게 하기 위해서

HTML로부터 디자인에 대한 기능을 뺏어온 것이 바로 CSS.

두 번째는 CSS를 통해서 웹페이지를 디자인하는 것이 HTML을 통해서 디자인하는 것보다 훨씬 더 효율적이기 때문에

WEB2 CSS - 4. CSS의 기본 문법

<!doctype html> 
<html> 
  <head>
    <title>web-css</title>
    <meta charset="utf-8"> 
  <style>
    a{ color:black; }
  </style>
  </head>
  <body> 
    <h1><a href="index.html">web</a></h1>
    <ol> 
      <li><a href="1.html">html</a></li> 
      <li><a href="2.html" style="" >css</a></li>//직접 태그 style은 html의 속성이다.
      <li><a href="3.html">javascript</a></li>
    </ol>
    <h2>html</h2> 
  </body>
</html>

직접 태그 style(선택자가 필요없음)은 html의 속성이다.

a{ } ->누구에게 효과를 줄 것인지 말해주는 : 선택자(selector)라고함

color: black; ->효과, 선언(declaration)

웹 페이지에 CSS를 삽입하는 방법으로 style 태그와 style 속성을 쓰면 된다는 것과

그리고 효과라는 것이 있다는 것

그리고 효과를 하나의 선택자에 대해서 여러 개의 효과를 지정할 수 있는데

그 경우에는 세미콜론으로 구분한다.

WEB2 CSS - 5. 혁명적 변화

< 앞으로 해야할 일 >

1. 이 CSS를 통해서 웹페이지를 디자인하는 어떠한 Property가 존재하는가?

2. 그 효과를 더 정확하게 선택해서 지정하기 위해서 다양한 선택자를 알아가는 것

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

css 속성 검색하는 방법

예시)

폰트 크기 'css text size property' 검색

글 정렬 'css text center property' 검색

' Property Value' 검색

WEB2 CSS - 7. CSS 선택자의 기본

CSS를 지배하는 두 가지 중요한 토대

첫번째, 효과

두번째, 선택자

모든 링크는 기본적으로 검은색, 그리고 사용자가 방문했던 이 각각의 글들은 회색, 그리고 현재 페이지는 빨간색으로 하겠다.

<!doctype html>
<html> 
  <head>
    <title>web-css</title>
    <meta charset="utf-8">
  <style>
    a{ color:black; }
    .saw{ color:gray; }
    .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> 
    </ol> 
    <h2>html</h2> 
  </body> 
</html>

class라는 저 속성의 값은 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분한다.

하나의 태그에는 여러 개의 속성이 들어올 수 있고, 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.

그러나 위는 좋은 태그가 아님.

<!doctype html> 
<html> 
  <head> 
    <title>web-css</title>
    <meta charset="utf-8">
  <style>
    a{ color:black; } 
    .saw{ color:gray; }
    #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>
    <h2>html</h2>
  </body> 
</html>

즉 ID 선택자와 클래스 선택자가 붙으면 ID 선택자가 이긴다는 것과

클래스 선택자와 태그 선택자가 붙으면 클래스 선택자가 이긴다는 것

ID의 핵심은 중복돼서는 안 된다

즉 active를 썼기 때문에 문서의 다른 데서는 id 값이 active가 나오면 안됨. 즉, 유일무이한 값

태그 선택자가 여기 있는 ID 선택자보다 훨씬 더 포괄적

그래서 이 CSS를 만든 사람들은 좀 더 포괄적인 것보다 좀 더 구체적인 것을 포괄적인 것보다 우선순위를 높임

WEB2 CSS - 8. box 모델

화면 전체를 쓰는 태그들은 'block level element'

(element는 태그랑 똑같은 말)

자기 자신의 부피, 콘텐츠 크기만큼을 갖는 태그 'inline element'

'어떤 태그는 화면 전체를 쓰고, 어떤 태그는 부분을 쓴다' 라는 것을 이해하는 것이 중요

block level element라고 하더라도 inline element처럼 자신의 부피만큼을 쓰게 할 수도 있음

<style> 
  a{ color:black; display:block; }
  .saw{ color:gray; display:inline; }
  #active{ color:red; }
</style>

즉 block level element와 inline element는

display라는 속성의 기본값일 뿐

그 기본값은 CSS를 통해서 언제든지 바꿀 수 있다.

선택자 중복은 콤마로 묶기, border는 테두리, width는 가로값,

padding은 안쪽 여백, margin은 바깥쪽 여백, display로 태그가 가진 속성값을 변경할 수있다.

개발자도구 이용해서 살펴보기

WEB2 CSS - 9. box 모델 써먹기

[실습]해보기

'생활코딩 > css' 카테고리의 다른 글

공부정리_CSS(10~15강) (0)	2021.09.12

Sharon Kim의 프로그래밍 노트

공부정리_CSS(1~9강)

'생활코딩 > css' 카테고리의 다른 글

티스토리툴바

공부정리_CSS(1~9강)

'생활코딩 > css' 카테고리의 다른 글

관련글

티스토리툴바