1. CSS의 구성
1) CSS 선언 방법
span {
color : red;
}- span : selector(선택자)
- color : property
- red : value
2) style을 HTML페이지에 적용하는 3가지 방법
1. inline
HTML 태그 안에다가 적용, 다른 CSS파일에 적용한 것보다 가장 먼저 적용된다.
<p style="border:1px solid gray;color:red;font-size:2em;">
2. internal
style 태그로 지정, 구조와 스타일이 섞이게 되므로 유지보수가 어렵다.
별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body>
3. external
외부파일(.css)로 지정하는 방식, CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋다.
현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 한다.
internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만든다.
이후에 아래처럼 link태그로 추가하면 된다.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>...</div>
</body>
</html>
2. CSS 상속
상위에서 적용한 스타일은 하위에도 반영된다.
이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.
하지만, 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생긴다.
예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓이를 가져버리게 되는 것
그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이
크기와 배치 관련된 속성들은 하위 엘리먼트로 상속이 되지 않는다.
실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body > div {
color : dodgerblue;
font-size : 15px;
/*padding, border 배치 관련 속성은 상속을 받지 않는다.*/
border : 2px solid slategray;
padding : 30px;
}
</style>
</head>
<body>
<div>
<span>my text is upper</span>
<ul>
<li>
<span>my text is upper</span>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
결과
3. Cascading
만약 inline으로 정의했는데, CSS 파일에서 또 정의를 해놓는 것 처럼 똑같은 속성을 중복 사용할 수 있다.
그러면 어떤 것을 기준으로 스타일을 최종적으로 반영을 하는 것일까?
그건 브라우저가 하는 일이지만, 개발자들이 규칙을 만들고 브라우저가 그 규칙에 따라 처리할 수 있도록 한다면
우리는 미리 규칙을 확인해 볼 필요가 있다.
결론적으론 Cascading은 선택자에 적용된 많은 스타일 중 어떤 스타일로 브라우저에 표현할지 결정해주는 것이다.
선언방식
선언방식에 따라 inline > internal = external 순서로 적용된다.
- inline - html에서 해당하는 태그 부분에 직접 css 속성을 주는 것
- internal - html의 head 부분에 <style> 태그를 선언하여 css 속성을 주는 것
- external - 별도의 css파일을 만들어서 <link> 태그로 연결해 html에 css 속성을 주는 것
라고 볼 수 있는데, internal과 external의 경우 코드의 위치에 따라 어떤 스타일이 반영될 지 모른다.
즉, 같은 선택자(selector)라면 나중에 선언한 것이 반영된다는 점.
CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 알아야 한다.
<head>
<style>div { color:red; }</style>
<link rel="stylesheet" href="css.css"> <!--color:blue;라는 내용을 담고있는 css.css-->
</head>
<!--동일 선택자에서는 뒤에 나오는 external을 따라 색이 blue로 나오게 된다는 것.-->
추가로 선택자의 표현이 구체적인 것이 있다면 먼저 적용된다.
<style>
body > span {
color : red;
}
span {
color : blue;
}
</style>
<!--색상이 red로 적용된다.-->
ID > CLASS > ELEMENT 순으로 반영
<div id="a" class="b">
text....
</div>#a{
color : red; /* 적용되는 색상은 red */
}
.b{
color : blue;
}
div{
color : green;
}
요약하자면 inline > id > class > element(tag)로 볼 수 있다.
4. CSS Selector
HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법
element에 style 지정을 위한 3가지 기본 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
/*1. tag 지정*/
span {
color : red;
}
/*2. id 지정*/
#spantag {
color : blue;
}
/*3. class 지정*/
.spanClass {
color : green
}
</style>
</head>
<body>
<span>HELLO tag!</span>
<span id="spantag"> HELLO id! </span>
<span class="spanClass"> HELLO class! </span>
</body>
</html>
다양한 활용
- id, class 요소 선택자
#myid { color : red }
div.myclassname { color : red } /*element를 붙여 구체적으로 부여 가능*/
- 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)
h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }
- 요소 선택 (공백) : 자손 요소
아래 모든 span태그에 red색상이 적용
<div id="jisu">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>#jisu span { color : red }
- 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킨다.
아래는 span tag 2만 red 색상이 적용
#jisu > span { color : red }
- n번째 자식요소를 선택 (nth-child)
첫번째 단락에 red 색상이 적용
<div id="jisu">
<h2>단락 선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
<p>세번째 단락입니다</p>
<p>네번째 단락입니다</p>
</div>#jisu > p:nth-child(2) { color : red }
