1. 들어가기(개념, 선언 방식, 선택자) -바닥부터 시작하는 CSS-
1. CSS란 무엇인가?
HTML문서가 실제 화면에 표시되는 방법을 기술하는 언어이다.
스타일 선언은 위에서 아래로 순차적으로 적용이 되고, 마지막에 선언된 스타일이 우선순위를 갖는다.
2. CSS 선언 방식
1) in-line방식
해당 태그에 직접 적는 방식.
예)
<body>
<strong style=“font-size:14px; color:blue;”>이 글의 색과 크기를 지정</strong>
<span style=“color:red;”>이 글의 색을 red로</span>
<body>
2) internal 방식
HTML 문서에<style>태그로 선언. 보통 <head>안에 넣는 것이 정석이다.
예)
<head>
<style type="text/css">
h1 { font-size: 20px; }
strong { font-size: 16px; }
</style>
</head>
3) external 방식
CSS를 따로 파일로 저장한 후 불러오는 방식.
예)
<head>
<link rel="stylesheet" href="common.css" type="text/css“ />
<link rel="stylesheet" href=“main.css" type="text/css“ />
</head>
3. CSS 수치 단위
em, % (상대단위)
•브라우저의 기본 글꼴을 기준으로 1em = 100%
•브라우저 메뉴의 글꼴 크기 변화에 따라 유동적이다.
px, pt (절대단위)
•px(픽셀, 1px = 1dot) : 모니터의1 픽셀.
•pt (포인트, 1pt=1/72 인치)
-브라우저의 기본 글꼴을 기준으로 1em = 12pt = 16px = 100%
-상대 단위를 사용하면 접근성이 향상 되나, 단위 환산의 어려움과 스타일 수정 시 다양한 환경에서 일관적이지 못한 화면을 나타낼 문제가 있다.
-디자인 제작 시 기본 단위가 px로 이루어져, 다른 단위보다 빠르게 대응할 수 있는 px를 사용하는 것을 추천한다.
4. CSS 선택자(selector)
HTML에 스타일을 적용할 부분을 선택하게 해주는 역할을 한다.
선택자의 대표적인 종류 5가지.
1) 타입(엘리먼트/단순) 선택자
•HTML 태그를 지정하여 선언한다.
•동일한 속성을 ,(콤마)로 구분하여 선언 가능하다.
h1 {font-size:20px;}
ul {margin:0px;}
a {color:blue;}
p {text-decoration:underline;}
h1, h2 {color:blue;}
2) 하위 선택자
•특정 엘리먼트의 하위에 엘리먼트를 지정할 때 사용한다.
•공백(space)으로 구분한다.
•뒤에 나올 ID, CLASS 선택자와도 함께 사용할 수 있다.
ul li {height:30px;}
ul li a {color:blue;}
table tr td {text-align:center;}
3) ID, CLASS 선택자
•엘리먼트에 사용자가 직접 id, class 선택자 이름을 지정한다.
•id는 # (#id이름 -한 곳에서만 사용할 수 있다.)
•class는 . (.class이름 -여러 곳에 사용할 수 있다.)
#bodyContent {width:100%; height:500px;}
.clr {clear:both;}
.datetime {font-size:10px;}
#divNews .tab1 {width:50px;height:50px;}
#divNews ul {background-color:red;}
4) 가상클래스 선택자
•해당 엘리먼트의 상태에 따라 구분 짓는 선택자로 HTML 문서 상엔 없으나 CSS에선 존재하는 것처럼 가정하여 콜론(:)를 사용해서 작성한다.
a:link {color:blue;text-decoration:none;} /* 방문하지 않은 링크*/
a:visited {color:red;text-decoration:none;} /* 방문했던 링크*/
a:hover, a:active {color:black;text-decoration:underline;} /* 마우스 오버 시와 클릭 시*/
5) 전체 선택자
•선언은 *로 하고 모든 태그에 대한 속성을 지정할 수 있다. 사용 빈도는 매우 낮다.
* {color:red;}
div * {font-size:10px;}
6) 기타 선택자
•자식 선택자 (Child Cominators) : 요소 바로 아래 하위 요소를 선택한다. 꺽은선(>)을 사용한다.
•인접 선택자 (Adjacent Sibling Combinators) : 요소 바로 뒤에 있는 같은 레벨의 요소를 선택한다. 플러스(+)를 사용한다.
•속성 선택자 (Attribute) : 특정 속성을 가진 요소들에 스타일을 적용할 수 있다. 괄호([ ])를 사용한다.
div > a {font-size:20px;} /* 자식 선택자*/
h1+div {background-color:blue;} /* 인접 선택자*/
[class=“box”] {background-color:red;} /* 속성 선택자*/
5. 선택자 우선 순위
•스타일 선언은 위에서 아래로 순차적으로 적용이 되고, 마지막에 선언된 스타일이 우선순위를 갖는 특징이 있다.
-ex1.html
#btnLink {color:red;}
#btnLink {color:blue;}
#btnLink {color:#000;} /* 이 명령이 선택된다. */
•In-line 스타일 > internal 스타일 > external 스타일 >브라우저 기본 값 순서.
•두 가지가 똑같은 등급일 때, 가장 마지막으로 적용한 것이 가장 우선한다.
•특정도(specify) 값을 계산해서 가장 많은 점수를 받은 것이 우선한다.
특정도 계산식은 다음과 같다.
a: 인라인 스타일 1000점.
b: ID 선택자 100점.
c: 클래스 선택자 10점. 가상 클래스(예 :link) 역시 클래스로 10점.
d : 태그 선택자 1점. 가상 엘리먼트(예 :first-line) 역시 태그 선택자로 1점.
예)
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li는 태그 선택자로 1점이 됩니다.
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
li는 태그 선택자로 1점
:first-line 역시 태그 선택자로 1점
합이 2점
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul는 태그 선택자로 1점
li는 태그 선택자로 1점
합이 2점
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
ul, ol, li 태그 선택자의 합은 3점
.red 클래스는 10점
합이 13점
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
#x34y는 ID 선택자로 100점
style=" " /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
인라인 스타일은 1000점
속성 강제 적용 !important 선언
!important는 위의 모든 순서를 무시하고, !important를 선언한 속성이 가장 먼저 우선한다.
같은 요소에 !important를 한 번 이상 선언하면, 원래의 순서로 되돌아간다.
주의할 점은 !important는 전체 스타일이 아닌 개별 속성에 적용하며 IE6 이전 버전에서 인식되지 않을 수 있다.
꼭 필요한 경우가 아니라면 비추!!
사용 방법:
선택자 { 속성: 속성값 !important; } 세모콜론이 뒤에 온다는 점 주의할 것.
사용 예:
p{
font-size: 40px !important;
color: green !important;
}
CSS 선택자 정리 도표
선택자 | 예 | 예 설명 |
.class | .intro | class="intro"인 모든 요소를 선택 |
#id | #wrap | id="wrap"인 요소를 선택 |
tag | p | <p> 요소를 모두 선택 |
* | * | 모든 요소를 선택 |
element, element | div, p | <div> 인 모든 요소와 <p> 인 모든 요소를 선택 |
element element | div p | <div> 요소 안의 모든 <p> 요소를 선택 |
element>element | div>p | <div> 요소 안의 바로 아래 하위 <p> 요소를 선택 |
element+element | div+p | <div> 요소 뒤의 <p> 요소를 선택 |
[attribute=value] | input[type='text'] | <input> 요소 중 type=text 특성 값을 갖는 요소 선택 |
:link | a:link | 링크가 걸린 ... |
:visited | a:visited | 방문한 적 있는 ... |
:hover | a:hover | 마우스커서가 올라가 있는 ... |
:active | a:active | 현재 활성화된 ... |
:focus | input:focus | 현재 선택된 ... |
:target | span:target | ... |
:first-letter | p:first-letter | <p> 요소의 첫 번째 문자 |
:first-line | p:first-line | <p> 요소의 첫 번째 줄 |
:first-child | p:first-child | <p> 요소 아래 자식 요소 중 첫 번째 요소 |
:nth-child | p:nth-child | <p> 요소 아래 자식 요소 중 n 번째 요소 |
:before | p:before | <p> 요소 앞의 |
:after | p:after | <p> 요소 뒤의 |
:checked |
|
|
:enabled |
|
|
:disabled |
|
|
::not(s) | div::not(.classname)
| 지정된 클래스명을 제외한 모든 div태그에 적용됨
|
'COMPUTER > CSS' 카테고리의 다른 글
| 4. float 속성 -바닥부터 시작하는 CSS- (0) | 2016.12.08 |
|---|---|
| CSS의 절대단위와 상대단위 -막간학습- (0) | 2016.12.07 |
| display 속성의 table계열 속성 값 -막간학습- (0) | 2016.12.04 |
| 3. display 속성 -바닥부터 시작하는 CSS- (0) | 2016.11.20 |
| 2. CSS의 속성 요약 -바닥부터 시작하는 CSS- (0) | 2016.11.19 |