반응형 웹 실전 프로젝트 #12 ~ #13 (CSS 기본문법 + 선택자)
CSS (Cascading Style Sheet)를 정의 하는 방법으로는 내부스타일시트, 외부스타일시트, 인라인스타일시트 등이 있다
실제로는 외부 스타일 시트를 많이 사용하는 편이지만 간단한 스타일은 내부스타일시트로만으로 사용할수있다
인라인 스타일 시트는 대체로 거의 사용하지 않지만 가장 우선순위가 높아서 꼭 필요한경우 편리하게 사용할수 있다
내부 스타일시트
CSS를 HTML문서 안에 <style> 태그로 기재하여 HTML문서안에서 CSS가 함께 저장되도록 하는 방법이다
p { color: red; }의 의미는 p태그 안의 글자 색상을 빨간색으로 설정 하라는 뜻
외부 스타일시트
스타일 속성들을 따로 저장하여 HTML문서에 파일명으로 연결 할수 있다
스타일은 .css확장자를 가진 별도의 파일로 저장하고 HTML에서는 <link> 태그를 이용해 선언한다
내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면 외부 스타일 시트는 그 스타일을 선언한 모든 HTML페이지에 적용된다
CSS파일의 상단에 @charset="utf-8"; 문자셋을 지정한다
동일한 결과를 나타낸다
@import
@import는 CSS안으로 다른 CSS파일을 불러올경우 사용한다
CSS의 맨 첫줄에 기술한다
@import는 어떤 css파일안에 공통 css를 불러들일경우 사용할수도 있다
@import는 공통으로 들어가야 할 스타일을 따로 저장하여 다른 css에 삽입시켜 사용할수 있도록 해준다
그러나 css파일을 너무 여러개로 분리 하면 오히려 복잡해져서 유지보수하기 힘든 부분도 있으니 용량이 적당 하다면 하나의 파일로 저장하는것이 좋다
인라인스타일(inline style)
인라인 스타일은 태그에 직접 CSS를 정의 해주는 기법으로 해당 요소에 style=""형식으로 기술한다
인라인 스타일은 내부스타일이나 외부스타일에서 기술된 속성보다 우선으로 적용되므로 우선순위가 절대적으로 높아야 할 경우 사용할수 있다
스타일을 공통 CSS로 수정할수 없고 일일이 html을 열어서 편집해야 한다
선택자(selector)
CSS로 UI의 어느부분을 디자인 할지, 즉 표현할 대상이 되는 부분을 말한다
CSS로 속성을 부여 하는 형식은 다음과 같다
h1 : 선택자 {
color : 속성
red; : 속성값
}
h1요소에 배경색을 노란색으로 글자색을 빨간색으로 지정한다는 의미를 담고 있다
{} 안에 여러 속성을 지정할수 있고, 각 속성 설정간에는 ; 로 구분해주며 마지막 속성 끝에는 구분자를 생략 할수 없다
https://www.w3schools.com/에 접속 하면 선택자들이 어떤 브라우저부터 표현 가능한지를 알아볼수 있다
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce
www.w3schools.com
요소를 선택 하는 방법, 즉 선택자의 종류로는 type선택자, id선택자, class선택자들이 있다
type선택자
html문서의 태그이름을 선택자로 사용할수 있다
p태그안의 글자들을 파란색으로 표시 하도록 속성을 부여하고있다
id 선택자
HTML문서의 요소중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여 할수도 있다
HTML요소에 id로 이름을 붙일때에는 유일한 이름을 부여해야 한다
다른 요소에 같은 id명을 또 주어서는 안된다
CSS에서는 id 선택자 앞에 #를 붙여야 한다
id명이나 class명은 숫자로 시작 할수 없으며 영문자로 시작한다
p태그중에 id가 ctxt인 요소만 파란색으로 표시 하도록 속성을 부여 해보자
class 선택자
HTML문서의 여러 요소중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여 할수 있다
HTML요소에 같은 이름을 부여 할때는 class로 이름을 붙여준다
여러개의 요소에 같은 class명을 부여 한다
하나의 요소에 여러개의 class명을 부여 할수도 있다
CSS에서는 class선택자 앞에 . 을 붙여야 한다
class가 btxt인 모든 요소는 빨간색으로 class가 ctxt인 모든 요소는 파란색으로 표시 하도록 속성을 부여해보자
class 명이 atxt인 세번째 p요소에 부여된 속성 font-weight: bold; 는 글자를 굵게 표시 하라는 의미다
공통 스타일을 정의해 놓으면 CSS를 조금더 효율적으로 작업 할수 있다
전체선택자
전체 선택자는 페이지의 모든 요소를 가리키는 선택자로 * 로 표시 한다
어떤 id명이나 class명이 부여 되었든지 상관없이, 페이지 내의 모든 요소를 파란색으로 표시 하는 속성을 부여 해보자
그러나 불필요하게 전체 선택자를 사용하는 것은 속도를 저하 시키는 원인이 된다
반드시 필요한 경우가 아니라면 선택자를 정확하게 명시 하자
하위 선택자
하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리킨다
선택자 사이를 공백으로 분리 한다
abox클래스 내부에 있는 모든 p태그들의 문자를 파란색으로 표시 하도록 속성을 부여해보자
자식 선택자
자식 선택자는 요소 내부에 있는 해당 요소를 가르키지만, 하위요소의 하위요소는 가리키지 않으며
선택자 사이를 > 로 분리 한다
abox 클래스 내부에 있는 요소들 중 또 다른 하위 요소 (ul)안에 있는 p태그들을 제외한 나머지 p태그들의 문자만을 파란색으로 표시 하도록 속성을 부여해보자
.abox p 라고만 했다면 .abox내의 4개 p요소를 모두 지칭 하겠지만
.abox > p 라고 했기때문에 ul안의 p요소들은 제외 된다
인접 선택자
인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 기리키는 선택자로, 선택자 사이를 +로 분리 한다
전체 p요소중 h1요소의 바로 다음에 나오는 p태그들의 문자만을 파란색으로 표시 하도록 속성을 부여 해보자
형제 선택자
형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택 할수 있으며 ~로 구분한다
h3와 같은 계층에 있는 p태그들만 파란색으로 나타나도록 속성을 부여 해보자
인접해 있지 않고 멀리 있어도 같은 계층에 있다면 속성이 부여 된다
반면 하위 계층에 있는 p태그들에는 속성이 부여 되지 않는다
그룹 선택자
그룹 선택자는 여러 선택자들을 , 로 구분하여 함께 묶어 속성을 부여 할수 있다
h1과 p요소에 테두리 속성을 한번에 부여 해보자
종합예제를 만들어 지금까지 살펴본 여러가지 선택자들을 활용해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 선택자</title>
<style type="text/css">
* {
margin: 10px;
}
#container {
background: lightgray;
}
h1 {
background: beige;
}
span {
color: red;
}
h2+p>span {
color: blue;
}
.tea1 {
background: beige;
}
</style>
</head>
<body>
<h1>건강한 하루</h1>
<div id="container">
<h2>건강해지는 차</h2>
<p>머리와 피부에 좋은 차는 어떤것들일까.
<span>차의 종류</span> 에 대해 알아보도록 합니다.</p>
<ul>
<li class="tea1">
<h3>대나무차<span>15,000원</span></h3>
<p>얼굴에 물을 주는 효과가 있다.</p>
</li>
<li class="tea2">
<h3>감잎차<span>14,000원</span></h3>
<p>빈혈이 있는 사람에게 효과가 있다.</p>
</li>
<li class="tea3">
<h3>결명자차<span>15,000원</span></h3>
<p>눈을 밝혀주는 효과가 있다.</p>
<p>보리차와 비슷하나 맛이 더 은은하고 구수하다.</p>
</li>
</ul>
</div>
</body>
</html>
모든 요소의 밖 여백을 사방 10px로 한다
id가 container인 박스의 배경을 연회색으로 한다
h1요소의 글자의 배경색을 베이지로 한다
span요소의 글자색을 빨간색으로 한다
h2바로 다음에 나오는 p요소에 있는 sapn요소의 글자색을 파란색으로 한다
class가 tea1인 요소의 배경을 베이지색으로 한다
속성선택자
HTML요소의 속성 유무 또는 속성 값을 대괄호 [] 안에 넣어서 선택자로 사용할수 있다
| 속성값 | 설명 |
| h1[class] | class명을 가진h1요소 |
| img[alt] | alt속성을 가진 img요소 |
| p[class="abc"] | class명이 유일하게 abc인 p요소 |
| p[class~="abc"] | class명이 유일하게 abc이거나 여러개의 class명중 하나가 abc인 p요소 |
| p[class|="abc"] | class명이 abc이거나 abc~로 시작 하는 p요소 |
| p[class=^="abc"] | class명이 철자 abc로 시작 하는 p요소 |
| p[class$="abc"] | class명이 abc로 끝나는 p요소 |
| p[class*="abc"] | class명이에 철자가 abc가 포함되어 있는 p요소 |
| a[href^="mailto"] | href속성값이 mailto로 시작 하는 a요소 |
각종 속성 선택자의 쓰임을 테스트 해보자
한줄씩 주석을 풀어서 실행 해봐야 이해하기 쉽다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 선택자</title>
<style type="text/css">
h3[class] {
color: red;
}
/* p[class="icox"] {
color: red;
} */
/* p[class~="icox"] {
color: red;
} */
/* p[class|="icox"] {
color: red;
} */
/* p[class^="icox"] {
color: red;
} */
/* p[class$="icox"] {
color: red;
} */
p[class*="icox"] {
color: red;
}
</style>
</head>
<body>
<h3 class="logo">서울특별시</h3>
<h3>경기도</h3>
<p class="icox">주소록을 작성합니다.</p>
<p class="icoxpage">전화번호부를 작성합니다.</p>
<p class="screenicox">건강기록부를 작성합니다.</p>
<p class="I icox U">금전출납부를 작성합니다.</p>
<p class="icox-1">손익계산서를 작성합니다.</p>
</body>
</html>
가상클래스 선택자
가상 클래스 선택자란 링크가 걸린 문자에 스타일을 부여 하는것이다
| 속성 값 | 설명 |
| a:link | 링크가 걸린 문자에 속성을 부여 |
| a:visited | 링크를 클릭하여 해당 페이지에 갓다가 돌아온경우 속성을 부여 |
| a:hover | 링크가 걸린 문자에 마우스가 닿았을경우 속성을 부여 |
| a:active | 링크 걸린 글자가 활성화 되었을 경우 속성을 부여 (클릭 했다가 돌아 왔거나 클릭 하려다가 만 경우) |
| a:focus | 링크 걸린 글자에 포커스가 생길 경우 (키보드의 TAB 키등으로 포커스가 나타날경우) |
이 가상 클래스들 둘 이상 사용할 경우 우선순서대로 기술 한다
HTML5에서는 일반 요소도 : hover가 적용된다
링크가 걸린 글자를 파란색이며, 마우스가 닿았을 경우 빨간색으로 변경되는 속성을 부여해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 선택자</title>
<style type="text/css">
a {
color: dodgerblue;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COSTOMER</a></li>
<li><a href="#">COMMUNITY</a></li>
</ul>
</body>
</html>
가상요소 선택자
가상요소 선택자는 요소에 id명이나 class명을 부여 하지 않고도 위치를 찾아서 선택 할수 있는 선택자
| 속성값 | 설명 |
| :first-letter | 요소의 첫글자 |
| :first-line | 요소의 첫줄 |
| :first-child | 같은 요소중 첫번째 요소 |
| :last-child | 같은 요소중 마지막 요소 |
| :nth-child(n) | 같은요소중 n번째 요소 |
| :before | 요소 안 맨 앞에 배치될 요소 (마크업에 없는 가상요소) |
| :after | 요소 안 맨 뒤에 배치될 요소 (마크업에 없는 가상요소) |
:before, :after는 마크업할 당시에는 없었던 요소를 css에 넣어줄때 사용
새로 생성된 공간에 내용을 넣어 줄때는 content속성을 이용하여 content="~"와 같이 기술
:before , :after는 선택한 요소의 자식 요소 맨 처음과 맨 마지막에 생성
<p> :before 여름 감기를 조심하세요 :after </p>
이렇게 생성된 가상 요소들은 인라인의 특성을 가지고 있음
가상 요소를 잘 이용하면 이름을 부여 하지 않은 요소라도 정확히 선택할수 있어 활용도가 높음
p태그에 이름을 주지 않고도 어느 p태그에든 원하는 속성을 부여 할수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 선택자</title>
<style type="text/css">
p:first-letter {
font-size: 150%;
}
p:first-child {
color: blue;
}
p {
background: lightgray;
}
p:last-child {
background: palegoldenrod;
}
p:nth-child(3) {
color: red;
}
p:before {
content: "★"
}
.box:after {
content: "항목을 선택해 주세요.";
color: red;
}
</style>
</head>
<body>
<div class="box">
<p>COMPANY</p>
<p>PRODUCT</p>
<p>SERVICE</p>
<p>COMMUNITY</p>
</div>
</body>
</html>
종속 선택자
종속 선택자는 type선택자와 id선택자, class 선택자가 결합된 형태임
<p id="atxt">선택자의 다양한 표현</p>마크업이 위와 같을때 #atxt와 p#atxt는 같은 선택자임
우선순위는 p#atxt가 #atxt보다 높은 우선순위를 가지고 있음
선택자의 우선순위
같은 선택자가 여러 CSS명령을 중복으로 받으면 어떻게 될까
일반적으로 우선순위가 같은 선택자라면 나중에 기술한것이 먼저 기술한것보다 우선순위가 높다
| 분류 | 선택자 | 우선순위 |
| 전체 선택자 | * | 0 |
| type 선택자 | p, h1, ul 등... | 1 |
| 가성 선택자 | :first-child, :last-child 등.. | 10 |
| class 선택자 | .abc, .box 등.. | 10 |
| id 선택자 | #abc, #box 등... | 100 |
요소에 직접 style=""형식으로 CSS를 기술하는 인라인 스타일은 위의 모든 선택자보다 우선순위가 높음
지금까지 나온 방법보다 최우선으로 CSS를 적용해야 하는 경우 선택자에 속성을 부여 하는 마지막에 !important를 붙이면됨
Type 선택자 < class 선택자, 가상선택자 < id선택자 < !important
우선순위 수치를 모두 합한 값으로 우선순위가 결정됨
같은 요소라도 값이 높은 선택자가 부여한 속성이 우선으로 적용됨
ul요소를 지칭하는 선택자는 여러종류가 있을수 있음
<div id="toparea">
<ul class="gnb">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
그 여러종류의 전체 선택자 우선순위 값을 계산해보면 다음과 같음
| 선택자 | 우선순위 계산 | 최종우선순위 |
| ul | 1 | 1 |
| .gnb | 10 | 10 |
| ul.gnb | 1+10 | 11 |
| #toparea ul | 100 + 1 | 101 |
| #toparea .gnb | 100 + 10 | 110 |
| #toparea ul.gnb | 100 + 11 | 111 |
합한 값이 가장 큰 #toparea ul.gnb 선택자가 가장 우선순위가 높음
반드시 우선순위 값이 가장 높은 선택자를 사용하라는 것이 아님
다만 부여한 속성이 적용되지 않는다면 혹시 이전에 작성한 CSS중 더 높은 우선순위를 갖는 선택자가 있는지 의심 해봐야 함
같은 요소가 우선순위에 따라 어떻게 속성을 부여 받게 되는지 보여줌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 선택자</title>
<style type="text/css">
p {
color: pink;
}
#ctxt {
color: orange;
}
p.atxt {
color: blue !important;
}
p.atxt.btxt {
color: magenta;
}
p:first-child {
color: red;
}
</style>
</head>
<body>
<p id="ctxt" class="atxt btxt" style="color:green;">
한국인은 비타민 D가 부족한 사람이 많다.
</p>
</body>
</html>
첫번째 p요소는 우선순위 값이 가장 큰 orange색으로 나타나야겠지만 그보다 더 우선순위가 높은 인라인 스타일을 따라 green색으로 나타나야 한다
하지만 그보다 더 높은 !important를 가진 선택자를 따라 파란색으로 나타난다
선택자의 우선순위로 인해 많은 난관에 부딪히기도 하고 반대로 잘 이용하면 어려운 문제의 해법이 되기때문에 반드시 숙지해두자