CSS는 왜 등장했을까?
과거 웹으로 정보를 전달하기 위한 수단으로 HTML이 탄생하였고 HTML만을 이용해도 정보를 전달할수는 있지만 웹페이지를 좀더 아름답게 하고자 하는 이유때문에 탄생했습니다.
HTML에 디자인을 변경하는 방법으로는 HTML 태그에 존재하는 속성을 이용하는 방법도 있지만 늘어가는 디자인 요구사항을 충족시키기에는 한계가 있습니다. 때문에 HTML과 HTML 스타일을 담당하는 코드를 분리하여 작성하게 되었으며 HTML을 담당하는 코드를 CSS(Cascading Style Sheet)라고 합니다.
적용방법
인라인 방식
HTML 태그 내에 직접 스타일을 지정하는 방식
<p style="color:red;"> 이 문단의 글자 색상은 빨강색으로 표시됩니다.</p>
임베디드 방식
내부 스타일 시트(Internal Style Sheet) 라고도 불립니다.
HTML 문서 내에서 <head> 와 </head> 사이에 스타일을 정의합니다.
한 문서에만 스타일을 지정할 때 사용하면 편리합니다.
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {font-size:9pt;}
</style>
</head>
외부 파일 방식
외부 스타일 시트(External Style Sheet) 라고도 불립니다.
css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용합니다.
HTML이 작성된 문서와 스타일을 파일별로 분리해 관리할수 있고 또한 홈페이지 전체에 스타일을 일관되게 유지하면서 변경이 용이하다는 장점이 있습니다.
<link rel="stylesheet" type="text/css" href="mystyle.css">
CSS의 기본 구조
div {
width: 960px;
}
div : 선택자
width : 속성
960px : 값
선택자
선택자는 스타일을 적용하고자 하는 HTML 요소를 말합니다.
예를들면 #first 는 first라는 ID를 가진 HTML 요소를 뜻합니다.
선택자 종류
태그 선택자
span { color: #000;} div {color: #000 };
클래스 선택자
.classname { color: #000; }
id 선택자
#id {color: #000; }
객체 상속 선택자
ul #id a {
background-color: #00f;
color: white;
}
ul태그의 하위 요소중 #id를 가진 요소의 하위요소중 a태그를 가진 요소에게 스타일을 지정합니다.
다중조건 선택자
AND 연산
div#id {color: #000; }
OR 연산
div, #id { color: #000; }
인접 선택자
연속적으로 속해 있는 요소인 경우에만 선택하는 방법, 제목 바로 아래 문단에만 특정 스타일을 적용하는 경우에 유용합니다.
h2 + p: first-letter {
color: #000;
}
h2요소 바로뒤에 p 요소가 위치한경우 첫번째 글자에 대해서만 컬러를 다르게 입히는경우
가상클래스 선택자
a: first-child {
color: #000;
}
a태그의 하위 요소들중 첫번째 요소를 선택
동적 선택자
사용자의 인터렉션에 따라 서로 다른 스타일을 지정할 수 있게 해주는 선택자
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스 되었을 때 (input 태그 등)
a:link {
color: red;
}
a:visited {
color: orange;
}
a:hover {
background-color: rgb(255, 214, 255);
}
a:active {
background-color: rgb(255, 214, 255);
}
a:focus {
background-color: rgb(255, 214, 255);
}
중요구문 선택자
외부 라이브러리나 강제로 CSS를 적용해야 할 때 유용합니다.
!important 선택자는 CSS로딩 순서와 상관없이 무조건적인 적용이 되도록 해줍니다.
!important #id {
color: #000;
}
See the Pen Untitled by lurutia (@lurutia) on CodePen.