04. CSS3_기초

JinStory77·2023년 5월 12일

CSS 천재교육 프런트엔드

프런트엔드_공부

목록 보기

4/11

1. CSS(Cascading Style Sheet)

CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있다. 초기에는 HTML 하나로 다 했지만 수정의 불편함으로 내용과 스타일(표현)을 분리하기 위해 CSS가 만들어졌다.

인라인 스타일(Inline style)
HTML 요소 내부에 style 속성을 사용해서 CSS 스타일을 적용하는 방법
인라인 스타일은 해당 요소에만 적용
인라인 스타일은 한번 설정된 스타일을 변경하기 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다. 고정 값으로 사용하는 경우에 사용하는 것이 좋다.
내부 스타일 시트(Internal style sheet)
HTML문서 내의 태그(<head>등)에 style 설정하는 방법
내부 스타일 시트는 해당 HTML 문서에서만 적용
외부 스타일 시트(External style sheet)
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
.css 확장자를 사용하여 저장하며 스타일을 적용할 태그에 <link>태그를 사용하여 스타일을 적용시킨다.

❗스타일 적용의 우선순위

인라인 스타일 (HTML 요소 내부에 위치함)
내부 / 외부 스타일 시트 (문서상 정의된 순서에 따라 우선순위가 결정, HTML 문서의 head 요소 내부에 위치함)
웹 브라우저 기본 스타일

2. CSS3 스타일 시트 구성

스타일 시트는 대소문자 구문 없음

셀렉터
CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름
프로퍼티
스타일 속성 이름, 많은 프로퍼티가 있음
값
프로퍼티의 값
주석문
스타일 시트 내에 붙이는 설명문 /.../. 아무 위치에나 사용가능

3. CSS3 스타일 적용하기

1) 내부에서 스타일 적용하기

같은 결과지만 다른 방식

(1_1) 직접 스타일 꾸미기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background-color: mistyrose";>
	<h3 style="color: purple;">CSS 스타일 맛보기</h3>
	<hr style="border: 5px solid yellowgreen;">
	<p>
		나는 <span style="color: blue; font-size: 20px;">웹 프로그래밍</span>을 좋아합니다.
</body>
</html>

(1_2). `<style>` 로 시트로 꾸미기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body { background-color: mistyrose;}
h3 { color: purple;}
hr { border: 5px solid yellowgreen;}
span { color: blue; font-size: 20px;}
</style>
<body>
	<h3>CSS 스타일 맛보기</h3>
	<hr>
	<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>

2) 외부에서 스타일 시트 불러오기

같은 결과지만 다른 방식

(2_1) `<link>`로 외부 스타일 시트 불러오기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="../css/mystyle.css">
</head>
<body>
	<h3>CSS 스타일 맛보기</h3>
	<hr>
	<p>나는 웹 프로그래밍을 좋아합니다.</p>
</body>
</html>

(2_2) `@import`로 외부 스타일 시트 불러오기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(../css/mystyle.css);
</style>
</head>
<body>
	<h3>CSS 스타일 맛보기</h3>
	<hr>
	<p>나는 웹 프로그래밍을 좋아합니다.</p>
</body>
</html>

4. 스타일 상속

CSS3 스타일은 부모 태그로부터 상속받는다.
부모 태그란 자신을 둘러싸는 태그를 의미한다.
❗<p>태그는 <em>의 부모 태그이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>부모 스타일 상속</h3>
	<hr>
	<p style="color: green">
		자식 태그는 부모의 스타일을 <em style="font-size: 25px">상속</em>받는다
	</p>
</body>
</html>

5. 셀렉터(selector)

HTML 태그의 모양을 꾸밀 시트를 선택하는 기능이다.

5_1) 태그 셀렉터

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
h3, li {color: brown;}
</style>
<body>
	<h3>Web Programming</h3>
	<ul>
		<li>HTML5</li>
		<li><strong>CSS</strong></li>
		<li>JAVSCRIPT</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 { color: red;}
p {	color: blue;}
</style>
</head>
<body>
	<h1>안녕하세요?</h1>
	<p>문단태그 입니다.</p>
</body>
</html>

5_2) class 셀렉터

.(점)으로 시작하는 이름의 셀렉터

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {color: green;}
.warning {color: red;}
body.main {background: aliceblue;}
.main {color: yellow;}
h3, li {color: brown;}
#list {backgroud: mistyrose;} <!--id 셀렉터 -->
ul strong {color: dodgerblue;}
div>strong {background: red;}
h3:first-letter {color: red;}
li:hover {background: yellowgreen;}
</style>
</head>
<body class="main">
	<h3>Web Programming</h3>
	<hr>
	<div>
		<div class="main">
			2학기 <strong>학습 내용</strong>
		</div>
		<ul id="list">
			<li>HTML5</li>
			<li><Strong>CSS</Strong></li>
			<li>JAVASCRIPT</li>
		</ul>
		<div class="warning">60점 이하는 F!</div>
	</div>
</body>
</html>

5_3) id 셀렉터

#로 시작 하는 이름의 셀렉터
id 속성은 어떤 요소에 대해 유일한 특성을 정의하며 HTML 문서에서 특정 id속성값은 오직 하나만 있어야한다.

❗class 셀렉터와 id 셀렉터 비교

id 셀렉터의 우선순위가 class 셀렉터보다 우선순위가 높다.

class 셀렉터

적합한 활용
- 여러 태그를 하나의 그룹으로 묶어 단체로 동일한 CSS 스타일을 적용할 때 적합하다.
- class 셀렉터의 값이 값은 태그에 모두 CSS 스타일 적용
태그의 종류에 관계없이 class 셀렉터 활용가능
class 셀렉터는 속성값을 두 개 이상 가질 수 있다.

id 셀렉터

HTML문서에서 특정 id 셀렉터 값은 오직 하나만 있어야한다.
단 한번 유일하게 적용될 스타일은 id 셀렉터를 사용하는 것이 좋다.

5_4) 자식, 자손 셀렉터

부모 자식 관계인 두 셀렉터를 '>' 기호로 조합한다.

	CSS5_selector3_class3.html
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<style>
	ul strong {
		color: dodgerblue;
	} /*자손 셀렉터*/
	div > strong {
		background: yellow;
	} /*자식 셀렉터*/
	</style>
	</head>
	<body>
		<div>
			<div>
				2학기 <strong>학습 내용</strong>
			</div>
			<ul>
				<li>HTML5</li>
				<li><strong>CSS</strong></li>
				<li>JAVASCRIPT</li>
			</ul>
			<div>60점 이하는 F!</div>
		</div>
	</body>
	</html>

5_5) 전체 셀렉터

*(와일드 문자)를 사용하여 모든 태그에 적용시키는 셀렉터
* {color: green; }
웹페이지의 모든 태그에 적용(텍스트 색을 green으로 칠함)

CSS5_selector3_class3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
	background-color: blue;
}
<!--전체 선택자-->* {
	color: red;
}
</style>
</head>
<body>
	<h1>안녕하세요?</h1>
	<p>문단태그 입니다.</p>
</body>
</html>

5_6) 속성 셀렉터(attribute selectors)

특성 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 속성 셀렉터*/
input[type=text] {color: blue;}

input[type=email] {color: brown;}
</style>
</head>
<h3>Web Programming</h3>
<hr>
이름 : <input type="text" name="abcd"><br> 
전자우편 : <input type="email" name="email" placeholder="jin@naver.com">
</body>
</html>

5_7) 가상 클래스(pseudo-class) 셀렉터

어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터
- 40개 이상의 가상 클래스 셀렉터가 있음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:link{color: gray; text-decoration: none;}
a:visited{color: yellow; text-decoration: none;}
a:hover{color: green; text-decoratoin: underline;}
a:active{color: red; text-decoratoin: underline;}
</style>
</head>
<body>
	<h1><a href="https://www.naver.com">네이버</a></h1>
</body>
</html>

6. 색 표현하기

3가지 방법으로 표현가능

16진수(#8A2BE2)
10진수(rgb(138,43,226)
색 이름(blueviolet)

7. 텍스트 꾸미기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h3 {text-align: right;}
span {text-decoration: line-through;}
strong {text-decoration: overline;}
p1 {text-indent: 3em; text-align: justify;}
p2 {text-indent: 1em; text-align: center;}
</style>
</head>
<body>
	<h3>텍스트 꾸미기</h3>
	<p class="p1">HTML의 태그만으로 기존의 워드 프로세서와 같이 들여쓰기, 정렬, 공백 등과 세밀한 <span>텍스트 제어</span>를 할 수 없다.</p>
	<p class="p2">그러나<strong>스타일 시트</strong>는 이를 가능하게 한다.</p>
	<a href="http://www.naver.com" style="text-decoration: none">밑줄이 없는 네이버 링크</a>
</body>
</html>

8. CSS3의 표준 단위

9. 폰트 제어

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family : "Times New Roman", Serif; font-size : large;}
h3 {font : italic bold 40px consolas, sans-serif;}
</style>
</head>
<body>
<h3>Consolas font</h3>
<hr>
	<p style="font-weight:900">font-weight 900</p>
	<p style="font-weight:100">font-weight 100</p>
	<p style="font-style:italic">Italic Style</p>
	<p style="font-style:oblique">Oblique Style</p>
	<p>현재 크기의
	<span style="font-size:1.5em">1.5배</span>
	크기로</p>
</body>
</html>

10. CSS의 박스 모델

HTML 태그는 사각형 박스로 다뤄진다.
- 각 HTML 태그 요소를 하나의 박스로 다룬다.
- 박스 크기, 배경 색, 여백, 옆 박스와의 거리 등을 제어 가능하다.

박스 모델 프로퍼티

10_1) 다양한 테두리 선

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
	<hr>
	<p style="border: 3px solid blue">3픽셀 soild</p>
	<p style="border: 3px none blue">3픽셀 none</p>
	<p style="border: 3px hidden blue">3픽셀 hidden</p>
	<p style="border: 3px dotted blue">3픽셀 dotted</p>
	<p style="border: 3px dashed blue">3픽셀 dashed</p>
	<p style="border: 3px double blue">3픽셀 double</p>
	<p style="border: 15px groove yellow">15픽셀 groove</p>
	<p style="border: 15px ridge yellow">15픽셀 ridge</p>
	<p style="border: 15px inset yellow">15픽셀 inset</p>
	<p style="border: 15px outset yellow">15픽셀 outset</p>
</body>
</html>

10_2) 둥근 모서리 테두리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p {background : #90D000; width : 300px; padding : 20px;}
#round1 { border-radius : 50px;}
#round2 { border-radius : 0px 20px 40px 60px;}
#round3 { border-radius : 0px 20px 40px;}
#round4 { border-radius : 0px 20px;}
#round5 { border-radius : 50px; border-style : dotted;}
</style>
</head>
<body>
	<h3>둥근 모서리 테두리</h3>
	<hr>
	<p id="round1">반지름 50픽셀의 둥근 모서리</p>
	<p id="round2">반지름 0, 20, 40, 60 둥근 모서리</p>
	<p id="round3">반지름 0, 20, 40, 20 둥근 모서리</p>
	<p id="round4">반지름 0, 20, 0, 20 둥근 모서리</p>
	<p id="round5">반지름 50의 둥근 점선 모서리</p>
</body>
</html>

10_3) 박스 속성 연습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div.box {
	background-color: green;
	color: white;
	width: 150px;
	height: 80px;
	margin: 40px;
	border: 30px solid blue;
	padding: 20px;
}
</style>
</head>
<body>
	<div class="box">
		Java<br> 
		JSP&Servlet<br> 
		Spring<br> 
		Python<br>
	</div>
	<h2>반갑습니다~~~</h2>
</body>
</html>

10_4) 이미지 테두리

테두리에 이미지를 입힌다.
- 모서리(corner)와 에지(edge)로 구분하여 각각 이미지 삽입한다.
- border-width과 border-style 역시 미리 지정이 필요하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
background: yellow;
width: 200px;
height: 60px;
padding: 10px;
border: 20px solid lightgray; /*border-width와 border-style 동시 지정*/
}
#round { border-image: url("../images/border.png") 30 round;}
#repeat { border-image: url("../images/border.png") 30 repeat;}
#stretch { border-image: url("../images/border.png") 30 stretch;}
</style>
</head>
<body>
  <h3>이미지 테두리 만들기</h3>
  <hr>
  <p>20*20 크기의 회색 테두리를 가진 p 태그</p>
  <p id="round">round 스타일 이미지 테두리</p>
  <p id="repeat">repeat 스타일 이미지 테두리</p>
  <p id="stretch">stretch 스타일 이미지 테두리</p>
</body>
</html>

10_5) 배경 다루기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
	background-color: skyblue;
	background-size: 100px 100px;
	background-image: url("../images/spongebob.png");
	background-repeat: repeat-y;
	background-position: center center;
}

div {
	width: 200px;
	height: 200px;
	color: blueviolet;
	font-size: 16px;
}
</style>
</head>
<body>
	<h3>div 박스에 배경 꾸미기</h3>
	<hr>
	<div>SpongeBob is a over-optimistic sponge that annoys other
		characters.</div>
</body>
</html>

10_6) 텍스트 그림자

10_7) 박스 그림자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.redBox {
	box-shadow: 10px 10px red;
}

.blurBox {
	box-shadow: 10px 10px 5px skyBlue;
}

.multiFiffect {
	box-shadow: 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue
}

div {
	width: 150px;
	height: 70px;
	padding: 10px;
	border: 10px solid lightgray;
	background-image: url("../images/spongebob.png");
	background-size: 150px 100px;
	background-repeat: no-repeat;
}
</style>
</head>
<body>
	<h3>박스 그림자 만들기</h3>
	<hr>
	<div class="redBox">뚱이와 함께</div>
	<br>
	<div class="blurBox">뚱이와 함께</div>
	<br>
	<div class="multiBox">뚱이와 함께</div>
</body>
</html>

11. 마우스 커서


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
  <h3>마우스 커서</h3>
  아래에 마우스를 오려 보세요. 커서가 변합니다.
  <hr>
  <p style="cursor: crosshair">십자 모양 커서</p>
  <p style="cursor: help">도움말 모양 커서</p>
  <p style="cursor: pointer">포인터 모양 커서</p>
  <p style="cursor: progress">프로그램 실행 중 모양 커서</p>
  <p style="cursor: n-resize">상하 크기 조절 모양 커서</p>
</body>
</html>

JinStory77

Let's smile for future 🤩

이전 포스트

03. HTML5 문서 구조화와 웹

다음 포스트

04. CSS3_기초

프런트엔드_공부

1. CSS(Cascading Style Sheet)

❗스타일 적용의 우선순위

2. CSS3 스타일 시트 구성

3. CSS3 스타일 적용하기

1) 내부에서 스타일 적용하기

(1_1) 직접 스타일 꾸미기

(1_2). `<style>` 로 시트로 꾸미기

2) 외부에서 스타일 시트 불러오기

(2_1) `<link>`로 외부 스타일 시트 불러오기

(2_2) `@import`로 외부 스타일 시트 불러오기

4. 스타일 상속

5. 셀렉터(selector)

5_1) 태그 셀렉터

5_2) class 셀렉터

5_3) id 셀렉터

❗class 셀렉터와 id 셀렉터 비교

class 셀렉터

id 셀렉터

5_4) 자식, 자손 셀렉터

5_5) 전체 셀렉터

5_6) 속성 셀렉터(attribute selectors)

5_7) 가상 클래스(pseudo-class) 셀렉터

6. 색 표현하기

7. 텍스트 꾸미기

8. CSS3의 표준 단위

9. 폰트 제어

10. CSS의 박스 모델

10_1) 다양한 테두리 선

10_2) 둥근 모서리 테두리

10_3) 박스 속성 연습

10_4) 이미지 테두리

10_5) 배경 다루기

10_6) 텍스트 그림자

10_7) 박스 그림자

11. 마우스 커서

03. HTML5 문서 구조화와 웹

05. CSS3 고급

0개의 댓글

04. CSS3_기초

프런트엔드_공부

1. CSS(Cascading Style Sheet)

❗스타일 적용의 우선순위

2. CSS3 스타일 시트 구성

3. CSS3 스타일 적용하기

1) 내부에서 스타일 적용하기

(1_1) 직접 스타일 꾸미기

(1_2). <style> 로 시트로 꾸미기

2) 외부에서 스타일 시트 불러오기

(2_1) <link>로 외부 스타일 시트 불러오기

(2_2) @import로 외부 스타일 시트 불러오기

4. 스타일 상속

5. 셀렉터(selector)

5_1) 태그 셀렉터

5_2) class 셀렉터

5_3) id 셀렉터

❗class 셀렉터와 id 셀렉터 비교

class 셀렉터

id 셀렉터

5_4) 자식, 자손 셀렉터

5_5) 전체 셀렉터

5_6) 속성 셀렉터(attribute selectors)

5_7) 가상 클래스(pseudo-class) 셀렉터

6. 색 표현하기

7. 텍스트 꾸미기

8. CSS3의 표준 단위

9. 폰트 제어

10. CSS의 박스 모델

10_1) 다양한 테두리 선

10_2) 둥근 모서리 테두리

10_3) 박스 속성 연습

10_4) 이미지 테두리

10_5) 배경 다루기

10_6) 텍스트 그림자

10_7) 박스 그림자

11. 마우스 커서

03. HTML5 문서 구조화와 웹

05. CSS3 고급

0개의 댓글

(1_2). `<style>` 로 시트로 꾸미기

(2_1) `<link>`로 외부 스타일 시트 불러오기

(2_2) `@import`로 외부 스타일 시트 불러오기