웹 페이지의 스타일을 정의하는 CSS 배우기

CSS 개요

• 웹 페이지의 디자인을 구성
• CSS는 HTML 요소들이 어떻게 보이는가를 정의하는 스타일 시트 언어
• W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어
• HTML만으로 웹 페이지를 만들 경우, 세부 스타일을 각각 따로 설정하므로 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들다는 단점을 CSS를 통해서 해결
• CSS는 별도 파일로 웹 페이지의 스타일을 저장할 수 있고, 사이트의 전체 스타일을 쉽게 제어/변경 가능

CSS 구성 요소

• 선택자(selector) : 스타일을 적용할 대상 지정
• 속성명(property) : 속성의 이름
• 속성값(value) : 속성에 적용할 값
• 선택자 {속성명 : 속성 값; } 과 같이 사용하여 스타일 적용

p {
  color: purple;
  text-align: center;
}

CSS 적용 방법

• 인라인 스타일 : HTML 요소의 여는태그에 style 속성으로 지정
• 내부 스타일 : 같은 HTML 문서 내부에 <style>태그를 사용하여 지정
• 외부 스타일 : HTML 문서와는 별개의 파일로 style을 지정

인라인 스타일(inline style)

<p style="color: red; background-color: yellow">인라인 스타일</p>

내부 스타일(internal style)