CSS #1
스타일 시트(style sheet): HTML5 문서에서 디자인의 표현 한계를 극복하고 다양한 레이아웃 효과를 높이기 위해 글꼴과 글자 크기, 여백과 배경색, 정렬 방식 등의 여러가지 스타일을 모아 작성하는 기술
이점: 하나의 스타일을 작성한 후 여러 개의 HTML5 문서에서 불러들여 사용할 수 있고, 테이블이나 프레임에 의존하지 않고 문서 구조를 표과적으로 표현할 수 있어 편리함
CSS3
CSS(Cascading Style Sheet)3란 W3C에서 웹 표준으로 제작하고 있는 CSS의 최신 버전으로, 웹 페이지에 다양한 스타일을 지정하기 위해서 사용하는 기술
스타일 정의는 스타일 대상(selector)과 스타일 선언부(declaration)로 구성됨
HTML 문서에서 <p>태그 내의 텍스트에 대해 이탤릭체, 파란색 효과를 지정하는 CSS 코드는 다음과 같음
@charset "utf-8"; p {
font-style:italic; color:blue;
}
태그의 스타일을 작성하여 저장한 CSS3 파일은 여러 HTML5 문서에 연결할 수 있으며, HTML5 문서 본문에 존재하는 모든 <p>태그에 적용됨
특징과 기능
1. 브라우저나 플랫폼의 종류에 관계 없이 적용 가능
2. 플래시나 자바 스크립트를 사용하지 않고 동적인 웹페이지 작성 가능
3. 웹 페이지의 스타일 표현 설계 영역을 담당해 HTML 문서 마크업을 간결하게 함
4. 글자, 줄 간격, 여백, 테두리, 배경, 이미지, 하이퍼텍스트 등의 서식을 다양하게 설정 가능
5. 하나의 CSS3 문서로 여러 HTML 문서의 스타일을 한꺼번에 관리하고 효과 적용 가능
선택자
CSS3에서 HTML5의 특정 대상에 대해 스타일을 지정할 때 그 스타일을 적용할 대상을 선택자(selector)라고 함
선택자의 종류에는 범용 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자 등이 있음
1. 범용 선택자
- 웹 페이지의 일부분이 아닌 전체를 대상으로 한 선택자
- ‘*’ 기호로 표현하며 웹 페이지를 전체적으로 디자인 할 때 사용
* { margin:0; padding:0; }
위와 같이 설정하면 문서의 모든 요소의 외부, 내부 여백을 0으로 선언한 것이다.
2. 태그 선택자
- 특정 태그를 선택자로 지정한 것
- 하나의 태그를 대상으로 스타일을 지정할수도, 같은 스타일을 여러 태그에 지정할수도 있음
- 태그 선택자에 지정된 스타일을 HTML 문서에서 참조됨
태그 { 속성:값; }
3. 아이디 선택자
- 특정 태그가 가진 아이디를 선택자로 지정한 것
- 아이디명은 HTML 문서 내에서 중복 없이 유일하게 하나만 존재함
#id명 { 속성:값; }
4. 클래스 선택자
- 특정 태그가 가진 클래스를 선택자로 지정한 것
- 클래스 명은 여러 태그에서 중복으로 지정하여 사용할 수 있으며, 여러 태그에 같은 스타일을 적용할 때 사용함
.클래스명 { 속성:값; }
스타일 작성
특정 일부 태그에만 필요한 경우, 하나의 웹 페이지에만 필요한 경우, 여러 문서에서 공통으로 필요로 하는 경우 등의 상황에서 스타일이 적용됨
1. 인라인 스타일
- 스타일이 필요한 특정 태그에 속성을 기술하는 것처럼 style=“속성:값;”의 형태로 스타일 속성을 태그 안에 작성
<body>
<p style="color:blue;"> 인라인
<span style="color:red;"> 스타일입니다.
</span>
</p>
<p> 일반 스타일입니다.
</p>
</body>
2. 임베디드 스타일
- HTML5 문서의 헤드 부분에 <style> 태그를 사용하여 필요한 스타일들을 한꺼번에 모아 작성하는 방법, 내부 스타일이라고도 함
- 선언해둔 스타일은 본문에서 선언 대상이 나타나면 참조하여 적용됨
<head>
<style>
p { font-size:12pt; color:red; text-align:center; }
</style>
</head>
<body>
<p> 내부 스타일입니다.
</p>
<span> 일반 스타일입니다.
</span>
</body>
p 태그에 대해 임베디드 스타일을 지정한 코드의 실행 화면
3. 외부 스타일
- HTML 문서 외부에 스타일 시트 파일을 작성해두고 여러 웹 페이지에서 해당 스타일이 필요할 경우 스타일 시트 파일을 불러들여 참조하는 방식
- HTML 문서의 head 부분에서 link 태그로 스타일 시트 파일을 연결
#cssex3_1.css
@charset "utf-8";
p{ display:block; font-size:20pt; color:green;
text-align:right; border:5px double red; }
#cssex3_2.html
<head>
<link rel="stylesheet" href="./cssex3_1.css" />
</head>
<body>
<pre>
<p>
외부 스타일이 적용되어 블록이 설정되고
블록의 테두리 두께는 5px, 빨간 이중선으로, 글자는 녹색의 20pt로 블록의 오른쪽에 나타납니다.
</p>
</pre>
<span>
일반 스타일입니다.
</span>
</body>
서식 관련 스타일
1. 글자 관련 속성
=> font-family:글꼴1,글꼴2,…;: 글꼴의 종류 설정. ‘,’로 구분하여 작성하며 차례로 검색해 해당하는 글꼴이 시스템에 있으면 적용
=> font-size:속성값;: 글자 크기 설정(pt, px, %, small, medium, large 등)
=> font-style:속성값;: 글자 효과 설정(italic 등)
=> color:속성값;: 글자 색상 설정(색상 코드, rgb(r,g,b), rgba(r,g,b,a) 등)
=> overflow:속성값;: 태그 표현 범위를 벗어나는 글자 처리에 대해 설정(scroll, visible, auto, hidden 등)
=> font-spacing:속성값;: 글자 간격 설정(normal, pt, px 등)
=> font-weight:속성값;: 글자 굵기 설정(normal, bold, bolder, lighter 등)
#cssex4_1.css
@charset "utf-8";
body { text-align:center; }
#txt1 { font-size:28px; color:rgba(0,0,255, 0.7); }
.over1 { font-family:"궁서", Arial;
width:200px; height:100px; margin:10px auto;
line-height:1.5; overflow:auto; border:1px solid #ccc; }
#cssex4_2.html
<head>
<title> 글자 효과 지정 </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="./cssex4_1.css" />
</head>
<body>
<div id="txt1"> 글자 관련 스타일 </div>
<br />
<br />
<div class="over1"> 글자 관련 스타일 속성을 이용하여 글꼴, 글자크기와모양,색상,표현범위지정등을설정한다.이외에도자간,굵기,줄간격을설정할수있다.
</div>
</body>
2. 문단 관련 속성
=> text-align:속성값;: 문단 정렬 설정(left, center, right, justify(좌우 정렬))
=> text- indent:속성값;: 문단 들여쓰기/내어쓰기 설정(px, %, 음수(내어쓰기))
=> line-height:속성값;: 줄 간격 설정(normal, pt, px, % 등)
=> text-transform:속성값;: 영문자의 대소문자 변환 설정(none, uppercase, lowercase, capitalize)
=> text-decoration:속성값;: 문장 장식 설정(none, underline, overline, line-through 등)
=> text-shadow:x,y,blur,color;: 글자의 그림자 설정(글자로부터의 x,y 이동 좌표, 번짐 정도, 그림자의 색상)
#cssex5_1.css
@charset "utf-8";
h1 { text-align:center; text-indent:50px; }
#text1 { text-transform:capitalize; }
#text2 { text-decoration:underline; }
#text3 { text-decoration:line-through; }
a:link { text_decoration:none; }
a:hover { text-decoration:underline; color:red; }
#cssex5_2.html
<head>
<title> 문단과 링크 효과 설정 </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="./cssex5_1.css" />
</head>
<body>
<h1> 문단과 링크 효과 </h1>
<p id="text1"> CSS3의 문장과 문단 style </p>
<p id="text2"> 문장 밑줄 효과(underline) </p>
<p id="text3"> 문장 취소선 효과(line-through) </p>
<a href="http://www.naver.com"> 네이버로 이동 </a>
<br />
<br />
링크 위에 마우스를 올리면 밑줄이 나타납니다. <br />
</body>
3. 여백과 위치 관련 속성
=> margin:속성값;: 태그 문단 바깥쪽 여백 설정
=> padding:속성값;: 태그 문단 안쪽 여백 설정
=> float:속성값;: 태그 문단 수평 방향 배치(left, right)
=> position:속성값;: 태그 문단 위치 설정(static, relative, absolute)
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 여백과 위치 지정 </title>
<meta charset="utf-8" />
<style>
body { margin:0; padding:0; }
p, div { display:block; margin:50px 10px; width:300px; text-align:center; background:#ddd; }
.text1 { border:1px solid red; color:green; float:left; }
.text2 { border:3px dotted green; float:left; }
</style>
</head>
<body>
<div class="text1"> 여백과 위치 1 </div>
<p class="text2">여백과위치2 </p>
</body>
</html>
4. 목록 관련 속성
=> list-style:속성값;: 전체 목록 스타일 지정
=> list-style-type:숫자 타입;: 숫자 타입(아라비아 숫자, 로마자) 글머리 기호 설정(none, decimal, upper-alpha(영문 대문자), lower-alpha, upper-roman(로마자 대문자), lower-roman 등)
=> list-style-image:url(“이미지 경로”);: 글머리 기호를 이미지로 대체 지정
=> list-style-position:속성값;: 글머리 기호의 위치 지정(inside(목록 안쪽), outside(목록 바깥쪽))
<head>
<style>
body { margin:0; padding:0; }
#main_menu { background:#aaa; }
#main_menu li { padding:5px; display:inline-block; list-style:none; }
</style>
</head>
<body>
<nav id="main_menu">
<ul>
<li> 회사 소개 | </li>
<li> 공지사항 | </li>
<li> 자주 묻는 질문 | </li>
<li> 자유게시판 </li>
</ul>
</nav>
</body>
5. 테두리 관련 속성
=> outline:속성값;: 전체 아웃라인 설정(두께, 스타일, 색상 등 지정)
=> border:속성값;: 전체 테두리 설정(두께, 스타일, 색상 등)
=> border-width:속성값;: 테두리 두께 설정(pt, px, in, cm값 지정)
=> border-color:속성값;: 테두리 색상 설정(색상명 혹은 색상값)
=> border-style:속성값;: 테두리 스타일 설정(none, solid(단일 선), double(이중 선), dash(대시), dot(점), groove(홈 모양) 등)
=> border-radius:속성값;: 테두리의 둥근 정도 설정(px 등 값)
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 테두리와 아웃라인 </title>
<meta charset="utf-8" />
<style>
body { text-align:center; font:bold 16px Arial; }
.box1 { display:block; width:600px; height:100px; border:2px solid red; outline:3px dotted #00f; outline-offset:10px; }
.box2 { display:block; width:600px; height:100px; border:3px dashed #000; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; }
</style>
</head>
<body>
<h2> 테두리와 아웃라인 효과 </h2>
<p class="box1"> 높이100px,너비300px크기의블록에 <br/>
빨간색 단선 테두리와 <br />
파란색 점 아우트라인 효과를 준 스타일입니다. </p>
<br />
<p class="box2"> 높이100px,너비300px크기의블록에<br/>
대시 테두리, <br />
박스의 둥근 모서리 효과를 준 스타일입니다. </p>
</body>
</html>
6. 배경 관련 속성
=> background:속성값;: 배경과 관련한 전체적인 스타일 지정
=> background:url(“이미지 경로”);: 배경 이미지 삽입
=> background-color:속성값;: 배경색 삽입
=> background-size:속성값;: 배경 이미지 크기 설정(auto, cover, contain)
=> background-repeat:속성값;: 배경 이미지의 반복 설정(repeat, repeat-x, repeat-y, no-repeat)
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 배경 이미지 </title>
<meta charset="utf-8" />
<style>
body { background:url("./LA1.png"); background-repeat:no-repeat; background-size:cover; text-align:center; }
#title { display:block; width:300px; height:30px; text-align:center; margin:50px auto; border:1px solid; border-radius:20px; background:-webkit-linear-gradient(top,#fff,#000); }
#font1 { color:rgb(255,255,255); font-size:16px; }
</style>
</head>
<body>
<p id="title"> 그래디언트 배경 설정 </p>
<p id="font1" > 배경 이미지가 가로/세로 크기 비율은 고정되고
이미지의 가로 크기만 본문의 가로 크기에 맞추어 집니다. </p>
</body>
</html>
'Programming > Web Programming' 카테고리의 다른 글
| JavaScript Basic #1 (0) | 2017.07.13 |
|---|---|
| CSS #2 (0) | 2017.07.12 |
| HTML Basic #3 (0) | 2017.07.10 |
| HTML Basic #2 (0) | 2017.07.08 |
| HTML Basic (0) | 2017.07.05 |
