[CSS] 2021.01.12. DAY_54 CSS란? 사용방식(inline, embed, external file), selector종류

[CSS] 2021.01.12. DAY_54 CSS란? 사용방식(inline, embed, external file), selector종류

2021. 1. 12. 14:14ㆍWeb_Front-end/CSS

◎ CSS란?

	CSS
	Cascading Style Sheet
	1994년에 하콤 비움 리(Hakon wium lie)가 처음 제안
	Weg Page에서 통일성 있는 디자인을 하기 위한 고안
	inline, embed, external file방식 3가지 방식으로 사용할 수 있다
	selector를 사용하여 디자인을 적용받을 tag를 설정한다
	CSS3가 최신 표준이다
	*주석 : / / 로 한줄 주석과 여러줄 주석으로 사용할 수 있다*

[ 1. inline 방식 ]

태그에 직접 CSS코드를 정의하는 방식
적용우선순위가 가장 높다
디자인 코드를 태그마다 정의해야한다 (중복성)
selector를 사용하지 않는다

문법)
<태그명 style="속성:값; 속성:값; ,,,,">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline 방식으로 CSS사용</title>
</head>
<body>

	<!-- 디자인이 필요한 tag에 style속성을 사용하여 적용하는 방식 -->
	<div style="font-family: 궁서체; font-size: 20px; color: #0000FF">
		inline 방식</div>
	<div style="font-family: 궁서체; font-size: 20px; color: #0000FF">
		inline 방식은 코드의 중복성이 높다</div>

</body>
</html>

[ 2. embed 방식 ]

<head> 태그 사이에 <style>태그를 정의하는 방식
한 페이지에서 사용되는 디자인을 모아서 정의하는 방식
inline 방식보다 중복성이 낮다
selector를 사용하여 디자인을 적용받을 태그를 설정한다

문법)
<style type="text/css">
selecor{ 속성:값; 속성:값; ,,,,, }
</style>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>embed 방식</title>
<style type="text/css">
/* HTML에 style태그를 정의하여 디자인 코드를 만드는 방식
selector가 사용된다 */
div,li {background-color:#ffeaa7;}
</style>

</head>
<body>

	<div>div 로 묶은 영역</div>

	<p>p 로 묶은 영역</p>

	<ul>
		<li>Java</li>
		<li>Oracle</li>
		<li>JDBC</li>
		<li>HTML</li>
	</ul>

	<div>div 로 묶은 영역</div>

</body>
</html>

[ 3. external file 방식 _ 외부파일 방식 ]

CSS코드를 파일에 정의하고 필요한 HTML에서 참조하여 사용하는방식
+ 디자인 코드의 중복성이 가장 낮다
- 디자인 적용 우선순위가 가장 낮다
확장자가 css인 파일을 생성하여 정의
필요한 곳에서 <link rel="stylesheet" type="text/css" href="css의 경로"/>를 설정하여 정의된 디자인을 사용한다

문법)

1. 확장자가 css인 파일을 생성, selector
test.css파일 생성
selector{ 속성:값; ,,,, }

2. 공통디자인이 필요한 HTML에서 <head>태그 사이에 <link>를 정의
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://localhost/html_prj/common/css/test.css"/>

@charset "UTF-8";

ol{background-color:#74b9ff; font-size:20px;}

ol 태그 안에 속성을 부여했지만 ol 태그를 상속하는 li태그에 적용이 되었다 - 속성의 상속

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>external file 방식</title>

<!-- 외부파일방식 사용 -->
<link rel="stylesheet" type="text/css" href="http://localhost/html_prj/css0112/external.css">

</head>
<body>

	<ul>
		<li>공부시간</li>
		<li>오전 : 09:00 ~ 13:00</li>
		<li>점심 : 13:00 ~ 14:00</li>
		<li>오후 : 14:00 ~ 17:50</li>
	</ul>
	<ol>
		<li>Java의 정석</li>
		<li>Oracle SQL</li>
		<li>HTML5</li>
	</ol>


</body>
</html>

[ selector (선택자) ]

embed방식과 외부파일방식에서 디자인을 적용받을 태그를 선택하는 것
id selector, class selector, tag selector, multiple selector, sub selector, behavior selector 가 존재

[ id selector ]

- 디자인을 적용받을 태그가 유일할 때 (==하나의 태그만 디자인을 적용할 때)

문법)
#아이디명{속성:값; ,,, }

태그적용) 해당페이지에서 유일하게 하나만 설정할 것
<태그명 id="아이디명">

- 아이디가 다르고 같은 디자인을 사용한다면 multiple selector
#아이디명, #아이디명,,,{ 속성:값;,,, }
문법으로 사용할 수 있다

[ class selector ]

- 정의된 디자인을 특정의 여러 태그들에서 사용할 때

문법) multiple selector 가능
.클래스명, .클래스명,,, { 속성:값;,,,,, }

태그적용)
<태그명 class="클래스명">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selector사용</title>
<style type="text/css">
/* id selector 정의 */
/* #java {color: #0984e3}
#jdbc {color: #0984e3} */
#java, #jdbc {
	color: #0984e3
}

/* class selector 정의 */
.f{ font-size:17px; font-weight:bold; text-decoration:underline; margin-bottom:10px}
.m{ font-weight:bold; text-decoration:overline; color:#6c5ce7}


</style>
</head>
<body>

	<div id="java">Java</div>
	<div>Oracle</div>
	<div id="jdbc">JDBC</div>
	<div>HTML</div>

	<ul>
		<li class="f">김포비</li>
		<li class="m">김밍키</li>
		<li class="f">민여경</li>
		<li class="m">정승재</li>
		<li class="m">홍길동</li>
		<li class="f">이수경</li>
	</ul>

</body>
</html>

[ tag selector ]

- 지정된 모든 태그가 디자인을 적용 받아야할 때

문법)
태그명{속성:값;,,,,}

태그적용) 따로 지정해주지 않는다
<태그명>

[ multiple selector ]

- 적용대상을 , 구분하여 여러개 정의한것
#아이디명, #아이디명,,, { }
.클래스명, .클래스명 ,,, { }
태그명, 태그명,,,, { }

[ sub selector ]

- 특정태그의 하위 태그만 디자인을 적용 받아야할 때
- 복잡한 구조의 태그에 적용하면, 코드량이 매우 많아져서 자주사용하지 않는다

문법)
부모태그명 > 자식태그명 { 속성:값; ,,, }
태그명 > 태그명 > 태그명 > 태그명 { 속성:값; ,,, }

태그적용)
<태그명>
<태그명> /* 이 태그가 적용받게 된다 */

[behavior selector ]

- 사용자의 동작이 있을 때에만 디자인을 적용하는 경우(클릭, 마우스를 가져다대는 동작 등)
- a 태그에 주로 사용한다

문법)
태그명:HOVER{ 속성:값; ,,, }

태그적용) 따로 지정해주지 않는다
<태그명>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selector의 사용</title>

<style type="text/css">
/* tag selector : 정의한 모든 태그가 디자인을 적용받는다 */
label, p{font-weight: bold}/* multiple selector : , 로 여러 태그에 같은 디자인 설정 */
input{height: 40px; width: 300px; text-align: center}

/* sub selector : 특정태그의 하위태그만 디자인을 적용 받을 때 */
ol > li {background-color: #e17055; font-weight: bold; color: #FFFFFF; width: 200px}
div > p > a {font-size: 25px}

/* text-decoration: none - 밑줄 없애기 */
/* tag selector */
a {color:#3F3F3F; text-decoration: none}

/* behavior selector : 사용자의 동작이 있을 때 디자인을 적용 */
a:hover {color:#FF0000; text-decoration: line-through}

</style>
</head>
<body>

	<div>
		<label>이름</label><input type="text" placeholder="이름" /><br> 
		<label>나이</label><input type="text" placeholder="나이" /><br> 
		<label>주소</label><input type="text" placeholder="주소" /><br>
		
		<p>
			<a href="#void">입력</a>
		</p>
		<a href="#void">하이퍼링크</a>
	</div>
	<a href="#void">링크</a><br>
	<label>이름표입니다</label>
	<p>문단태그 1</p>
	<div>영역태그1</div>
	<p>문단태그 2</p>
	
<!-- 	<img src="../day0107/images/work.jpg"> -->

	<ul>
		<li>짜장면</li>
		<li>김밥</li>
		<li>돈가스</li>
		<li>육개장</li>
	</ul>

	<ol>
		<li>봄</li>
		<li>여름</li>
		<li>가을</li>
		<li>겨울</li>
	</ol>
	
</body>
</html>

저작자표시 비영리 변경금지

'Web_Front-end > CSS' 카테고리의 다른 글

[CSS] 2021.01.13. DAY_55. 그림자설정 (0)	2021.01.13
[CSS] 2021.01.13. DAY_55. 레이아웃 설정해보기 (0)	2021.01.13
[CSS] 2021.01.13. DAY_55. scrollbar, 디자인_위치구분, 좌표설정 (0)	2021.01.13
[CSS] 2021.01.13. DAY_55 여백설정, 선설정 (0)	2021.01.13
[CSS] 2021.01.12. DAY_54 CSS 속성 (0)	2021.01.12

JJ's

JJ's

태그

최근글

댓글

공지사항

아카이브

◎ CSS란?

[ 1. inline 방식 ]

[ 2. embed 방식 ]

[ 3. external file 방식 _ 외부파일 방식 ]

ol 태그 안에 속성을 부여했지만 ol 태그를 상속하는 li태그에 적용이 되었다 - 속성의 상속

[ selector (선택자) ]

[ id selector ]

[ class selector ]

[ tag selector ]

[ multiple selector ]

[ sub selector ]

[behavior selector ]

'Web_Front-end > CSS' 카테고리의 다른 글

관련글

티스토리툴바