오늘은 CSS 스타일 시트에 대해서 포스팅해보려 합니다.
■ CSS(Cascading Style Sheets)
CSS는 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다.
1 ) CSS 특징
- HTML에 문서의 구조를 지정하는 태그와 스타일을 지정하는 태그가 섞여 있으면 유지보수 하기가 어렵다.
- 스타일을 지정하는 부분은 CSS로 분리하는 것이 바람직함.
- 동일한 요소를 가진 웹 페이지도 CSS가 달라지면 다른 모습으로 표현될 수 있다.
- 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
2 ) CSS의 기능
- 선택자(selectors)
- 박스 모델(Box Model)
- 배경 및 경계선(Backgrounds and Borders)
- 텍스트 효과(Text Effects)
- 2 차원 및 3차원 변환(2D/3D Transformations)
- 애니메이션(Animations)
- 다중 컬럼 레이아웃(Multiple Column Layout)
- 사용자 인터페이스(User Interface)
■ CSS(Cascading Style Sheets) 문법
CSS는 선택자와 선언부로 구성됩니다. 선택자는 스타일을 지정할 HTML 요소(태그, 아이디 등)를 가리킵니다.
선언부에는 CSS 속성 이름과 Value값이 포함됩니다.
※ 속성이 여러개일 경우, 한 줄로 나열해도 상관없지만 여러 줄에 걸쳐 작성하는 것이 좋습니다.
■ 기본선택자(selector) : 스타일을 적용할 요소(태그)
선택자 여러개의 종류가 있는데, 각 선택자마다 형식과 특성이 다릅니다.
선택자의 종류는 다음과 같습니다.
| 종 류 | 형 식 | 내 용 |
| 전체 선택자 | * | 모든 태그에 스타일 적용 |
| 태그 선택자 | 태그명 | 지정한 이름의 태그에만 스타일 적용 |
| 클래스 선택자 | .클래스명 | 지정한 클래스 속성을 갖는 태그에만 스타일 적용 |
| 계층 선택자 | 선택자 태그명 선택자 > 태그명 선택자 + 태그명 선택자 ~ 태그명 |
태그들의 계층 구조에서 특정 위치의 태그에만 스타일 적용 자손 선택자 자식 선택자 형제(근접후행) 선택자 형제(후행) 선택자 |
| 아이디 선택자 | #아이디명 | 지정한 아이디 속성을 갖는 태그에만 스타일 적용 |
| 상태 선택자 | 선택자 : 상태조건 | 지정된 특정 상태 조건을 충족하는 태그에만 스타일 적용 |
그럼 각 요소에 대해서 좀 더 알아봅시다.
스타일 시트 : <head> 태그 안에 <style>태그의 내용으로 명세
전체 선택자(universal selector)
- ' * '기호를 선택자로 사용한다.
- HTML5 페이지 내부의 모든 태그를 대상으로 선택
- <head>, <title>, <style>, <body> 태그와 <html> 태그까지 모든 태그가 선택
- 예 ) 모든 태그의 color 속성을 'green' 색상 값으로 지정, 문서의 모든 내용이 녹색으로 변경됨
<style type="text/css">
*{color : green;}- 예 ) <body> 태그뿐만 아니라 <html> 태그 영역에도 빨간 경계선이 표시
<style type="text/css">
*{border : solid red;}- 예 ) 모든 엘리먼트 영역의 외부 여백과 내부 여백 전체를 '0'으로 초기 설정
<style type="text/css">
*{margin : 0; padding : 0;}
태그 선택자(tag selector)
- 태그 이름을 선택자로 사용하여 문서 내부의 특정 태그를 모두 선택한다.
- 같은 이름을 갖는 문서 내의 모든 태그들에 대해서 같은 스타일을 적용한다.
- 기본 선택자로 가장 많이 사용
-예 )
<style type="text/css">
p{background-color: blue; border : red;} /* 복수 스타일 속성 선언 */
- 하나의 선택자에 여러 스타일 속성을 적용할 수도 있고, 반대로 하나의 스타일 속성을 여러 선택자에 함께 적용할 수도 있다.
- 여러 태그를 함께 선택하여 같은 스타일을 적용하고 싶다면 ' , '를 사용하여 나열할 수 있다.
- 선택된 태그들에 여러 스타일을 동시에 적용할 수도 있다.
- 예 ) 다음 노랜 배경색의 스타일은 <h1>, <h3>, <p>태그에 함께 동일하게 적용.
<style type="text/css">
h1, h3, p {background-color: yellow;} /* 복수 선택자 */
아이디 선택자(ID selector)
- 보통 고유한 id 속성값을 가지고 있는 태그 하나만을 선택한다.
- 선택자로 ' # ' 기호를 앞에 붙여 id 속성값을 명세한다.
- 태그 이름이 같더라도 id 값으로 구별하여 스타일을 적용하고자 할 때 사용한다.
<style type="text/css">
#id {border: dashed red;} /* px생략하면 3px 자동적용 */
클래스 선택자(class selector)
- 특정 class 속성값을 가지고 있는 여러 태그들에 스타일을 적용하기 위해 사용한다.
- 선택자로 ' . ' 기호를 앞에 붙여 class 속성값을 명세한다.
- 보통 같은 태그들을 다시 나누어 그룹화하거나 태그 종류에 상관없이 다양한 태그들을 그룹화하여 같은 스타일을 적용하고자 할 때 사용한다. (같은 태그라도 다른 스타일을 적용하거나 다른 태그라도 같은 스타일을 적용하고자 할 때 유용하다.)
- 예 ) 태그 이름에 상관없이 class 속성값이 'class1'인 모든 태그들이 선택
<style type="text/css">
.class1 {border : solid purple;}- 예 ) 'p.class1'은 <p>태그 중에서 class 속성값이 'class1'인 태그들만 선택
<style type="text/css">
p.class1 {border : solid purple;}
h1.class1 {border : solid purple;}
계층 선택자(hierarchy selector)
HTML5 문서 안의 엘리먼트들은 계층 구조의 구조적 특성을 이용한다.
- 자손 선택자(descendant selector)
- 특정 태그 아래의 자식, 또 그 자식의 자식들을 반복해서 모두 포함하는 선택자이다.
- 특정 태그 안에 포함된 모든 하위 태그(자손 태그)를 선택한다.
- 자식 선택자(child selector)
- 특정 태그 바로 아래에 위치한 하위 태그이다.
- 여러 자식 태그들 중에서 특정 자식을 선택할 때 사용하는 선택자이다.
- 형제 선택자(sibling selector)
- 같은 부모 태그 아래에 있는 자식 태그들 중에서 태그 하나 또는 일부를 선택
- ' + '기호 : 선택자 태그 기준으로 바로 인접해서 뒤에 오는 형제 태그 하나를 선택할 경우
- ' ~ '기호 : 바로 인접하지는 않더라도 뒤에 오는 모든 형제 태그들을 선택할 경우
<style type="text/css">
#id1 > span {color: green;}/* id태그의 직계 span태그만 */
#id2 span{color: pink;} /* id2태그 아래 자손 span태그 */
#id1 > ul > li {color: blue;} /* id1의 직계 ul의 직계 li태그 */
#id1 > ul li {background-color: yellow;} /* id1의 직계 ul의 자손 li태그 */
#id1 li {border: double;} /* id1의 자손 li태그 */
#id2 > .class2 > h3 {color: red;} /* id2의 직계 class2태그의 직계 h3태그(소나무) */
#id2 > .class2 h4 {color: orange;} /* id2의 직계 class2태그의 아래 자손 태그중 h4 태그 */
/* 형제 선택자 */
h3 + h4 {text-align: center;}/* h3 바로 다음 h4형제태그 선택 */
h3 ~ h4 {background-color: gray;} /* h3 다음에 있는 모든 h4형제태그 선택 */
#id2 > .class2 h3 ~ h4 {border: solid;} /* id2 태그의 직계 class2의 자손 태그 h3 다음에
있는 모든 h4형제 태그에 적용 */
지금까지 기본 선택자에 대해서 알아봤습니다.
각 고유 태그들을 적용해서 특성을 알아보기 위해 <예제 1> 코드를 참고해 봅시다.
<예제 1>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>basic-selector</title>
<style type="text/css">
* {margin: 5px; padding: 5px;} /* 전체선택자 */
#id1 {border: dashed red;} /* px생략하면 3px 자동적용 */
.class2{border: botted blue; color: purple;}
span{font-weight: bold;}
#id1 > span {color: green;}/* id태그의 직계 span태그만 */
#id2 span{color: pink;} /* id2태그 아래 자손 span태그 */
#id1 > ul > li {color: blue;} /* id1의 직계 ul의 직계 li태그 */
#id1 > ul li {background-color: yellow;} /* id1의 직계 ul의 자손 li태그 */
#id1 li {border: double;} /* id1의 자손 li태그 */
#id2 > .class2 > h3 {color: red;} /* id2의 직계 class2태그의 직계 h3태그(소나무) */
#id2 > .class2 h4 {color: orange;} /* id2의 직계 class2태그의 아래 자손 태그중 h4 태그 */
/* 형제 선택자 */
h3 + h4 {text-align: center;}/* h3 바로 다음 h4형제태그 선택 */
h3 ~ h4 {background-color: gray;} /* h3 다음에 있는 모든 h4형제태그 선택 */
#id2 > .class2 h3 ~ h4 {border: solid;} /* id2 태그의 직계 class2의 자손 태그 h3 다음에
있는 모든 h4형제 태그에 적용 */
</style>
</head>
<body>
<div id="id1">div스타일1
<span>span스타일1</span>
<span>span스타일2</span>
<p>p스타일1
<span>span스타일3</span>
</p>
<ul class="class1">
<li>하늘</li>
<li>바다</li>
</ul>
</div>
<div id="id2">div스타일2
<span>span스타일4</span>
<span>span스타일5</span>
<p>p스타일2
<span>span스타일6</span>
</p>
<div class="class2">
<h4>전나무</h4>
<h3>소나무</h3>
<h4>개나리</h4>
<h5>밤나무</h5>
<h4>진달래</h4>
</div>
</div>
</body>
</html>
Tip)
ID는 중복될 수 없지만 class는 여러 태그에 중복하여 사용 가능하다.
■ 확장 선택자
- 상태 선택자(state selector)
- 콜론( : ) 뒤에 엘리먼트를 선택할 수 있는 특별한 상태. 즉, 조건을 나타내는 예약어를 명세한다.
- 단독으로 사용되기 보다는 다른 선택자와 함께 짝을 이루어 선택자를 꾸며주는 역할을 한다.
- 가상 클래스(pseudo class) 선택자라고도 한다.
- 상태 선택자 종류
| 종 류 | 상 태 | 기 능 |
| 링크 선택자 | 선택자:link | href 속성을 가진(방문 전) <a> 태그를 선택 |
| 선택자:visited | 방문했던 링크를 가진 <a> 태그를 선택 | |
| 반응 선택자 | 선택자:hover | 마우스 포인터를 올려놓은(누르지 않고) 태그를 선택 |
| 선택자:active | 마우스 포인터로 클릭한 태그를 선택 | |
| 부정 선택자 | 선택자:not | 선택 대상을 반대로 적용 |
기본 선택자와 상태 선택자를 활용해서 간단한 메뉴바를 만들어 봅시다.
<예제 2> 코드를 참고해 봅시다.
<예제 2>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rounded-navi</title>
<style type="text/css">
ul {
display: table; /* 요소를 표(table)처럼 표현할 수도 있다. */
margin-left: auto;
margin-right: auto;
}
ul.navi li{
list-style-type: none;
display: block;
width: 8em;
height: 3em;
float: left;
text-align: center;
font-family: "Lucida Grande", sans-serif;
border: 1px #818181 solid;
box-shadow: 5px 5px 10px #bbb;
}
/* 메뉴 링크 스타일 */
ul.navi li a {
display: block;/* 영역만들기 */
padding: .8em .5em .5em .5em; /* 0.8em.. */
text-decoration: none; /* 밑줄 없앰 */
color: #292929;
text-shadow: 1px 1px 0px #ccc;
}
/* 메뉴에 마우스 오버할때 스타일 */
ul.navi li:hover {
background-color: #333333;
}
/* 메뉴 링크 위로 마우스 오버한 후 링크 스타일 */
ul.navi li:hover>a{
color: aqua;
text-shadow: 0px 1px 0px #fff;
}
ul.navi li:first-child { /* 첫번째 항목의 스타일 HOME */
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
ul.navi li:last-child {/* 마지막 항목JQuery */
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
</style>
</head>
<body>
<div>
<ul class="navi">
<li class="home"><a href="#">HOME</a></li>
<li class="html"><a href="#">HTML5</a></li>
<li class="css"><a href="#">CSS3</a></li>
<li class="jquery"><a href="#">JQuery</a></li>
</ul>
</div>
<div>
<ul>
<li>짜장면</li>
<li>짬뽕</li>
<li>우동</li>
</ul>
</div>
</body>
</html>
■ 스타일시트 선언 방식
CSS3 스타일시트는 선언하는 4가지 방식이 있습니다.
스타일시트의 내용이 어디에 위치해 있는지에 따라 결정하는데 선언 방식은 다음과 같습니다.
| 선언 방식 | 내 용 | 특 성 |
| 내부 방식 | HTML5 문서 내부에 스타일시트를 삽입하는 형식(임베디드 형식) | <style> 태그 안에 스타일 시트를 명세 |
| 외부 방식 | HTML5 문서 외부에 독립된 스타일 시트 파일을 작성하여 연결하는 형식(링크 형식) | <link> 태그를 통해 외부 CSS3 파일을 연결 |
| 인라인 방식 | HTML5 문서 안의 각 엘리먼트에 속성으로 스타일을 끼어 넣는 형식 | HTML5 태그 안에 style 속성을 설정 |
| 임포트 방식 | 스타일 시트 안에서 또 다른 스타일 시트 파일을 포함시키는 방식 | 스타일시트 안에 @import 규칙을 사용하여 외부 CSS3 파일을 포함 |
1 ) CSS를 삽입하는 방법
- inline CSS : 태그 내부에 style 속성으로 지정
<p style="background-color:yellow;">
- 내부 스타일 시트(head 태그 내부에 작성)
- 외부 스타일 시트 파일
<link type="text/css" rel="stylesheet" href="스타일시트파일">
ex) <link type="text/css" rel="stylesheet" href="mystyle.css">
■ 다중 스타일 시트
하나의 요소에 대하여 외부, 내부, 인라인 스타일이 서로 다르게 지정하고 있다면 어떤 스타일이 사용될까??
우선순위는 다음과 같습니다.
※ 공통적으로 사용되는 스타일은 <body> 요소의 스타일에 정의하는 것이 편리하다.
■ CSS의 속성들
CSS는 다양한 속성이 있습니다.
위 예제에서도 다양한 속성을 활용했는데, 각 속성마다 각자의 역할이 있습니다.
아래 표를 참고해 봅시다.
| 특 성 | 설 명 |
| color | 텍스트 색상 |
| font-weight | 볼드체 등 설정 |
| padding | 요소의 가장자리와 내용간의 간격 |
| font-size | 폰트의 크기 |
| background-color | 배경색 |
| border | 요소를 감싸는 경계선 |
| font-style | 이탤릭체 등 설정 |
| background-image | 배경 이미지 |
| text-align | 텍스트 정렬 |
| list-style | 리스트 스타일 |
마무리로 글자 스타일 속성과 , 색상 스타일 속성을 예제를 통해서 알아봅시다.
■ 글자 스타일 속성 예제
<font 속성>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>char-style</title>
<style type="text/css">
* {font-size: 32px;}
#id1, #id2, #id3, #id4, #id5 {
font-size: 16px; border: botted silver;
}
#id1 {
font-family: arial;
font-size: small;
text-decoration: overline;
}
#id2{
font-family: "돋움";
font-size: large;
text-align: center;
text-decoration: line-through;
}
#id3{
font-size: 200%;
font-style: oblique;
text-align: right;
text-decoration: underline;
}
#id4{
font-family: "times new roman";
font-size: 2em;
font-weight: bolder;
}
#id5 {
font-family: "없는 글씨체", serif;
font-size: 100%;
font-weight: lighter;
}
#id6{
vertical-align: top; /* 수직정렬 */
letter-spacing: -2pt; /* 글자사이 간격 */
word-spacing: 3pt; /* 단어사이 간격 */
}
#id7{
text-align: justify;
letter-spacing: 4pt;
word-spacing: 12pt;
}
#id8{
letter-spacing: -4pt;
word-spacing: 3pt;
}
#id9{
letter-spacing: 2pt;
word-spacing: 3pt;
line-height: 300%; /* 줄 간격 */
}
h1 {
font-size: 24px;
/* text-shadow: 그림자수평거리(x), 그림자수직거리(y), 흐림정도, 그림자색깔; */
text-shadow: 8px 6px 10px red;
}
h3 {
font-size: 2em;
background-color: #800080;
color: black;
display: inline;
text-shadow: 2px 2px 10px white;
}
</style>
</head>
<body>
<p id="id1">AaBbCc스타일1</p>
<p id="id2">AaBbCc스타일2</p>
<p id="id3">AaBbCc스타일3</p>
<p id="id4">AaBbCc스타일4</p>
<p id="id5">AaBbCc스타일5</p>
<table border="1">
<tr>
<td><p id="id6">AaBbCc스타일6 스타일 스타일 스타일</p></td>
<td><p id="id7">AaBbCc스타일7 스타일 스타일 스타일</p></td>
</tr>
<tr>
<td><p id="id8">AaBbCc스타일8 스타일 스타일 스타일</p></td>
<td><p id="id9">AaBbCc스타일9 스타일 스타일 스타일</p></td>
</tr>
</table>
<h1>h1 Shadow효과</h1>
<h3>h3 Shadow효과</h3>
</body>
</html>
■ 색상 속성 예제
<color 속성>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>color-style</title>
<style type="text/css">
body{
color : red;
}
h1 {color : #00ff00;}
p {color : rgb(0,0,255);}
#rgb1 {background-color: rgb(255,0,0);} /* red */
#rgb2 {background-color: rgb(0,255,0);} /* green */
#rgb3 {background-color: rgb(0,0,255);} /* blue */
#rgba1{background-color: rgb(255,0,0,0.3);}/* red with opacity */
#rgba2{background-color: rgb(0,255,0,0.3);}/* green with opacity */
#rgba3{background-color: rgb(0,0,255,0.3);}/* blue with opacity */
#hsl1 {background-color: hsl(120,100%,50%);} /* green */
#hsl2 {background-color: hsl(120,100%,75%);} /* light green */
#hsl3 {background-color: hsl(120,100%,25%);} /* dark green */
#hsl4 {background-color: hsl(120,60%,70%);} /* pastel green */
#hsla1 {background-color: hsla(120,100%,50%,0.3);} /* green with opacity */
#hsla2 {background-color: hsla(120,100%,75%,0.3);} /* light green with opacity */
#hsla3 {background-color: hsla(120,100%,25%,0.3);} /* dark green with opacity */
#hsla4 {background-color: hsla(120,60%,70%,0.3);} /* pastel green with opacity */
</style>
</head>
<body>
<h1>Color 속성</h1>
<p>RGB속성</p>
<div id="rgb1">rgb스타일1</div>
<div id="rgb2">rgb스타일2</div>
<div id="rgb3">rgb스타일3</div>
<p>RGBA속성</p>
<div id="rgba1">rgba스타일1</div>
<div id="rgba2">rgba스타일2</div>
<div id="rgba3">rgba스타일3</div>
<p>HSL속성</p>
<div id="hsl1">hsl스타일1</div>
<div id="hsl2">hsl스타일2</div>
<div id="hsl3">hsl스타일3</div>
<div id="hsl4">hsl스타일4</div>
<p>HSLA속성</p>
<div id="hsla1">hsla스타일1</div>
<div id="hsla2">hsla스타일2</div>
<div id="hsla3">hsla스타일3</div>
<div id="hsla4">hsla스타일4</div>
</body>
</html>
마치며
오늘은 CSS 스타일 기초에 대한 포스팅을 해보았습니다.
프론트엔드 개발자 쪽을 준비하시는 분들이라면 꼭 알고 넘어가야 하는 파트라고 생각합니다..!!
그럼 다음 포스팅에 뵙겠습니다.
728x90
'[ View ] > HTML' 카테고리의 다른 글
| [ HTML/CSS ] 레이아웃과 애니메이션 (0) | 2023.02.21 |
|---|---|
| [ HTML/CSS ] CSS3 박스 모델과 응용 (2) | 2023.02.20 |
| [ HTML ] 입력 양식 (0) | 2023.02.16 |
| [ HTML ] Link & table (0) | 2023.02.08 |
| [ HTML ] 기본 태그 (0) | 2023.02.06 |
