CSS

CSS

목차

• CSS
  • 목차
  • CSS의 기본 특징
  • rule set 구조(간단히 rule)
  • 속성-박스
  • body 외부 정렬하기 ___

    CSS의 기본 특징

• CSS (Cascading Style Sheets)
• 웹페이지를 꾸미려고 작성하는 코드
• CSS는 Style sheet 언어
  • CSS는 프로그래밍 언어도 아니고, 마크업(markup) 언어도 아님

rule set 구조(간단히 rule)

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

• 선택자(selector) : p
• 선언 : color: red
• 속성(property) : color
• 속성 값 : red
• 특징
  • 각각의 rule은 {}(중괄호)로 감싸져야 함
  • 각각의 선언 안에서, 속성과 값을 구분하기 위해 :(콜론)을 사용
  • rule 안에서 각 선언을 구분하기 위해 선언 오른쪽 끝에 ;(세미콜론)을 사용
• 여러 요소 선택하기

  p,li,h1 {
  color: red;
  }
  

• 선택자의 종류

선택자	내용	예시
요소 (태그, 타입)	특정 태그를 가진 모든 요소	p
아이디(id)	특정 아이디를 선택	#my-id
클래스(class)	특정 클래스를 가진 모든 요소	.my-class
속성	요소의 특정 속성	img[src]
Pseudo	요소의 특정 상태를 선택	a:hover

속성-박스

• padding : 컨텐트 주위의 공간 (예, 문단 글자의 주위)
• border : padding 의 바깥쪽에 놓인 실선
• margin : 요소의 바깥쪽을 둘러싼 공간
• width : 요소의 너비
• background-color : 콘텐츠와 padding 의 배경 색
• color : 한 요소의 콘텐츠 색 (일반적으로 글자색)
• text-shadow : 한 요소 안의 글자에 그림자를 적용
• display : 요소의 표시 형식

body 외부 정렬하기

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}