[Capstone] CSS3

귤티·2023년 10월 17일

Capstone

목록 보기
7/17

CSS3

CSS(Cascanding Style Sheet)는 HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이며, CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다.
CSS3 스타일 시트로 꾸민 웹 페이지 예제

<style>
	body { background-color : mistyrose; } /* body 요소의 배경색을 mistyrose로 지정*/
    h3 { color : purple; } /* <h3> 요소의 글자 색을 purple로 지정 */
    hr { border : 5px solid yellowgreen; } /* <hr> 수평선을 yellowgreen에 두께 5픽셀 외곽선 */
    span { color : blue; font-size: 20px; } /* <span> 요소의 글자를 blue에 20픽셀
</style>

CSS 스타일 시트 구성

아래는 <span> 태그의 텍스트를 20픽셀의 blue 색으로 출력하도록 만든 CSS3 스타일 시트이다. px는 픽셀 단위이다.

셀렉터 프로퍼티 콜론 값 세미콜론 프로퍼티 값
span { color : blue; font-size : 20px; } span 태그 스타일 선언

셀렉터와 태그

셀렉터(selector)는 CSS3 스타일 시트의 이름이나 규칙이라고 생각하면 된다. 셀렉터와 같은 이름의 모든 HTML 태그에 스타일 시트가 적용된다. 그러므로 span 셀렉터에 의해 HTML 페이지의 모든 span 태그에 color : blue; font-size : 20px의 스타일이 적용된다.

스타일 시트 블록

CSS3 스타일 시트는 중괄호({})를 이용하여 작성한다.

프로퍼티와 값

각 CSS3 스타일은 '프로퍼티 : 값"의 쌍으로 표현되며 세미콜론(;)으로 분리된다. 마지막 세미콜론은 생략할 수 있다. CSS3은 현재 약 200개 정도의 프로퍼티(property)가 있으며 계속 생겨나게 될 것이다.

주석문

주석문은 스타일 시트 내에 붙이는 설명문으로 /.../로 만들고, 여러 줄에 걸쳐 아무 위치나 올 수 있다.

span { color : blue; /* 글자 색은 파란색 */ font-size : 20px; }
span { color : blue; font-size : 20px; } /* 글자 색은 파란색*/

대소문자 구분 없음

셀렉터, 프로퍼티, 값은 모두 대소문자를 구분하지 않는다.
다음 둘은 같은 표현이다.

body { background-color : mistyrose; }
BDOY { Background-Color : Mistyrose; }

CSS3 스타일 시트 만들기

CSS3 스타일 시트를 작성하는 방법에는 다음 3가지가 있다.

  • <style> </style> 태그에 스타일 시트 작성
  • style 속성에 스타일 시트 작성
  • 스타일 시트를 별도 파일로 작성하고, <link> xormsk @import로 불러 사용

<style> 태그로 스타일 시트 만들기

<head>
	<style>
    	body { background-color : mistyrose; }
        h3 { color : purple; }
    </style>
    <style>
    	hr { border : 5px solid yellowgreen; }
        span { color : blue; font-size : 20px; }
    </style>
</head>

이 방법은 다음과 같은 특징이 있다.

  • <style> 태그는 반드시 <head> 태그 내에서만 작성 가능하다.
  • <syle> 태그는 여러 번 작성 가능하며 스타일 시트들이 합쳐 적용된다.
  • <style> 태그에 작성된 스타일 시트는 웹 페이지 전체에서 적용된다.
<head><title>&lt;style&gt; 태그로 스타일 만들기</title>
<style>
body {
	background-color : linen; /*배경색*/
    color : blueviolet; /*페이지의 전체 글자색*/
    margin-left : 30px; /*페이지의 왼쪽 마진*/
    margin-right : 30px; /*페이지의 오른쪽 마진*/
}
h3 {
	text-align : center;
    color : darkred;
}
</style>
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. 음악을 들으면서
책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</p>
</body>

style 속성에 스타일 시트 만들기

HTML 태그의 style 속성에 CSS3 스타일 시트를 작성할 수 있다. 이 경우 해당 태그에만 스타일이 적용된다. 다음은 <p>의 글자를 30픽셀 크기에 magenta 색으로 꾸미는 사례이다. 이 스타일은 다른 <p> 태그에는 적용되지 않는다.

style 속성, 이 태그에만 적용되는 CSS3 스타일 시트

<p style = "color : magenta; font-size : 30px">
			축구를 좋아합니다.
</p>
<head><title>&lt;style&gt; 속성에 스타일 만들기</title>
<style>
p { color : red; font-size : 15px; } /*모든 p 태그에 적용*/
</style>
</head>
<body>
<h3>손 흥 민</h3>
<hr>
<p>오페라를 좋아하고</p>
<p>엘비스 프레슬리를 좋아하고</p>
<p style="color:blue">김치부침개를 좋아하고</p>
<p style="color:magenta; font-size:30px">축구를 좋아합니다.</p>
</body>

외부 스타일 시트 파일 불러오기

CSS3 스타일 시트만 떼어내어 .css 확장자를 가진 파일에 저장해놓고, 필요한 웹 페이지에서 불러 사용할 수 있다. 이것은 동일한 CSS3 스타일을 웹 페이지마다 중복 작성하는 불편함을 해소하고, 웹 사이트의 전체 웹 페이지 모양에 일관성을 준다.
파일에 저장된 CSS3 스타일 시트를 불러오는 방법은 다음 2가지이다.

  • <link> 태그 이용
  • @import 이용

link 태그는 다음과 같이 head에서만 사용되며 종료 태그(</link>)가 없다.

<head>
	<link href="mystyle.css" type="text/css" rel="stylesheet">
</head>

<link> 태그에 대해 좀더 자세히 알아보자.

  • href="mystyle.css"는 mystyle.css 파일을 불러올 것을 지시한다. 만일 CSS3 파일이 다른 웹 사이트에 있는 경우, 다음과 같이 웹 사이트의 URL을 기입한다.
href="http://www.site.com/mystyle.css"
  • type="text/css"는 불러오는 파일이 CSS 언어로 작성된 텍스트 파일임을 알려준다.
  • rel="stylesheet"는 불러오는 파일이 스타일 시트임을 알려준다.
  • <style> 태그를 여러 번 사용하여 여러 CSS 파일을 불러 올 수 있다.

W3C의 표준안에는 CSS 파일의 표준 확장자를 언급하지 않지만 대부분의 브라우저는 .css 파일을 CSS3 파일로 자동 인식하므로 CSS3 파일의 확장자를 .css로 작성하는 것이 바람직하다. CSS3 파일에는 <style> 태그 없이 CSS3 스타일 시트만 저장해야 한다.

/*mystyle.css*/
body { background-color:linen; color:blueviolet;
			margin-left:30px; margin-right:30px; }
h3 { text-align:center; color:darked; }

link 태그로 CSS3 파일 불러오기

/*mystyle.css*/
body { background-color:linen; color:blueviolet;
			margin-left=30px; margin-right=30px; }
h3 { text-align:center; color:darked; }
<head><title>&lt;link&gt; 태그로 스타일 파일 불러오기</title>
	<link type="text/css" rel="stylesheet"
    	  href="mystyle.css">
</head>

@import 이용

@import 문을 이용하여, .css 스타일 시트 파일을 HTML 페이지에 불러올 수 있다. @import 문은 <style> 안에서만 사용되며 (style 태그는 head 안에서만 존재 가능하다) 여러 번 사용할 수 있다. mystyle.css 파일을 불러오는 예를 들면 다음과 같다.

<style>
	@import url(mystyle.css);
    /* @import url('mystyle.css');로 해도 됨*/
    /* @import "mystyle.css";로 해도 됨*/
</style>

@import로 CSS3 파일 불러오기

/*mystyle.css*/
body { background-color:linen; color:blueviolet;
			margin-left=30px; margin-right=30px; }
h3 { text-align:center; color:darked; }
<head>
<title>&lt;@import&gt;로 외부 스타일 불러오기</title>
<style>
	@import url(mystyle.css);
</style>
</head>

CSS3 규칙

CSS3 스타일은 부모 태그로부터 상속된다

자신을 둘러싸는 태그를 부모 태그 혹은 부모 요소(parent element)라고 한다. 예를 들어 <em> 태그는 <p> 태그의 자식이다.

<p style="color:green">안녕하세요
	<em style="font-size:25px">자식입니다</em>
</p>

이 코드에서 <em> 태그인 '자식입니다'의 글자는 25px 크기로 출력되지만, 글자 색은 부모인 <p> 태그를 상속받아 green으로 출력된다. HTML 페이지 전체 태그에 적용하고 싶은 스타일이 있으면 <body> 태그에 작성하면 된다.

스타일 합치기(cascading)과 오버라이딩(overriding)

브라우저는 각 태그에 대한 디폴트 스타일 시트를 가지고 있어, 개발자가 만든 스타일이 없으면 이를 적용한다. 그러므로 각 태그에는 다음 4가지 종류 스타일 시트가 동시에 적용될 수 있다.

  • 브라우저의 디폴트 스타일
  • .css 스타일 시트 파일에 작성된 스타일
  • <style> </style> 태그에 작성된 스타일
  • style 속성에 작성된 스타일

스타일 합치기(cascading)란 앞의 4가지 스타일 시트가 태그에 동시에 적용될 때 스타일이 합쳐져서 적용됨을 말한다. 하지만 여러 스타일 시트들이 하나의 태그에 중첩되어 동일한 CSS3 프로퍼티에 서로 다른 값을 설정하는 충돌이 발생하기도 한다.

스타일 오버라이딩(overriding)은 덮어쓰기로, 동일한 CSS3 프로퍼티에 서로 다른 값을 설정하는 충돌 시 우선순위가 높은 스타일을 적용하는 규칙을 말한다. 앞의 4가지 스타일 시트 중, style 속성에 지정된 스타일의 우선순위가 가장 높다.

다음은 <p>안녕하세요</p> 태그에 4개의 스타일 시트가 동시에 적용되는 사례를 보여준다. 3개의 스타일 시트에서 font-size 프로퍼티가 충돌하며, 우선순위가 가장 높은 style 속성에 지정된 'font-size:25px'가 적용된다. 또한 2개의 스타일 시트에서 color 프로퍼티에 충돌이 발생하여 우선순위가 높은 'color:blue'가 적용된다. 충돌이 발생하지 않는 'background:mistyrose'가 합쳐진다.

우선순위 낮은 순서 -> 높은 순서
브라우저 디폴트 스타일 

p { color: black; font-size: 16px }

external.css

p { background : mistyrose; }

<style>

p { color : blue; font-size : 25px; }

style 속성

<p style="font-size: 25px">안녕하세요</p>

<p>안녕하세요</p>의 최종 스타일 시트

background : mistyrose;
color : blue;
font-size : 25px;

여러 스타일 시트가 중첩되는 경우

external.css
p {
	background : mistyrose;
}
<!DOCTYPE html>
<html>
<head>
<title>스타일 합치기 및 오버라이딩</title>
<link type="text/css" rel="stylesheet" href="external.css">
<style>
p { color : blue; font-size : 12px; }
</style>
</head>
<body>
<h3>p 태그에 중첩된 스타일</h3>
<hr>
<p>Hello, students!</p>
<p style="font-size:25px">안녕하세요 교수님!</p>
</body>
</html>

셀렉터

셀렉터(selector)는 HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능이다. 셀렉터는 여러 종류가 있지만, 다음은 가장 간단한 셀렉터를 만든 사례이다. h3는 셀렉터 이름이며, color:brown 스타일을 웹 페이지의 모든 <h3> 태그에 적용한다.

<style>
	h3/*셀렉터*/ { color : brown } /*모든 <h3> 태그에 h3 셀렉터의 스타일 적용*/
</style>
<h3>Web Programming</h3>

셀렉터에는 여러 유형이 있다. 앞의 h3처럼 태그 이름이 셀렉터가 되기도 하고, id 속성이나 calss 속성의 값을 셀렉터로 사용하기도 하고, 여러 셀렉터를 조합하여 사용하기도 한다.

셀렉터와 CSS3 스타일 시트를 설명하기 위한 샘플 HTML 페이지 코드

<!DOCTYPE html>
<html>
<head>
<title>셀렉터 만들기</title>
</head>
<body>
<h3>Web Programming</h3>
<hr>
<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>

태그 이름 셀렉터

태그 이름 셀렉터는 태그 이름이 셀렉터로 사용되는 유형으로, 셀렉터와 같은 이름의 모든 태그에 CSS3 스타일 시트를 적용한다.
다음은 태그 이름 셀렉터 h3와 li를 만든 사례이며, 셀렉터는 콤마(,)로 분리한다. HTML 페이지에 있는 모든 <h3> 태그와 <li> 태그에 'color:brown' 스타일이 적용되어 글자가 brown 색으로 출력된 것을 볼 수 있다.

h3, li { color : brown; }
<h3>Web Programming</h3>
		......
    <ul>
    	<li>HTML5</li>
        <li><strong>CSS</strong></li>
        <li>JAVASCRIPT</li>
    </ul>
    	.......

class 셀렉터

셀렉터 이름 앞에 점(.)을 붙인 경우, 이 셀렉터는 HTML 태그의 class 속성으로만 지정할 수 있다. 그래서 이를 class 셀렉터라고 한다. 다음은 이름이 main, warning인 2개의 class 셀렉터를 만들고, <body> 태그와 <div> 태그에서 사용한 사례이다.

  • class 셀렉터는 class 속성이 같은 모든 태그에 적용
.warning { color : red; }
body.main { background : aliceblue; }
<body class="main">
		......
	<ul>
    	......
    </ul>
    <div class="warning">60점 이하는 F!</div>
</body>

'.warning'과 같이 점(.)으로 시작하는 셀렉터는 어떤 HTML 태그에서도 class 속성에 사용할 수 있지만, 'body.main'과 같이 태그 이름(body)과 함께 만드러진 경우 해당 태그(<body>)에 제한된다. 다음은 main 셀렉터를 잘못 적용한 사례이다.

<div class="main">2학기 학습 내용</div>
  • main 셀렉터는 오직 <body> 태그에서만 사용 가능

id 셀렉터

셀렉터 이름 앞에 '#'을 붙인 경우, 이 셀렉터는 HTML 태그의 id 속성으로만 지정할 수 있다. 그래서 이를 id 셀렉터라고 한다. 다음은 id 셀렉터 list를 작성하고 <ul id="list">에 스타일을 적용한 예시로, <ul> 요소의 배경이 mistyrose로 칠해진다

#list { background = mistyrose; }
<ul id="list">
	<li>HTML5</li>
    <li><strong>CSS</strong></li>
    <li>JAVASCRIPT</li>
</ul>
  • id 셀렉터 이름 앞에 태그 이름을 사용하여 특정 태그에만 적용되도록 제한할 수 있다. 다음은 <div> 태그에서만 사용할 수 잇는 id 셀렉터 etc를 만든 사례이다.
div#etc { background : mistyrose; }
  • etc 셀렉터는 <p> 태그에서 사용할 수 없다. 다음은 잘못 사용된 사례이다.
<p id="etc">안녕하세요</p>
  • etc 셀렉터는 오직 div 태그에서만 사용할 수 있다.

셀렉터 조합하기

2개 이상의 셀렉터를 조합하면 태그를 구체적으로 지정할 수 있다. 셀렉터를 조합하는 방법은 여러 가지가 있으나 많이 사용하는 2가지만 알아보자

자식 셀렉터(child selector)

자식 셀렉터는 부모 자식 관계인 두 셀렉터를 '>' 기호로 조합한 형태이다. 다음은 <div>의 직계 자식인 <strong> 태그에 적용할 스타일 시트를 만든 사례이다.

div > strong { color : dodgerblue; } /*div의 직게 자식인 strong에 적용*/

다음은 <div>의 자식 <div>의 자식인 <strong>에 적용되는 스타일 시트를 작성한 사례이다.

div > div > strong { color : dodgerblue; }

자손 셀렉터(descendent selector)

자손 셀렉터는 자손 관계인 2개 이상의 태그를 나열한 형태이다. 다음은 <ul>의 자손인<strong> 태그에 적용하는 스타일 시트 사례이다.

ul strong { color : dodgerblue; }
  • ul, strong 과는 다르다.

자식 셀렉터와 자손 셀렉터의 사례

ul strong { color : dodgerblue; }

div > strong { background : yellow; }
<div>
	<div>2학기 <strong>학습 내용</strong><div> /*학습 내용에 적용된다*/
    <ul>
    	<li>HTML5</li>
        <li><strong>CSS</strong></li>/*CSS에 적용된다*/
        <li>JAVASCRIPT</li>
    </ul>
    <div>60점 이하는 F</div>
</div>

전체 셀렉터

전체 셀렉터(universal selector)란 와일드카드 문자(*)를 사용하여 웹 페이지의 모든 HTML 태그에 적용할 스타일을만드는 셀렉터이다. 다음은 웹 페이지의 모든 태그의 글자 색을 green으로 출력한다.

* { color : green; }

속성 셀렉터

HTML 태그의 특정 속성(attribute)에 대해 값이 일치하는 태그에만 스타일을 적용하는 셀렉터이다. 예를 들어 다음 스타일 시트를 보자.

input[type="text"] { color : red; }
  • type 속성이 "text"인 <input> 태그에 적용

이것은 <input type="text">인 모든 태그에 대해 글자색을 red로 지정하는 속성 셀렉터이다.

가상 클래스 셀렉터

가상 클래스(pseudo-class) 셀렉터는 초보자에게 좀 복잡하지만 그냥 넘어갈 수 없는 내용이다. '가상'이라는 단어가 의미하듯이 이 셀렉터는 어떤 상황이 발생하였을 때만 적용하도록 CSS3 표준에 만들어진 셀렉터이다. 40개가 넘는 가상 셀럭터 중 대표적인 몇 개만 요약한다.

많이 사용되는 :visited와 :hober에 대해서만 예를 든다.

a:visited { color : green; }
/*방문한 후부터 <a>의 링크 텍스트 색을 green으로 출력*/
li:hover { background : yellowgreen; }
/*<li> 태그 위에 마우스가 올라오면, yellowgreen을 배경색으로 출력, 마우스가 내려가면 원래대로 복귀*/
  • 가상 셀렉터를 사용할 때, 콜론(:) 앞뒤에 빈칸을 두면 안 된다. 다음은 잘못된 사용 사례이다.
li: hover, li :hover

다음은 :firstletter과 :hover를 사용한 사례이다. h3:firstletter는 <h3> 태그의 첫 번째 글자만 red 색으로 출력하는 셀렉터이며, li:hover은 <li> 태그 위에 마우스가 올라갔을 때 배경색을 yellowgreen 색으로 칠하는 셀렉터이다. 마우스가 내려가면 이전 상태로 돌아온다. 
h3:firstletter { color = red; }
li:hover { background = yellowgreen; }
<h3>Web Programming</h3> /*W만 red*/
			......
    <ul> /*li에 마우스가 올라갈 때 배경색 변경*/
    	<li>HTML5</li>
        <li><strong>CSS</strong></li>
        <li>JAVASCRIPT</li>
    </ul>
  • 가상 셀렉터 중에서 :nth-child(even)은 짝수번째 자식 태그에만 적용하는 셀렉터로서, 후에 짝수 행에만 배경색을 주어 줄무늬 표를 만드는 방법을 설명할 때 함께 설명한다.
유형셀렉터설명
마우스:hover마우스가 올라갈 때 스타일 적용
마우스:active마우스로 누르고 있는 상황에서 스타일 적용
폼 요소:focus폼 요소가 키보드나 마우스 클릭으로 포커스를 받을 때 스타일 적용
링크:link방문하지 않은 링크에 스타일 적용
링크:visited방문한 링크에 스타일 적용
블록:first-letter<p>, <div> 등과 같은 블록형 태그의 첫 글자에 스타일 적용. ::first-letter와 동일하며, <span>와 같은 인라인 태그에는 적용되지 않음
블록:first-line<p>, <div> 등과 같은 블록형 태그의 첫 라인에 스타일 적용. ::first-line과 동일
구조:nth-child(even)짝수 번째 모든 자식 태그에 스타일 적용
구조:nth-child(1)첫 번째 자식 태그에 스타일 적용

  • :visited의 제약 사항
    :visited 셀렉터는 color, background-color, border-color 등 색 관련 프로퍼티만 다를 수 있도록 제한된다.

  • 셀렉터 활용

<!DOCTYPE html>
<html><head><title>셀렉터 만들기</title></head>
<style>
h3, li { /* 태그 이름 셀렉터 */
	color : brown;
}
div > div > strong { /* 자식 셀렉터 */
	background : yellow;
}
ul strong { /* 자손 셀렉터 */
	color : dodgerblue;
}
.warning { /* class 셀렉터 */
	color : red;
}
body.main { /* class 셀렉터 */
	background : aliceblue;
}
#list { /* id 셀렉터 */
	background : mistyrose;
}
#list span { /* 자손 셀렉터 */
	color : forestgreen;
}
h3:first-letter { /* 가상 클래스 셀렉터 */
	color : red;
}
li:hover { /* 가상 클래스 셀렉터 */
	background : yellowgreen;
}
</style></head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
	<div>2학기 <strong>학습 내용</strong>입니다.</div>
    <ul id="list">
    	<li><span>HTML5</span></li>
        <li><strong>CSS</strong></li>
        <li>JAVASCRIPT</li>
    </ul>
    <div class="warning">60점 이하는 F</div>
</div>
</body>
</html>



색과 텍스트 꾸미기

색

CSS3에서 색은 RGB, RGBA, HSL 등 3 방법으로 표현한다. 가장 많이 사용하는 RGB 방법만 설명한다. RGB를 이용하여 색을 표현하는 데는 다음 3가지 방법이 있다.

16진수 코드로 색 표현

HTML 언어와 마찬가지로 CSS3에서 색은 빛의 3원색인 빨강(red), 초록(green), 파랑(blue)의 성분으로 다음과 같이 #rrggbb의 16진수 코드로 표현한다.

여기서 각 성분은 0~255(8비트)의 정수이며 16진수(0~0xFF)로 표현한다.
#8A2BE2 색은 red 성분이 0x8A(10진수 138), green 성분이 0x2B(10진수 43), blue 성분이 0xE2(10진수 226)만큼 섞인 보라색(blueviolet)dlek.

  • 다음은 모든 <div> 태그의 글자 색을 보라색으로 출력하는 CSS3 스타일 시트이다.
div { color : #8A2BE2; }

CSS에서 하나의 색은 총 24비트(red, green, blue 각 8비트)로 표현되므로, 2의 24승, 약 1600만개의 색을 표현할 수 있다.

10진수 코드와 RGB()로 표현

다음은 RGB() 표기법으로, r, g, b의 각 성분을 0~255 사이의 10진수로 색을 표현한다.

    red green blue
rgb(138, 43, 226)

<div> 태그의 글자 색을 보라색으로 꾸미는 RGB() 표현법은 다음과 같다.

div { color : rgb(138, 43, 226); }

색 이름으로 표현

CSS3 표준에서는 총 140개 색의 이름을 정하고 있으므로 이 이름을 사용하여 쉽게 색을 표현할 수 있으며, 아래애 몇 가지 색 사례를 들었다.
CSS2에서는 다음 17개의 색에 대해서만 이름을 정하고 있다.

aqua, black, blue, fuchsia, grey, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

색 이름을 사용하여 <div> 태그의 글자색을 보라색으로 꾸미면 다음과 같다

div { color : blueviolet; }

색 관련 프로퍼티

CSS3에는 색을 사용하는 여러 프로퍼티가 있다.

  • color : 색 - HTML 태그의 텍스트 글자 색
  • background-color : 색 - HTML 태그의 배경색
  • border-color : 색 - HTML 태그의 테두리 색

다음은 이들 프로퍼티를 이용하여 <div> 태그에 색을 입히는 사례이다.

div {
	color : blueviolet;
    background-color : gold;
    border-color : #6B8E23;
}
<div>CSS에서 r, g, b로 구성됩니다.</div>
  • 색 활용
<!DOCTYPE html>
<html>
<head><title>CSS3 색 활용</title>
<style>
div {
	margin-left : 30px;
    margin-right : 30px;
    margin-bottom : 10px;
    color : white;
}
</style>
</head>
<body>
<h3>CSS3 색 활용</h3>
<hr>
<div style="background-color:deepskyblue">
	deepskyblue(#00BFFF)</div>
<div style="background-color:brown">
	brown(#A52A2A)</div>
<div style="background-color:fuchsia">
	fuchsia(#FF00FF)</div>
<div style="background-color:darkorange">
	darkorange(#FF8C00)</div>
<div style="background-color:#008B8B">
	darkcyan(#008B8B)</div>
<div style="background-color:#6B8E23">
	olivedrab(#6B8E23)</div>

텍스트

CSS3로 문단 들여쓰기나 문단 정렬 등 텍스트의 출력 모양을 세밀하게 제어할 수 있다. 들여쓰기 (text-indent), 정렬(text-align), 텍스트 꾸미기(text-decoration)에 대해 알아보자. 이들 프로퍼티는 다음과 같은 형태로 사용된다.

  • text-indent : <length>|<percentage>
  • text-align : left|right|justify;
  • text-decoration : none|underline|overline|line-through;
text-indent 프로퍼티에서 length는 고정된 길이로, percentage는 텍스트 블록 전체 폭에 대한 비율로 들여쓰기 한다.
text-align에서 justify는 양쪽정렬을, center는 중앙정렬을,
text-decoration에서 underline은 텍스트에 밑줄을, line-through는 중간 줄을 긋는다.

다음은 text-decoration 프로퍼티를 이용하여 하이퍼링크에 밑줄이 출력되지 않게 한 코드이다.

<a href="http://www.naver.com" style="text-decoration:none">네이버</a>
밑줄 없는 링크
  • 텍스트 꾸미기
<!DOCTYPE html>
<html>
<head><title>텍스트 꾸미기</title>
<style>
h3 {
	text-align : right;
}
span {
	text-decoration : line-through;
}
strong {
	text-decoration : overline; /*윗줄*/
}
.p1 {
	text-indent : 3em; /*3글자 들여쓱;*/
    text-align : justify;
}
.p2 {
	text-indent : 1em;
    text-align : center;
}
</style>
</head>
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<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>

CSS3의 표준 단위

스타일 시트를 작성할 때 크기나 두께, 높이 등에 px, %, em과 같은 다양한 단위가 사용된다.

단위의미사용 예
em배수font-size : 3em; - 현재 폰트의 3배 크기
%퍼센트font-size : 500%; - 현재 폰트의 500% 크기
px픽셀 수font-size : 10px; - 10 픽셀 크기
cm센티미터margin-left : 5cm; - 왼쪽 여백 5cm
mm밀리미터margin-left : 10mm; - 왼쪽 여백 10mm
in인치. 1in = 2.54cm = 96pxmargin-left : 2in; - 왼쪽 여백 2인치
pt포인터. 1pt = 1in의 1/72 크기margin-left : 20pt; - 왼쪽 여백 20포인트
pc피카소(picas). 1pc = 12ptfont-size : 1pc; - 1pc 크기의 폰트
deg각도transform : rotate(20deg); - 시계 방향으로 20도 회전

폰트

폰트는 글자체이다. W3C는 폰트를 지정하기 위해 써 왔던 <font> 태그를 HTML4.0 이후부터 폐기시키고 CSS3의 font 프로퍼티를 이용하도록 하였다. 이것은 문서의 모양을 모두 CSS 언어로 표현하도록 표준화하였기 때문이다.

CSS3의 다양한 폰트

다음과 같이 Times New Roman, Arial, Tohoma, Verdana 등 많은 폰트를 제공한다.

폰트들은 '삐침(serif)' 여부와 '글자 폭'의 특징에 따라, 다음과 같이 Serif, Sans-Serif, Monospace 형으로 분류된다. Serif는 삐침이란 뜻으로 글자의 끝에 삐침 선을 가진 폰트 형이며, Sans는 '없다'란 뜻으로 Sans-Serif 형은 삐침이 없는 폰트 형을 말하며, 삐침 여부와 상관없이 모든 글자의 폭이 동일한 폰트를 Monospace 형이라고 부른다.

폰트 패밀리, font-family

font-family 프로퍼티에는 구체적인 폰트 이름을 지정한다. 하지만 폰트가 브라우저에서 지원되지 않을 경우를 대비하여 다음과 같이 여러 개의 폰트를 지정하여 나열된 순서대로 폰트가 선택되도록 한다. 

     	   콤마로 나열  Arial 폰트가 없는 경우  Times New Romsn 폰트도 없는 경우 유사한 Serif 형 중에서 선택
font-family : Arial, "Times New Roman", Serif:

이것은 먼저 Arial 폰트를 사용할 것을 지시하며, Arial 폰트가 없는 경우 Times New Roman을 사용하고, 이도 없는 경우 나열한 폰트와 비슷한 것을 Serif 형에서 찾아서 사용하도록 지시한다. "Times New Roman"처럼 폰트 이름에 공백이 낀 경우 " "로 묶어 표현한다.

폰트 크기, font-size

font-size 프로퍼티에는 글자 크기를 지정한다. 15px 등 절대 수치로 지정하거나, 절대 수치가 필요 없는 경우 medium, xx-small, small, large, x-large, xx-large, smaller, larger로 적당히 지정할 수 있다.

font-size : 40px; /* 40픽셀 크기 */
font-size : medium; /* 중간 크기, 크기는 브라우저마다 다름 */
font-size : 1.6em; /* 현재 폰트의 1.6배 크기 */

폰트 스타일, font-style

font-style 프로퍼티에는 폰트 스타일을 나타내는 normal, italic, oblique 중 하나를 지정한다. 하나의 폰트는 이 3종류의 스타일을 세트로 가지는데, normal은 전형적인 스타일이며, italic은 필기체, oblique는 italic과 조금 다른 약간 기울인 스타일이다. 하지만 대부분의 폰트에서 italic과 oblique가 같게 출력된다.

font-style : italic;

폰트 굵기, font-weight

font-weight에는 100~900 사이의 숫자로 글자의 굵기를 지정한다. 정확한 수치가 필요 없는 경우, normal, bold, bolder, lighter에서 지정하면 된다. normal은 400, bold는 700이다.

font-weight : 300; /*100~900의 범위에서, 300 정도 굵기*/
font-weight : bold; /*굵게. 700 크기 */

단축 프로퍼티, font

font 프로퍼티는 font-style. font-weight, font-size, font-family를 순서대로 지정하는 단축 프로퍼티이며 다음과 같이 사용된다.

font : font-style font-weight font-size font-family

다음은 20픽셀로 이탤릭 스타일에 bold 굵기의 consolas 체로 지정하는 사례이다.

font : italic bold 20px consolas, sans-serif;
  • font-size, font-family는 반드시 지정되어야 하지만 나머지는 생략될 수 있다. 생략된 경우 디폴트 처리된다. 앞의 CSS3 스타일을 다시 쓰면 다음과 같다.
font : 20px consolas, sans-serif; /* font-size, font-family는 반드시 지정되어야 함*/

  • 폰트 크기는 절대 크기인 픽셀(px) 대신 em으로 지정하는 것이 바람직하다. 개발자가 글자 크기를 px로 고정시킨다 하더라도, 사용자가 브라우저 메뉴에서 문서 전체 크기를 변경하면 글자는 개발자가 지정한 절대 크기로 출력되지 않는다. W3C 역시 em을 사용하여 상대 크기로 지정하도록 권고하고 있으며, 현재 많은 웹 페이지들이 em을 사용하고 있다.

  • CSS3 폰트 활용

<!DOCTYPE html>
<html>
<head>
<title>폰트</title>
<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">font-style italic</p>
<p style="font-style:oblique">font-style oblique</p>
<p>현재 크기의
	<span style="font-size:1.5em">1.5배</span>
    크기로
</p>
</body>
</html>

박스 모델

CSS3에서 박스 모델(Box Model)이란 각 HTML 태그 요소를 하나의 박스로 보고, 박스 크기, 박스 배경 색, 박스 여백 등 HTML 태그를 박스로 다루는 체계를 뜻한다. 박스 모델은 HTML 태그의 모양을 보는 CSS3의 근본 시각이므로 매우 중요하다. 지금부터 CSS3의 박스 모델에 대해 알아보자.

HTML 태그는 사각형 박스로 다루어진다.

CSS3는 각 HTML 요소를 콘텐츠, 패딩(paddinf), 테두리(border), 여백(margin)으로 구성된 사각형 박스로 다룬다. 예를 들어, 다음은 <div>DIVDIVDIV<div> 태그가 출력된 결과이다.

DIVDIVDIV

박스로 구성된다는 사실을 알기 어려우나 콘텐츠, 패딩, 테두리, 여백이 드러나도록 색과 모양을 입혀 놓으면 박스 모델이 보인다.

박스의 구성

  • 콘텐츠 : HTML 태그의 텍스트나 이미지 부분
  • 패딩 : 콘텐츠를 직접 둘러싸고 있는 내부 여백
  • 테두리 : 패딩 외부의 외곽선으로 직선이나 점선 혹은 이미지로 입힐 수 있음
  • 여백 : 박스의 맨 바깥 영역, 테두리 바깥 공간으로 아래위 인접한 태그와 만나는 공간

박스를 제어하는 CSS3 프로퍼티

박스의 각 영역에 크기나 색을 지정하는 CSS3 프로퍼티들을 보여준다. 이 프로퍼티에 적절한 값을 주면 HTML 태그가 출력되는 박스의 색과 모양을 제어할 수 있다.

박스의 크기

박스 크기를 제어해보자. width, height, margin, padding등 CSS3의 프로퍼티로 박스 크기로 지정한 사례를 보여준다.

div.box {
  width : 150px;
  height : 50px;
  margin : 40px;
  border-width : 30px;
  padding : 20px;
}
<div class="box">
  DIVDIVDIV
</div>
  • <div>의 박스 모델 모아보기
<!DOCTYPE html>
<html>
<head><title>박스 모델</title>
<style>
body { background : ghostwhite; }
span { background : deepskyblue; }
div.box {
  background : yellow;
  border-style : solid;
  border-color : peru;
  margin : 40px;
  border-weight : 30px;
  padding : 20px;
}
</style>
</head>
<body>
  <div class="box">
    <span>DIVDIVDIV</span>
  </div>
</body>
</html>
콘텐츠패딩테두리여백
크기 관련 프로퍼티width
height		padding-top
padding-right
padding-bottom
padding-left		border-top-width
border-right-width
border-bottom-width
border-left-width		margin-top
margin-right
margin-bottom
margin-left
크기 관련 단축 프로퍼티paddingborder-widthmargin
스타일 관련 프로퍼티border-top-style
border-right-style
border-bottom-style
border-left-style
스타일 관련 단축 프로퍼티border-style
색 관련 프로퍼티패딩의 색은 띠로 없음. 태그의 배경색으로 칠해짐border-top-color
border-right-color
border-bottom-color
border-left-color		여백은 투명, 부모 태그의 배경이 비춰보임.
색 관련 단축 프로퍼티border-color
전체 단축 프로퍼티border

박스의 색

패딩의 색은 따로 없으며 태그의 배경색이 패딩에 칠해진다. 여백 색도 강제로 줄 수 없다. 여백은 투명하게 처리되어 부모 태그의 배경색이 비춰 보인다. 테두리 색은 개발자들이 임의로 줄 수 있다.

테두리의 두께와 모양 색

테두리는 패딩이나 여백과 달리 두께(width), 모양(style), 색(color)을 지정하는 여러 프로퍼티를 두고 있다. <p> 태그에 테두리를 꾸며보자.

p {
	border-width : 3px;
	border-style : dotted;
	border-color : blue;
}
<p>박스모델</p>

테두리 두께는 border-width에 3px처럼 직접 값을 줄 수 있지만, 정확한 수치가 필요 없는 경우, thin, medium, thick로 지정할 수 있다. 테두리 모양을 나타내는 border-style 프로퍼티의 값은 다음과 같은 것들이 있다.

none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

  • none과 hidden은 두께 0으로 동일

    다음은 <p> 태그의 왼쪽 테두리에만 스타일을 준 사례이다.

    p {
	border-left-width : 3px; /* 테두리 왼쪽 두께 3픽셀 */
	border-left-style: dotted; /* 테두리 왼쪽 점선 */
	border-left-color : blue; /* 테두리 왼쪽 선 색 blue */
}
    <p>박스모델</p>

    테두리를 꾸미는 단축 프로퍼티

    border 프로퍼티는 다음과 같이 테두리의 두께(width), 테두리 선 스타일(style), 테두리 선 색(color)을 한 번에 지정한다.

    border: width style color

    다음은 단축 프로퍼티 border로 3px 두께의 파란색 점선 테두리를 그리는 사례이다.

    p {
	border : 3px dotted blue; /* 3픽셀 파란 점선 테두리 */
}

    고급 테두리 꾸미기

    CSS3는 둥근 모서리 테두리나 이미지 테두리 등 고급 테두리를 지원한다.

    둥근 모서리 테두리, border-radius

    border-radius 프로퍼티를 이용하면 테두리의 모서리를 둥글게 만들 수 있다. 다음은 네 모서리 모두 반지름이 50px인 둥근 모서리를 만든 사례를 보여준다.

    border-radius : 50px;

  • 모서리마다 반지름을 다르게 구성하고자 하면, border-top-left, border-top-right, border-bottom-left, border-bottom-right 프로퍼티에 반지름 값을 달리 주면 된다.

다음은 border-radius에 각 모서리의 반지름을 0, 20px, 40px, 60px로 다르게 만든 사례이다.

border-radius : 0px 20px 40px 60px;
  • 1~4의 왼쪽 위 모서리부터 시계방향 순으로 반지름 적용. 4, 3이 생략되면 2, 1과 같은 반지름의 대칭 구조

다양한 둥근 모서리 테두리

<head>
<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>

이미지 테두리, boder-image

border-image 프로퍼티를 이용하면 테두리에 이미지를 입힐 수 있다. 테두리를 모서리(corner)와 에지(edge)로 구분하여 각각 이미지를 입힐 수 있다.

  • 다음은 border-image를 이용하여 테두리에 이미지를 입히는 CSS3 슽타일이다.
    border-image : url("brder.png") 30 round;
  • border.png : 이미지 URl
  • 30 : 이미지에서 30픽셀 조각을 떼어내 모서리에 배치
  • round : 에지(edge) 이미지 반복 배치 이미지 테두리를 만들기 위해서는 border-width 프로퍼티에 0이 아닌 값이 설정되어 있어야 한다.
    또한 border-image는 border-style 대신 지정되므로 border-style이 먼저 지정되어 있어야 한다. 
    border-width : 30px;
border-style : solid;
    혹은 border 단축 프로퍼티로 테두리 폭과 스타일이 지정되어 있어도 된다.
  • CSS3 스타일 시트에 의해 이미지 테두리가 만들어지는 과정
  1. 원본 이미지 준비
    테두리에 입힐 이미지(border.png)를 준비한다.
    테두리에 이미지를 입힐 <p> 태그 블록 (ex: 20x20 크기의 회색 테두리를 가진 p 태그 블록 - 20px의 테두리)
  2. 모서리와 에지 이미지 자르기
    border.png 이미지의 네 모서리는 30x30 픽셀 크기로 잘라져 4개의 모서리 이미지와 4개의 에지 이미지가 만들어진다. (예시)
  3. 모서리 이미지와 에지 이미지 배치
    만들어진 4개의 모서리 이미지는 다음과 같이 p 태그 테두리의 각 모서리에 배치된다. p 태그의 테두리 크기가 20x20 픽셀이기 때문에, 30x30 픽셀의 이미지가 축소되어 배치된다. 다시 4개의 에지 이미지는 p 태그의 테두리 에지에 배치된다.

  • round : 에지 이미지 반복 배치. 테두리 길이만큼 에지 이미지 크기 자동 조절

  • repeat : 에지 이미지 반복 배치. 에지 이미지 크기 자동 조절 안 됨

  • stretch : 에지 이미지를 테두리 길이만큼 늘여 배치

    다음은 round 방식에 따라 전체 에지 길이에 딱 맞도록 배치된 결과이다.

  • 이미지 테두리 만들기

    <head><title>이미지 테두리 만들기</title>
<style>
p {
  background : yellow;
  width : 20px;
  height : 60px;
  padding : 10px;
  border : 20px solid lightgray;
}
#round { border-image: url(media/border.png") 30 round;}
#repeat { border-image: url(media/border.png") 30 repeat; }
#stretch { border-image: url(media/border.png") 30 stretch; }
  </style>
<body>
  <h3>이미지 테두리 만들기</h3>
  <hr>
  다음은 원본 이미지입니다.<br>
  <img src="media.border.png" alt="원본">
  <hr>
  <p>20x20 크기의 회색 테두리를 가진 P 태그</p>
  <p id="roound">round 스타일 이미지 테두리</p>
  <p id="repeat">repeat 스타일 이미지 테두리</p>
  <p id="stretch">stretch 스타일 이미지 테두리</p>
  </body>
  </html>

    배경

    HTML 태그에 배경색을 칠하거나 배경 이미지를 출력하는 방법

    배경에 색을 칠할까, 이미지로 그릴까? background-color, background-image

    background-color와 background-image는 각각 배경색과 배경 이미지를 지정한다. 둘이 동시에 지정되면 배경색을 먼저 칠하고 배경이미지를 배치하므로, 배경 이미지가 출력되지 않는 영역에만 배경색이 보인다.

    div{
	background-color : skyblue;
	background-image : url("media/spongebob.png");
}

    배경 이미지의 위치ㅣ, background-position

    이 프로퍼티는 박스 내 배경 이미지의 시작 위치를 지정한다. left top(디폴트), left center, left bottom, right top, right center, right bottom, center top, center center, center bottom 등 다양하게 지정할 수 있다.

    background-position : center center; /* 박스 중간에 이미지 출력 */

    배경 이미지의 크기, background-size

    배경 이미지의 실제 크기에 상관없이 출력되는 크기를 지정한다. 다음은 100x100 픽셀 크기로 출력된다.

    background-size : 100px 100px; /* 100x100 크기로 출력 */

    배경 이미지 반복 출력, background-repeat

    배경 이미지를 반복 출력하는 방식을 지정한다. no-repeat, repeat(디폴트), repeat-x, repeat-y 중에서 선택할 수 있다.

  • repeat는 박스 내의 x, y 두 방향으로 반복 출력하고,

  • repeat-x, repeat-y는 한 방향으로만 반복 출력한다. 다음은 y 방향으로 반복 출력하는 사례이다.

    background-repeat : repeat-y;
/* background-positon에 지정된 위치에서 이미지를 위에서 수직 방향으로 반복 출력 */

    배경 만들기 연습

    박스에 배경 이미지를 삽입하기.
    다음은 배경 이미지 크기를 100x100으로 하여 왼쪽 중간에 고정시켰다. 배경 이미지가 출력되지 않는 영역에는 skyblue의 배경색이 출력되었다.

    div {
	background-color : skyblue;
	background-size : 100px 100px;
	background-image : url("media/spongebob.png");
	background-repeat : no-repeat;
	background-position : left center;
}
    <div>SpongeBob is an over-optimistic
  sponge that annoys other characters. </div>

    다음은 배경 이미지를 중간에 배치하고 y 축을 따라 배경 이미지를 아래위로 반복 출력한 경우이다.

    div {
	background-color : skyblue;
	background-size : 100px 100px;
	background-image : url("media/spongebob.png");
	background-repeat : repeat-y;
	background-position : center center;
}
     <div>SpongeBob is an over-optimistic
  sponge that annoys other characters. </div>

    background 단축 프로퍼티

    background는 단축 프로퍼티로서, color, image, positoin/size, repeat, origin 순으로 값을 지정한다.
    위의 코드를 background를 사용하여 수정하면 다음과 같다.

    div {
	background : skyblue url("media/spongebob.png") center center/100px 100px repeat-y;
}

  • background 프로퍼티에는 배경색이나 배경 이미지만 지정할 수도 있다.

    background : skyblue;
background : url("media/spongebob/png");

  • 배경 이미지가 그려진 후 테두리가 그려지기 때문에 테두리는 항상 보인다. border:0;으로 CSS3 스타일을 지정할 때만 테두리가 보이지 않는다.

    시각적 효과

    이미지는 웹 페이지의 로딩 속도를 느리게 만든다.
    CSS3는 텍스트에 시각적 효과를 쉽게 만들 수 있는 프로퍼티를 제공한다.

    텍스트 그림자, text-shadow

    text-shadow 프로퍼티를 이용하면 텍스트에 그림자 효과를 줄 수 있다.
    다음은 text-shadow 프로퍼티의 사용법이다.

    textshadow : h-shadow v-shadow blur-radius color|none

  • h-shadow, v-shadow : 원본 텍스트와 그림자 텍스트 사이의 수평/수직 거리(필수)

  • blur-radius : 흐릿한 그림자를 만드는 효과를 흐릿하게 번지는 길이(선택)

  • color : 그림자 색

  • none : 그림자 효과 없음

    다음은 text-shadow 프로퍼티로 그림자 효과를 만든 사례를 보여준다. 여러 효과를 합치면 효과를 배가시킬 수 있다.

    CSS
div.red {
	text-shadow : 3px 3px red;
}
    HTML
<div class="red">Drop Shadow</div>
    ~~~ CSS div.blur { text-shadow : 3px 3px 5px red; } ~~~ ~~~ HTML
    Drop shadow
    ~~~

  • text-shadow 프로퍼티로 텍스트 그림자 만들기

    <!DOCTYPE html>
<html>
  <head><title>텍스트 그림자</title>
  <style>
  div {
    font : normal 24px verdata;
    }
   .dropText {
    text-shadow : 3px 3px;
    }
    .redText {
    	text-shadow : 3px 3px red;
    }
    .blurText {
    	text-shadow : 3px 3px 5px skyBlue;
    }
    .glowEffect {
    	text-shadow : 0px 0px 3px red;
    }
    .wordArtEffect {
    color : white;
    text-shadow : 0px 0px 3px darkBlue;
    }
    .threeDEffect {
    color : white;
    text-shadow : 2px 2px 4px black;
    }
    .multiEffect {
    	color : yellow;
    	text-shadow : 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    }
    </style></head>
  <body>
    <h3>텍스트 그림자 만들기</h3>
    <hr>
    <div class="dropText">Drop Shadow</div>
    <div class="redText">Color Shadow</div>
    <div class="blurText">Blur Shadow</div>
    <div class="glowEffect">Glow Effect</div>
    <div class="wordArtEffect">WordArt Effect</div>
    <div class="threeDEffect">3D Effect</div>
    <div class="multiEffect">Multiple Shadow Effect</div>
  </body>
</html>

    박스 그림자, box-shadow

    box-shadow 프로퍼티를 이용하면 박스 전체에 그림자 효과를 줄 수 있다.
    다음은 box-shadow 프로퍼티의 사용법이다.

  • h-shadow, v-shadow, blur-radius, color 값은 text-shadow 프로퍼티 경우와 동일하다.

    box-shadow : h-shadow v-shadow blur-radius spread-radius color|none|inset

  • spread-radius : 그림자 크기(선택. 디폴트 0)

  • inset : 음각 박스로 보이게 박스 상단 안쪽(왼쪽과 위쪽)에 그림자 형성

    box-shadow 프로퍼티로 박스 그림자 만들기

    <!DOCTYPE html>
<html>
  <head><title>div 박스에 그림자 만들기</title>
    <style>
      .redBox {
      	box-shadow : 10px 10px red;
      }
      .blurBox {
      	box-shadow : 10px 10px 5px skyBlue;
      }
      .multiEffect {
      	box-shadow : 2px 2px 2px black,
      					0 0 25px blue,
      					0 0 5px darkblue;
      }
      div {
      	width : 150px;
      	height : 70px;
      	padding : 10px;
      	border : 10px solid lightgrey;
      	background-image : url("media/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="multiEffect">뚱이와 함께</div>
  </body>
</html>

    마우스 커서 제어, cursor

    cursor 프로퍼티를 이용하면 HTML 태그 위에 출력되는 마우스의 커서 모양을 지정한다.

    cursor : value

  • value : 마우스 커서 모양을 나타내는 값으로, auto, crosshair, default, pointer, move, copy, help, progress, text, wait, none, zoom-in, zoom-out, e-resize, ne-resize, nw-resize, n-resize se-resize, sw-resize, s-resize, w-resize, uri 중 하나 지정됨

    auto는 브라우저가 결정하는 커서 모양을, default는 브라우저가 실행되는 플랫폼에서 사용하는 디폴트 커서를 지정하며, e-resize, ne-resize 등 크기 조절 커서에서 e, w, s, n은 각각 동서남북 방향을 뜻한다.

  • 마우스 커서

    <!DOCTYPE html>
<html>
<head>
  <title>마우스 커서</title>
</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>
profile
귤티
취준 진입
이전 포스트

[Capstone] HTML 시작

다음 포스트

[Capstone] 단축키

0개의 댓글