CSS 시작하기 (1)

Saimachi·2022년 5월 19일
0

CSS

목록 보기
1/1

2022-05-19
CSS 시작하기 1

  • 참고한 사이트
  • CSS란?

    Cascading Style Sheet

    CSS는 프로그래밍 언어도, 마크업 언어도 아니다. Style Sheet(이하 스타일시트 언어)이다.
    스타일 시트 언어란, Html 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말과 같다.
    극단적으로, html 페이지의 모든 문단 요소들의 색깔을 빨갛게 바꾸려고 한다면, 다음 코드를 작성할 것이다.

    p {
    	color: red;
    }

    실습하기.

    1. 위의 코드 세 줄을 복사해서, styles 디렉토리에 style.css로 파일을 저장한다.
    2. html 파일을 하나 만든다.
      나는 html 시작하기 3에서 만들었던 html을 그대로 이용하였다.
    3. html 의 head 태그 사이에 코드를 추가한다.
    <link href="C:/Users/user/Desktop/styles/style.css" rel="stylesheet" type="text/css">
    1. 링크는 style.css를 저장한 위치를 정확하게 지정해준다.

    html 창을 열면, 이런 식으로 출력되게 된다.

    CSS의 ruleset 해부

    • 전체 구조를 rule set이라 부른다.
    • Selector : 선택자
      rule set의 맨 앞에 위치하는 hrml 요소의 이름.
      어떤 요소를 꾸밀 것인지 결정한다.
    • 선언 : color:red와 같은 단일 규칙,
      꾸미려고 원하는 요소의 속성을 명시
    • 속성 (property) : 주어진 html 요소를 꾸미려는 방법. rule 내에서 영향을 줄 속성을 선택.
    • 속성 값 (property value) : 속성의 오른쪽, 콜론 뒤에 붙어서 속성의 값 중 하나를 가진다.
    • 각각의 rule set은 반드시 {}로 감싸져야 한다.
    • 각각의 선언 속에, 각 속성을 해당 값과 구분하기 위해 콜론(:)을 사용해야 함.
    • 각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론(;)을 사용해야만 함.
    ex code)
    p {
      color: red;
      width: 500px;
      border: 1px solid black;
    }

    여러 요소 선택하기

    ex code)
    p,li,h1 {
      color: red;
    }

    선택자의 여러 종류

    1. 요소 선택자 (타입 선택자)
      특정 타입의 모든 Html 요소.
      ex p (< p >를 선택)
    2. 아이디 선택자
      특정 아이디를 가진 페이지의 요소.
      ex #my-id (my-id를 가진 요소 선택)
    3. 클래스 선택자
      특정 클래스를 가진 페이지의 요소
      ex .my-class (페이지의 클래스가 같은 요소 모두 선택)
    4. 속성 선택자
      특정 속성을 갖는 페이지의 요소.
      ex img[src] (< img src="myimage.png" > 를 선택하지만 < img > 는 선택 안함)
    5. 수도(Pseudo) 클래스 선택자
      특정 요소가 특정 상태에 있을때.
      ex a:hover
      < a > 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함

    더 많은 요소는 선택자 가이드에서 확인이 가능하다.

    오늘은 여기까지.

  • 페이지 맨 위로 돌아가기
  • 0개의 댓글