본문 바로가기
[ View ]/HTML

[ HTML ] CSS3 스타일 시트 기초

by 환이s 2023. 2. 17.
728x90

오늘은 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)
  1. 특정 태그 아래의 자식, 또 그 자식의 자식들을 반복해서 모두 포함하는 선택자이다.
  2. 특정 태그 안에 포함된 모든 하위 태그(자손 태그)를 선택한다.

 

  • 자식 선택자(child selector)
  1. 특정 태그 바로 아래에 위치한 하위 태그이다.
  2. 여러 자식 태그들 중에서 특정 자식을 선택할 때 사용하는 선택자이다.

 

  • 형제 선택자(sibling selector)
  1. 같은 부모 태그 아래에 있는 자식 태그들 중에서 태그 하나 또는 일부를 선택
  2. ' + '기호 : 선택자 태그 기준으로 바로 인접해서 뒤에 오는 형제 태그 하나를 선택할 경우
  3. ' ~ '기호 : 바로 인접하지는 않더라도 뒤에 오는 모든 형제 태그들을 선택할 경우

 

<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)
  1. 콜론( : ) 뒤에 엘리먼트를 선택할 수 있는 특별한 상태. 즉, 조건을 나타내는 예약어를 명세한다.
  2. 단독으로 사용되기 보다는 다른 선택자와 함께 짝을 이루어 선택자를 꾸며주는 역할을 한다.
  3. 가상 클래스(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

관련글

티스토리툴바