HTML & CSS (3)

CSS 선택자

CSS 선택자란?

HTML 요소에 스타일을 적용하기 위해서는 우선적으로 해당 요소를 선택해야합니다. 이와 같이 요소를 섵개하기 위해서 선택자를 이용합니다. CSS에서는 태그, 클래스, 아이디 선택자를 제공합니다.

1. CSS 적용방법

• HTML 태그에 직접 적용

  해당 태그에 직접 기술하여 CSS를 적용합니다.

  형태

  <태그명 style="적용할 CSS코드"></태그명>

• HTML 문서 내부에서 적용

  해당 문서의 head태그안에 style 태그를 이용해서 CSS를 적용합니다.

  형태

  <style>
    CSS코드
  </style>

• HTML 문서 외부에서 적용

  해당 문서 외부에서 .css파일을 이용하여 CSS를 적용합니다. 이 방식을 사용하는 것이 좋습니다.

  형태

  <link href="css파일 경로" type="text/css" rel="stylesheet">

2. 스타일 기초 및 필수 선택자

• 전체 선택자(*)

  HTML문서의 모든 요소를 선택하기 위한 선택자입니다.

  형태

  <style>
      *{
          css코드
      }
  </style>

• 태그 선택자

  특정 태그를 선택할 때 사용합니다.

  형태

  <style>
      태그명{
          css코드
      }
  </style>

• 아이디 선택자

  HTML 태그에 아이디를 지정하고, 지정된 아이디의 태그를 선택하는 선택자입니다.
  샵(#)을 이용하여 아이디를 선택합니다.

  형태

  <style>
      #아이디명{
          css코드
      }
  </style>

• 클래스 선택자

  HTML 태그에 클래스를 지정하고, 지정된 클래스의 태그를 선택하는 선택자입니다.
  점(.)을 이용하여 클리스를 선택합니다.
  아이디는 하나만 존재해야하지만 클래스는 여러 개의 태그에 동일한 이름을 가질수 있습니다.

  형태

  <style>
      .클래스명{
          css코드
      }
  </style>

3. 알아두면 편리한 다양한 선택자

• 속성 선택자

  HTML 태그의 속성을 이용하는 선택자입니다.

  형태

  <style>
      /*태그속성을 이용하는 방법*/
      태그명[속성]{ 
          css코드
      }
      /*태그속성을 이용하는 방법*/
      태그명[속성=속성값]{
          css코드
      }
  </style>

• 링크 선택자

  a태그에 CSS속성을 적용할 때 사용합니다.

  형태

  <style> 
      /*다른 방식으로 사용할수도 있습니다.*/
      a:link::after {
          css코드
      }
  </style>

• 부정(:not) 선택자

  명시한 선택자들 외의 요소를 선택할 때 사용합니다.

  형태

  <style> 
      태그명:not(요소){
          css코드
      }
  </style>

• 문자 선택자

  문자의 특성속성을 이용해서 CSS를 적용할 때 사용합니다.

  종류

  :first-letter 선택자 : 첫 번째 문자를 선택할 때 사용합니다.
  :first-line 선택자 : 첫 번째 행을 선택할 때 사용합니다.

  형태

  <style> 
      p:first-letter{
          css코드
      }
      p:first-line{
          css코드
      }
  </style>

• 후손 선택자

  특정 html태그이 아래에 있는 모든 태그요소를 선택할 수 있다.

  형태

  <style> 
      태그명1 태그명2 {
          css코드
      }
  </style>

• 자손 선택자

  특정 HTML태그의 바로 아래에 있는 태그요소를 선택할 수 있다.

  형태

  <style> 
      태그명1 > 태그명2{
          css코드
      }
  </style>

• 동위 선택자

  HTML태그 계층구조를 고려하여 동등한 위치에 있는 태그요소를 선택합니다.

  형태

  <style> 
      /*~은 동등한 위치에 있는 모든 태그선택*/
      태그명1~태그명2{
          css코드
      }
      /*~은 동등한 위치에 있는 태그 중 첫번째로 나온 태그선택*/
      태그명1+태그명2{
          css코드
      }
  </style>

• 반응 선택자

  웹 사이트를 이용하는 사용자의 반응에 따라 HTML태그 요소를 선택합니다.

  형태

  <style> 
      /*hover는 마우스가 태그 위에 올라갔을때 선택합니다.*/
      태그명:hover{
          css코드
      }
  </style>

• 상태 선택자

  HTML태그 요소의 상태에 따라서 선택합니다.

  형태

  <style>
      /*초점이 맞추어진 상태를 말합니다.*/
      태그명:focus{
          css코드
      }
      /*input태그중 checked상태를 말합니다.*/
      태그명:checked{
          css코드
      }
  </style>

CSS 속성

CSS 속성이란?

선택자를 이용해서 HTML 요소를 선택한 후, 적절한 속성을 적용합니다. 속성과 속성값을 구분할때 콜론(:)을 사용합니다.

1. 가시 속성

• 단위

  px

  절대적으로 속성의 크기를 설정합니다. 16px이 디폴트값입니다.

  em

  상대적으로 속성의 크기를 설정합니다. 1.0em이 디폴트값이고 2.0em이면 2배, 0.5em은 0.5배입니다. 여러 디바이스 환경이 있기 때문에 em을 많이 사용하게 되었습니다.

  pt

  절대적으로 속성의 크기를 설정합니다.

  %

  상대적으로 속성의 크기를 설정합니다.

• display 속성

  display

  HTML요소를 화면에 출력하고 제거하는 스타일 속성입니다.

  속성

  none : 브라우저 화면에서 HTML요소를 제거합니다.
  block : HTML요소를 block타입으로 출력합니다.
  inline : HTML요소를 inline타입으로 출력합ㄴ다.
  inline-block : 기본적으로 inline속성과 동일하고, 넓이와 높이를 가질 수 있습니다.

• visibility 속성

  visibilty

  display 송성과 비슷한 기능을 하며, 태그의 가시성을 결정합니다.

  속성

  visible : HTML요소를 출력합니다.
  hidden : HTML요소를 출력하지 않습니다.
  collapse : 겹치도록 지정합니다.
  inherit : 부모 요소의 값을 상속받습니다.

• opacity 속성

  HTML요소의 투명도를 조절할 수 있습니다.
  0.0 부터 1.0까지 투명도를 조절합니다.

2. 레이아웃 관련 속성

• width과 height

  태그 요소의 가로와 세로 크기를 설정할 수 있습니다.

• margin

  margein

  태그요소의 외각 여백을 설정할 수 있다.

  사용법

  태그명{
      /*top/right/bottom/left 중에서 선택해서 사용합니다.*/
      margin-top/right/bottom/left: 픽셀;
      /*margin만 사용할 시*/
      margin: 픽셀; /*상하좌우 픽셀만큼 여백을 줍니다.*/
      margin: 픽셀1 픽셀2; /*상하 픽셀1만큼 좌우 픽셀2만큼 여백을 줍니다.*/
      margin: 픽셀1 픽셀2 픽셀3; /*위쪽에 픽셀1만큼 좌우에 픽셀2만큼 아래쪽에 픽셀3만큼 여백을 줍니다.*/
      margin: 픽셀1 픽셀2 픽셀3 픽셀4; 
      /*위 픽셀1만큼 오른쪽 픽셀2만큼 아래쪽 픽셀3만큼 왼쪽 픽셀4만큼 여백을 줍니다.*/
  }

• padding

  padding

  태그요소의 내부 여백을 설정할 수 있습니다.

  사용법

  태그명{
      /*top/right/bottom/left 중에서 선택해서 사용합니다.*/
      padding-top/right/bottom/left: 픽셀;
      /*margin만 사용할 시*/
      padding: 픽셀; /*상하좌우 픽셀만큼 여백을 줍니다.*/
      padding: 픽셀1 픽셀2; /*상하 픽셀1만큼 좌우 픽셀2만큼 여백을 줍니다.*/
      padding: 픽셀1 픽셀2 픽셀3; /*위쪽에 픽셀1만큼 좌우에 픽셀2만큼 아래쪽에 픽셀3만큼 여백을 줍니다.*/
      padding: 픽셀1 픽셀2 픽셀3 픽셀4; 
      /*위 픽셀1만큼 오른쪽 픽셀2만큼 아래쪽 픽셀3만큼 왼쪽 픽셀4만큼 여백을 줍니다.*/
  }

3. 태두리 관련 속성

• box-sizing

  box-sizing

  border-box와 content-box 속성값을 이용하여 태두리의 위치를 태그요소의 내부또는 외부로 위치할수 있습니다.

  사용법

  태그명{
      box-sizing: border-box;
      /*border-box는*/
      box-sizing: content-box;
      /*content-box는*/
  }

• border

  border

  태그의 테두리를 설정할 수 있습니다.

  사용법

  태그명{
      border-width: 픽셀; 
      /*테두리의 두께를 설정합니다.*/
      border-style: 테두리 스타일; 
      /*테두리 스타일을 설정합니다. 실선(solid) 점선(dashed) 점(dotted)*/
      border-color: 색깔; 
      /*테두리의 색깔을 설정합니다.*/
      border-radius: 픽셀1 픽셀2 픽셀3 픽셀4 
      /*좌상단부터 모서리를 둥글게 합니다.(시계방향으로 설정)*/
      border: 테두리 두께 테두리 스타일 테두리 색깔;
      /*한번에 설정가능합니다.*/
  }

4. 배경관련 속성

• background

  background image

  태그요소에 배경 이미지를 지정할 수 있습니다.

  사용법

  태그명{
      background-image: url('이미지 경로')
      /*이미지 가져오기*/
      background-size: 100%
      /*이미지 사이즈 조절*/
      background-repeat:no-repeat
      /*이미지를 반복해서 넣을지 결정, x-repeat는 한 행만 반복, y-repeat는 한 열만 반복*/
      background-attachment:fixed
      /*배경 이미지의 스크롤 여부를 결정
        scroll : 선택한 요소와 같이 움직입니다. 스크롤하면 배경이미지는 스크롤되지 않습니다.
        fixed : 움직이지 않습니다.
        local : 선택한 요소와 같이 움직입니다. 스크롤하면 배경 이미지도 스크롤됩니다.*/
  }

5. 폰트 관련 속성

• font-size, font-family

  font-size

  폰트의 크기를 설정합니다.

  사용법

  태그명{
      font-size: 크기;
  }

  font-family

  폰트를 설정합니다. 폰트가 없으면 브라우저 기본 폰트가 사용됩니다.

  사용법

  태그명{
      font-family: 폰트 서체;
  }

• font-style, font-weight, line-height

  font-style

  폰트의 이택릭체를 설정할 수 있습니다.

  사용법

  태그명{
      font-style: ltalic;
  }

  font-weight

  폰트의 볼드체를 설정할 수 있습니다.

  사용법

  태그명{
      font-weight: bolder;
  }

  line-height

  행간 설정을 할 수 있습니다.

  사용법

  태그명{
      line--height: 픽셀;
  }

• text-align, text-decoration

  text-align

  폰트의 정렬을 설정할 수 있습니다.

  사용법

  태그명{
      text-align: right/left/center;
  }

  text-decoration

  폰트의 표시를 설정할 수 있습니다.

  사용법

  태그명{
      /*none은 a태그의 텍스트 밑줄을 없앨때 많이 사용합니다.
        underline은 텍스트에 밑줄을 만들때 사용합니다.     */
      text-decoration: none/underline;
  }

6. 위치 관련 및 알아두면 편리한 속성

• position 속성

  태그 요소의 위치를 설정합니다. top, bottom, left, right 속성을 함께 사용하여 좌표를 지정해 줍니다.

  position 속성의 속성값

  static : 다른 태그와의 관계에 따라 자동으로 배치되며 임의로 설정할수 없습니다.
  absolute : 정대좌표를 이용해서 위치를 설정합니다.
  relative : 기본 위치를 기준으로 설정한 만큼 이동합니다.
  fixed : 브라우저의 절대좌표를 기준으로 설정됩니다. 스크롤을 내리거나 올렸을때 그자리에 고정되어 있습니다.

  사용법

  태그명{
      position: static/absolute/relative/fixed;
      top: 픽셀;
      left: 픽셀;
      bottom: 픽셀;
      right: 픽셀;
  }

• z-index 속성

  어느 객체가 앞으로 나오고 뒤에 나올지 배치 순서를 결정하는 속성입니다.

  z-index 속성의 속성값

  auto : 기본값으로 z-index를 지정하지 않은 것과 같음
  number(숫자) : 숫자가 낮을수록 뒤에 배치되고 높을수록 앞에 배치 됩니다.

• overflow 속성

  내용이 태그 요소의 크기보다 클 때 설정할 수 있습니다.

  overflow속성의 속성값

  hidden : 내용이 태그 요소보다 클 때 넘치는 부분을 화면상에서 안보여줍니다.
  scroll : 내용이 태그 요소보다 클 때 태그요소에 스크롤을 만듭니다.

• float 속성

  HTML요소의 위치를 설정하는 속성, 주로 레이아웃을 설정할 때 사용합니다.
  float속성이 선언된 태그 아래에 있는 태그에도 영향을 줍니다. 따라서 float의 영향을 없애기위해 clear속성을 사용합니다.

• 그림자 속성

  text-shadow

  태그요소에 그림자를 만들어줍니다.

• 그라디언트

  2가지 이상의 색을 표현할 때 사용되는 속성입니다.

7. 변형 속성

• Transition 관련 속성

  transition-duration

  몇 초 동안 변형될지를 설정합니다.

  transition-delay

  몇 초 후에 재생될지를 설정합니다.

  transition-property

  변형이 적용되는 속성을 설정합니다.

  transition-timing-function

  변형과 관련된 함수를 설정합니다
  in : 변형되는 속도가 빨라집니다.
  out : 변형되는 속도가 느려집니다.

• Animation 관련 속성

  animation-duration

  몇 초 동안 애니메이션 될지를 설정합니다.

  animation-delay

  몇 초 후에 애니메이션 될지를 설정합니다.

  animation-name

  애니메이션의 이름을 설정합니다.

  animation-timing-funnction

  애니메이션과 관련된 함수를 설정합니다.

8. 초기화

초기화란

CSS를 작성하면서 가장 먼저하는 작업입니다. 기본적인 설정(margin, padding, font, ...)등을 미리 설정해 두고 사용하는 것입니다.
많이 사용하는 초기화 관련 스타일 중 Normalize.css는 브라우저간의 스타일을 동일하게 유지해주고 있습니다.

CSS 규칙

1. @import 규칙

CSS파일에 또 다른 CSS파일의 설정을 사용하기 위한 규칙입니다.

규칙

link를 대신할 수 있습니다.
style 태그 내부에 위치해야 합니다.
style 태그 상단에 위치해야 합니다.

사용방법

<style>
  @import url('CSS 파일명')
  /*<link rel="stylesheet" href="CSS 파일명">*/
</style>

2. @media 규칙

하나의 HTML 문서를 다양한 장치에서 서로 다르게 CSS를 설정할 수 있는 기능을 제공합니다.
link태그 대신 @media규칙을 이용하여 상황에 따른 CSS를 적용하는 방법입니다.

미디어 종류

all : 모든 미디어 타입
aural : 음성 합성 장치
braille : 전자 표시 장치
handheld : 손으로 들고다니면서 볼 수 있는 작은 스크린에 대응하는 용도
print : 인쇄용도
projection : 프로젝터 표현 용도
screen : 컴퓨터 스크린을 위한 용도
tv : 음성과 영상이 동시 출력되는 TV와 같은 장치
embossed : 페이지에 인쇄된 점자 표지 장치

3. 웹 폰트

웹 폰트란?

인터넷만 연결되어 있다면, 다양한 폰트를 웹사이트 방문자에게 제공할 수 있도록 고안된 폰트입니다.