CSS Tutorial:

룰루루 2021. 3. 24. 14:07

2021. 3. 24. 14:07

0. CSS 소개

HTML과 CSS의 관계에 대해 배우던 중 이런 글을 보았다:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file

CSS가 HTML 문서에 적용될 수 있는 3가지 방법에 대한 글이다.

1) Inline 방법은 개별 HTML 요소에 style '속성'을 지정하는 방법,

2) Internal 방법은 <style> 태그를 사용하는 방법으로, {}을 사용해서 <p>, <h1> 등 '태그'별로 스타일을 할당할 수 있다.

3) External 방법은 <link> 태그로 외부 파일을 끌어오는 방법인데, CSS 언어를 알아야만 사용가능한 방법이다.

: 실제로 화려한 웹사이트를 보면 대부분 이 방법을 사용해서 적용할 수 없었던 게 아쉬웠다. 이번에 CSS를 배우면서 적용해 보려고 한다!

* ctrl + O 키를 누르면 사용중인 브라우저에서 내 컴퓨터의 파일을 불러올 수 있다.

1. HTML과 CSS를 연결하는 방법 : style

style : HTML의 태그/속성이고 이제부터 CSS 문법이 사용된다는 것을 알려준다.

1) style 속성

: HTML의 문법에서 style 이라는 '속성'이 있다.

이때 안쪽의 color:skyblue 부분은 CSS 문법이고, 나머지는 HTML 문법이다.

    <h2 style="color:skyblue">Dobby is free!</h2>
    <h2 style="color:skyblue">Dobby is free!</h2>
    <h2 style="color:skyblue">Dobby is free!</h2>

2) style 태그

: HTML의 태그 중 style 태그가 있다.

이 태그에 둘러싸인 부분에서 CSS 문법이 사용된다는 것을 알려주는 역할을 한다.

장점1: 1) 과 똑같은 결과물이 나오지만, <style> 태그는 특정 태그가 반복될 때 태그별로 다른 서식을 적용시킬 수 있다. 태그가 많을 때 효율적이다.

장점2: <style> 태그는 <head> 태그 안에서 본문의 부연설명으로 쓰인다. 코드상 디자인과 정보 기능을 더 잘 분리시켜서 보여줄 수 있다.

<html>
  <head>
    <style>
      h2 {color:skyblue}
    </style>
  </head>
  <body>
    <h2>Dobby is free!</h2>
    <h2>Dobby is free!</h2>
    <h2>Dobby is free!</h2>
  </body>
</html>

2. CSS의 문법 (1) : Selector(선택자) 와 Declaration(선언)

ex)

h2 는 Selector(선택자)이고 디자인 설정을 받을 개체이다.

{ } 안의 부분은 Declaration(선언)이고 Selector에 적용될 디자인 설정이다.

color , text-decoration 부분은 property(속성)이며 Declaration 안의 구체적인 요소들을 의미한다.

skyblue , underline 부분은 value(속성값)이며 property에 할당되는 값이다.

: 은 property와 value를 구분한다.

; 은 각각의 declaration을 구분한다. (declaration이 하나이면 안 써도 된다)

그런데 태그 단위로 선언을 하고 싶지 않을 수도 있다.

ex) 여러 <li> 태그 중 하나만 다른 색으로 표시하고 싶을 때

=> 다른 종류의 Selector를 사용하면 된다.

사실 Selector에는 세 종류가 있다.

Tag Selector : 태그 단위로 선언할 때
ID Selector
Class Selector

1) ID Selector

: <style> 태그 안에서 ID를 정의한 뒤 따로 다른 선언을 하고 싶은 개체에 해당 ID를 입력하면 된다.

</style>

<h2 id="ping">Dobby is free!</h2>

# 뒤에는 ID 개체의 이름을 원하는 대로 정해서 입력하고, { } 안에 디자인 요소를 지정해 준다.

-> 해당 ID Selector를 사용하고 싶으면 해당 개체 속성에 id="Selector 이름" 이런 식으로 지정한다.

<html>
  <head>
    <style>
      #ping {
        color:#228B22 ; font-size: 30px
      }
      #dobby {
        background-color:LemonChiffon ; font-weight:bold
      }
    </style>
  </head>
  <body>
    <h1 id="ping">CSS</h1>
    <h1>CSS</h1>
      <h2>Dobby is free!</h2>
      <h2 id="dobby">Dobby is free!</h2>
  </body>
</html>

2) Class Selector

: <style> 태그 안에서 Class를 정의한 뒤 따로 다른 선언을 하고 싶은 개체에 해당 Class를 입력하면 된다.

ID Selector 와의 차이점이 무엇인가?

적용 방법은 거의 비슷하다. 다만 의미에 차이가 있다.

-Class : 여러 학생들을 구분할 때 '반'의 개념. 여러 개체를 '그룹화', '묶어서' 구분할 때 사용

-ID : 학생들 하나하나가 갖는 '고유한' 번호. 고유한 하나의 개체가 하나의 ID를 가짐.

=> Class Selector는 여러 번 사용 가능, ID Selector는 한 번만 사용 가능.

또한 class selector는 .dobby 이렇게 class 선언하기 전 . 을 찍는다.

<-> id selector는 #을 붙인다.

<html>
  <head>
    <style>
      #pping {
        color:#228B22 ; font-size: 30px
      }
      .dobby {
        background-color:LemonChiffon ; font-weight:bold
      }
    </style>
  </head>
  <body>
    <h1 id="pping">CSS</h1>
    <h1>CSS</h1>
      <h2>Dobby is free!</h2>
      <h2 class="dobby">Dobby is free!</h2>
      <h2>Dobby is free!</h2>
      <h2 class= "dobby">Dobby is free!</h2>
      <h2>Dobby is free!</h2>
      <h2 class= "dobby">Dobby is free!</h2>
        <h3>welcome</h3>
        <h3>welcome</h3>
  </body>
</html>

+) CSS에는 다양한 종류의 색깔이 있다.

: Colors Tutorial (w3schools.com) 여기서 색깔 이름을 볼 수 있다.

3. CSS의 문법 (2) : 부모-자식 선택자

ex) <ol>, <ul>, <li> 태그의 경우, <ol>과 <ul> 태그는 <li> 태그를 포함한다.

즉 태그간의 포함관계가 있을 때, 특정 부분의 스타일을 지정하려면 부모-자식 관계를 고려해야 한다.

부모-자식 관계를 고려해서 Style 지정할 수 있는 여러 가지 경우:

경우1) 특정 태그 안에 포함되는 다른 태그의 디자인 지정할 때

<html>
  <head>
    <style>
      ol li {
        border-style : solid ; border-color : Salmon ;
        border-radius : 6px ; border-width: 1px
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Window</li>
      <li>Mac OS</li>
      <li>Linux</li>
    </ol>
    <ul>
      <li>iPad</li>
        <ol>
          <li>iPad Air
            <ol>
              <li>iPad Air 3</li>
              <li>iPad Air 4</li>
            </ol>
          </li>
          <li>iPad Pro</li>
        </ol>
      <li>Galaxy Tabs</li>
      <li>Others</li>
    </ul>
  </body>
</html>

=> ol 태그 안에 포함된 li 태그의 경우라면 모두 해당 border 서식이 적용되었다.

경우2) 특정 태그의 바로 안에 포함되는 태그한테만 디자인 적용할 때

(아까는 A태그 안에 포함된 B태그라면 무조건 위의 디자인을 적용하는 경우였고,

지금은 A태그 바로 안에 B태그가 포함된 경우에만 위의 디자인 서식을 적용하는 경우이다.)

cf) 아까 : A태그 안에 C태그, 그 안에 B태그 포함되면 => 적용됨

지금 : A태그 안에 C태그, 그 안에 B태그 포함되면 => 적용 안 됨

** 만약 같은 종류의 태그인데 한쪽 태그에만 디자인을 적용하고 싶다면, id나 class Selector로 구분시켜 준다.

    <style>
      #tablet li {
        border-style : solid ; border-color : Salmon ;
        border-radius : 6px ; border-width: 1px
      }
    </style>

=> iPad Air 바로 아래의 <ol> 태그에만 id="tablet" 으로 ID Selector를 입력하였고, 이에 따라 해당 <ol> 태그 안에 속한 <li> 태그의 내용에만 디자인 서식이 적용되었다.

경우3) 여러 개의 태그에 같은 서식을 적용할 때

* 여러 태그가 포함관계에 있지 않아도 적용된다.

* A태그가 B태그를 포함하고 있는데 A태그에 서식이 적용되면 당연히 B태그에도 서식이 적용된다.

    <style>
       ul, ol {
        border-style : solid ; border-color : ForestGreen ;
        border-radius : 6px ; border-width: 3px
      }
    </style>

=> <ul> 태그와 <ol> 태그 모두 서식이 적용되었고, 둘 다 <li> 태그를 포함하고 있으므로 그 안의 <li>태그에도 개별적으로 서식이 적용되었다.

지금까지 상위 태그에만 적용한 속성이 하위 태그에도 적용된 것은 "상속" 이라는 개념 때문이다.

상속(Inheritance)

: 상위 태그(부모 태그) 에서 적용된 속성은 별다른 지시 없이도 하위 태그(자식 태그)에도 그대로 적용된다.

'front-side > CSS' 카테고리의 다른 글

6. 레이아웃 추가(심화)내용 (0)	2021.04.05
5. brackets ~ 레이아웃 기초 내용 (0)	2021.04.02
4. 타이포그래피-font ~ 조화 (0)	2021.04.01
3. 선택자 fin ~ 타이포그래피 (0)	2021.03.30
2. 선택자 (0)	2021.03.29

아스