2022-05-19
CSS 시작하기 1
참고한 사이트
CSS란?
Cascading Style Sheet
CSS는 프로그래밍 언어도, 마크업 언어도 아니다. Style Sheet(이하 스타일시트 언어)이다.
스타일 시트 언어란, Html 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말과 같다.
극단적으로, html 페이지의 모든 문단 요소들의 색깔을 빨갛게 바꾸려고 한다면, 다음 코드를 작성할 것이다.
p {
color: red;
}
실습하기.
- 위의 코드 세 줄을 복사해서, styles 디렉토리에 style.css로 파일을 저장한다.
- html 파일을 하나 만든다.
나는 html 시작하기 3에서 만들었던 html을 그대로 이용하였다.
- html 의 head 태그 사이에 코드를 추가한다.
<link href="C:/Users/user/Desktop/styles/style.css" rel="stylesheet" type="text/css">
- 링크는 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;
}
선택자의 여러 종류
- 요소 선택자 (타입 선택자)
특정 타입의 모든 Html 요소.
ex p (< p >를 선택)
- 아이디 선택자
특정 아이디를 가진 페이지의 요소.
ex #my-id (my-id를 가진 요소 선택)
- 클래스 선택자
특정 클래스를 가진 페이지의 요소
ex .my-class (페이지의 클래스가 같은 요소 모두 선택)
- 속성 선택자
특정 속성을 갖는 페이지의 요소.
ex img[src] (< img src="myimage.png" > 를 선택하지만 < img > 는 선택 안함)
- 수도(Pseudo) 클래스 선택자
특정 요소가 특정 상태에 있을때.
ex a:hover
< a > 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함
더 많은 요소는 선택자 가이드에서 확인이 가능하다.
오늘은 여기까지.
페이지 맨 위로 돌아가기