'Legend 개발자/CSS3' 카테고리의 글 목록

No.005.CSS3 좌표계 [2017-05-19]

Legend 개발자/CSS3 2017. 5. 19. 12:55

5. CSS3 좌표계

1. CSS3 좌표계

1) 레이아웃 위치 개념

● 절대 좌표(position : absolute) : 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정

p {position : relative}

● 상대 좌표(position : relative) : 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정

p { position : relative; }

2) CSS3단위

단위	의미
Px	pixel의 줄임말로 컴퓨터 화면의 한 점 크기를 나타냄 (웹 브라우저의 기본 폰트 크기 : 16픽셀)
%	비율을 의미(100% : 기준크기)
in	인치
cm	센티미터
mm	밀리미터
Pt	point의 줄임말로 보통 글꼴의 단위로 사용한다.
em	1em은 현재 글꼴의 크기를 나타낸다. (예 - 2em은 현재 글꼴의 2배 크기가 된다.)

3) 절대 좌표 실습

● 절대 좌표의 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

h2{

position:absolute;

left:100px;

top:50px;

}

<style>

</head>

<body>

<h2>절대좌표를 적용한 텍스트</h2>

</body>

</html>

4) 상대 좌표 실습

● 상대 좌표의 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

.pos_left {

position:relative;

left:-100px;

}

.pos_right {

position:relative;

left:+100px;

}

<style>

</head>

<body>

<h2 class="pos_left">원래위치에서 왼쪽으로 -100px 만큼 이동!!!</h2>

<h2 class="pos_right">원래위치에서 오른쪽으로 +100px 만큼 이동!!!</h2>

</body>

</html>

2. CSS3 레이아웃 사용법

1) float 사용법

● float 속성 : display와 position과 같이 웹 페이지의 레이아웃을 구성할 때 많이 사용하는 속성

- 이미지와 텍스트를 쉽게 배치하기 위해 만들어짐

- float가 선언된 엘리먼트는 왼쪽 또는 오른쪽으로만 위치할 수 있고 위아래는 불가능

- float 이후에 오는 엘리먼트는 그 주변을 채워나가며 표시됨

- 이미지와 텍스트를 활용한 레이아웃에서 많이 사용

- 화면 크기에 따라 동적으로 변할 수 있는 레이아웃 작업에 많이 이용

p{ float : 속성 값; }

속성 값	내용
inherit	부모(상위)부터 상속받음
left	요소를 왼쪽 방향으로 float된 블록 박스로 설정
right	요소를 오른쪽 방향으로 float된 블록 박스로 설정
none	요소를 float 하지 않음

2) float을 활용한 실습

● float을 홀용한 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

.box_a {float:left; width:100px; height:50px}

.box_b {float:right; width:100px; height:50px}

.box_c {margin:0px auto; width:100px; height:50px}

<style>

</head>

<body>

<div class="box_a">박스에 들어가는 내용입니다</div>

<div class="box_b">박스에 들어가는 내용입니다</div>

<div class="box_c">박스에 들어가는 내용입니다</div>

</body>

</html>

3) clear 사용법

● clear 속성 :float 영향을 받는 엘리먼트를 강제로 취소시킬지 아닐지 지정하는 것

- 더 이상 float을 쓰지 않겠다는 것을 의미함

p { clear : 속성 값; }

속성 값	내 용
inherit	부모(상위)부터 상속받음
left	왼쪽에서 float된 컨텐츠 지정 clear
right	오른쪽에서 float된 컨텐츠 지정 clear
both	왼쪽 오른쪽 모두 float된 컨텐츠 지정 clear
none	Float에서 설정된 값을 clear 하지 않음

4) clear를 활용한 실습

● clear를 활용한 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

.box_a {float:left; background: gray; width:100px; height:50px}

.box_b {float:right; background: red; width:100px; height:50px}

.box_c {clear:both; background: blue; width:100px; height:50px}

</style>

</head>

<body>

</body>

</html>

'Legend 개발자 > CSS3' 카테고리의 다른 글

No.004.CSS3 선택자 [2017-05-19] (0)	2017.05.19
No.003.CSS3 레이아웃 및 HTML5 적용 [2017-05-17] (0)	2017.05.17
No.002.CSS3 스타일링 [2017-05-17] (0)	2017.05.17
No,001.CSS3의 개요 [2017-05-17] (0)	2017.05.17

Posted by 전설의아이

|

No.004.CSS3 선택자 [2017-05-19]

Legend 개발자/CSS3 2017. 5. 19. 10:31

CSS3 선택자

1. CSS3의 선택자 개요

1) CSS 선택자(Selector)란?

● CSS 선택자 : 속성이 어디에 적용 되었는지 표시하는 역할을 함

- 모든 CSS는 선택자의 조합으로 구성

- 선택자의 종류는 매우 다양함

선택자 { 속성 : 속성 값 ; } 속성 : 속성 값 ;

● Rule Set : HTML페이지 안의 특정요소들의 Rendering 하는 방법을 브라우저에 알려주는 문장

- 스타일에 관한 규칙들을 집합처럼 나타냄

- 문장들이 모여 스타일 시트 구성

div {width : 960px ;}

2) HTML, CSS, JavaScript 관계

● 웹 기술의 핵심요소 :HTML, CSS, JavaScript

● HTML : 웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어

● CSS : 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트

● JavaScript : 동적인 화면을 웹 페이지에 구현하기 위해 사용하는 스크립트 언어

3) CSS 규칙의 종류

● CSS의 장점

- 사용할 설정하기가 매우 쉬움

- 플러그 인이나 소프트웨어가필요 없음

- 단순한 규칙으로 이루어진 텍스트 파일

● HTML 선택자 : 태그가 보이는 방식을 재정의

h1 { color : blue ; } // h1은 <h1> 태그에 대한 '선택자'

● 클래스 선택자 : 원하는 HTML 태그 모두에 적용 가능

.maintext { color: red; align : center; }

● ID 선택자 : 모든 HTML 태그에 적용 가능

#myhome { position : absolute; top : 5px; }

2. CSS3의 선택자 종류

1) CSS3 선택자의 종류

● 태그 선택자 : 특정 태그에 스타일 적용할 때 사용

- CSS 작성시 가장 기본이 되는 방식

- HTML 태그에 직접 스타일 지정

- 페이지 안에 있는 해당 태그 모두에 영향

h1 { color : red; text-align : center; }

● 클래스 선택자 : 특정 부분에 스타일 적용할 때 사용

- 스타일을 사용 하고자 하는 엘리먼트에 클래스 이름 지정

- 정의한 스타일을 여러 엘리먼트에 적용하여 사용

- 맨 앞에 .(마침표)를 붙이고 영문으로 클래스 이름 작성

.cont { color : blue; text-align : center; }

● 아이디 선택자 : 특정 부분에 스타일 적용할 때 사용

- 페이지 안에서 고유한 엘리먼트를 나타내기 위해 사용

- HTML 엘리먼트에도 고유한 이름을 지어서 사용

- 맨 앞에 #을 붙이고 영문으로 아이디 이름 작성

#pos {text-align : center; }

● 하위 선택자 : 모든 하위 요소에 스타일 적용할 때 사용

- 선택자들간의 관계를 동시에 고려한 선택자

- 선택자의 영향력 안에 들어 있는 특정 선택자를 가리킴

- 부모 요소에 포함된 모든 하위 요소에 스타일 적용

- 기존 태그 뒤의 태그에 자동으로 스타일을 적용시키고자 할 때 많이 사용

p {color : red;}

#pos {text-align : center;}

● 전체 선택자 : 모든 요소에 스타일 적용할 때 사용

- 페이지에 있는 모든 요소를 대상으로 스타일 적용

- *를 선택자 이름으로 대신 사용

*{ color : green; text-align : center; }

2) 태그 선택자 실습

● 태그 선택자를 활용한 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

h1{

color : red;

text-align : center;

}

</style>

</head>

<body>

<h1>안녕하세요</h1>

</h1>이 문장을 h1태그 선택자로 스타일이 입혀졌습니다. <h1>

</body>

</html>

3) 클래스 선택자 실습

● 클래스 선택자를 활용한 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

.cont {

color: blur;

text-align: center;

}

</style>

</head>

<h1>안녕하세요</h1>

<h1>이 문장을 클래스 선택자로 스타일이 입혀졌습니다. </h1>

</body>

</html>

4) 아이디 선택자 실습

● 아이디 선택자를 활용한 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

#pos {

text-align: center;

}

</style>

</head>

<h1>안녕하세요</h1>

<h1>이 문장을 아이디 선택자로 스타일이 입혀졌습니다.<h1>

</body>

</html>

5) 하위 선택자 실습

● 하위 선택자를 활용한 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

p {

color : blue;

text-align : center;

}

#pos {

color : red;

}

</style>

</head>

<body>

</div>

</body>

</html>

6) 전체 선택자 실습

● 전체 선택자를 활용한 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

* {

color: green;

text-align: center;

}

</style>

</head>

<body>

</body>

</html>

'Legend 개발자 > CSS3' 카테고리의 다른 글

No.005.CSS3 좌표계 [2017-05-19] (0)	2017.05.19
No.003.CSS3 레이아웃 및 HTML5 적용 [2017-05-17] (0)	2017.05.17
No.002.CSS3 스타일링 [2017-05-17] (0)	2017.05.17
No,001.CSS3의 개요 [2017-05-17] (0)	2017.05.17

Posted by 전설의아이

|

No.003.CSS3 레이아웃 및 HTML5 적용 [2017-05-17]

Legend 개발자/CSS3 2017. 5. 17. 15:35

CSS3 레이아웃 및 HTML5 적용

1. CSS3의 레이아웃

1) 블록 레벨 요소와 인라인 레벨 요소

● 블록 레벨 요소 : 태그를 사용하여 요소를 삽입했을 경우 혼자서 한 줄을 차지하는 요소

- 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음

- <div>, <p> 태그 등이 대표적인 블록 레벨 요소를 만드는 태그

● 인라인 레벨 요소 : 줄을 차지하지 않는 요소

- 화면에 표시되는 콘텐츠 만큼만 영역을 차지하며 그 외의 공간에는 다른 요소가 와도 상관 없음

- 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있음

- <img>, <strong> 태그 등이 대표적인 인라인 레벨 요소를 만드는 태그

2) display 속성

● display 속성 : 요소를 어떻게 보여줄 것인지 지정하는 것

- 사용할 수 있는 속성 값들이 너무 많음

- 이 값들을 브라우저에서 모두 지원하지 않음

display : 속성 값;

● display 속성을 활용하여 텍스트들이 인라인 레벨 박스 형태로 보여지는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

ul li {

display: inline;

float: left;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

● display 속성을 활용하여 세로로 정렬되어 있는 박스를 가로로 정렬되도록 하는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

div {

display: inline;

float: left;

width: 100px;

height: 100px;

margin: 10px 5px;

paddingL 5px;

border: 2px solid black

}

.ex1 { background: lightblue; }

.ex2 { background: lightgreen; }

.ex3 { background: lightyellow; }

</style>

</head>

<body>

</body>

</html>

3) 원하는 형태의 배치 스타일

● position 속성 : 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성

- HTML 과 CSS를 이용해 웹 문서를 만들 때 중요하게 사용하는 속성 중 하나

- 텍스트나 이미지 등 여러 개의 요소를 원하는 위치에 배치 할 수 있음

position : 속성 값;

속성 값	내용
static	요소를 문서의 흐름에 맞춰 배치
relative	이전 요소에 자연스럽게 연결하여 배치
absolute	원하는 위치를 지정하여 배치
fixed	지정한 위치에 고정하여 배치(요소가 화면에서 잘릴 수도 있음)

● visibility 속성 : 요소를 보이게 하거나 보이지 않게 하기

- 특정 요소를 화면에 보이게 하거나 보이지 않게, 또는 겹치게 설정

visibility : 속성 값;

속성 값	내용
visible	요소를 화면에 표시함(기본 값)
hidden	요소가 화면에서 감춰짐 (크기는 그대로 유지하기 때문에 배치에 영향을 줌)
collapse	표의 행렬이나 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절
inherit	부모 요소의 visibility 속성을 상속

● z-index 속성 : 요소 쌓는 순서 정하기

- CSS에서 각 요소는 수평이나 수직 이동뿐만 아니라 한 요소 위에 다른 요소를 쌓는 z 축도 고려해야 함

- z-index 값이 작을수록 아래에 쌓이고, 큰 값이 위로 쌓임

- z-index 값을 명시하지 않을 경우에는 기본 값으로 z-index:1으로 설정됨

● position 속성에 relative 값을 적용해보는 실습 에제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.pos1 {

position:static;

background: lightblue;

}

.pos2 {

position: relative;

left: 10px;

top: 10px;

background: lightgreen;

}

.pos3 {

position: static;

background: lightyellow;

}

</style>

</head>

<body>

</body>

</html>

● visibility 속성에 hidden 값을 적용해보는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.visible {

visibility: visible;

}

.hidden {

visibility: hidden;

}

</style>

</head>

<body>

</body>

</html>

● z-index 속성을 활용하여 이미지 요소를 쌓는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.index1 {

position: absolute;

left: 10px;

top: 10px;

z-index: 2;

}

.index2 {

position: absolute;

left: 180px;

top:20px;

z-index: 1;

}

.index3 {

position: absolute;

left: 25px;

top: 160px;

z-index:3;

}

</style>

</head>

<body>

</body>

</html>

2. CSS3와 HTML5 연동

1) 인라인 스타일

● 인라인 스타일 : 한 줄짜리 스타일을 뜻하며 태그 안에 직접 지정하여 사용하므로 HTML 과 섞어서 사용

● 인라인 스타일을 활용하여 텍스트 배경 색상과 텍스트 색상이 인라인 스타일로 보여지는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</body>

</html>

2) 내부 스타일

● 내부 스타일 : HTML 파일 안에 별도 영역으로 스타일을 정의하며 일반적으로

안에서 사용

p {

background-color :red;

color : white;

}

</style>

● 인라인 스타일을 활용하여 텍스트의 배경 색상과 테스트 색상을 변경하는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

p {

background: red;

color: white;

}

</style>

</head>

<body>

</body>

</html>

3) 외부 스타일

● 외부 스타일 : 스타일 내용을 별도의 페이지로 빼서 사용하는 방법

● 외부 스타일을 적용하기 위한 HTML 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</body>

</html>

● 외부 스타일을 적용하기 위한 CSS 실습 예제

p {

background: red;

color: white;

}

'Legend 개발자 > CSS3' 카테고리의 다른 글

No.005.CSS3 좌표계 [2017-05-19] (0)	2017.05.19
No.004.CSS3 선택자 [2017-05-19] (0)	2017.05.19
No.002.CSS3 스타일링 [2017-05-17] (0)	2017.05.17
No,001.CSS3의 개요 [2017-05-17] (0)	2017.05.17

Posted by 전설의아이

|

No.002.CSS3 스타일링 [2017-05-17]

Legend 개발자/CSS3 2017. 5. 17. 12:13

CSS 스타일링

1. 텍스트 관련 스타일

1) 글꼴 스타일

● font-family : 글꼴 지정하기

- 웹 문서에서 사용할 글꼴을 지정

- <body> 태그, <p> 태그, <hn>(n=1,2,3,4,5,6) 태그처럼 텍스트를 사용하는 요소들에서 주로 사용

- 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴 지정 가능

- <body> 스타일에서 한 번 정의하면 문서 전체에 적용(상속됨)

p { font-family : "글꼴이름" ["글꼴 이름", 글꼴 이름"]}

● @font-face : 웹 폰트 사용하기

- CSS3에서는 웹폰트를 표준으로 채택

- 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보를 함께 저장

- 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템에 다운로드 하게 함

@font-face {font-family : 글꼴 이름; src:url(글꼴 파일 경로) format (파일유형); }

● font-size : 글자 크기 조절하기

- CSS3에서는 웹 폰트를 표준으로 채택

- 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보를 함께 저장

- 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템에 다운로드 하게 함

● font-style : 글자를 이탤릭체로 표시하기

- 글자를 이탤리체로 표현할지 여부 결정

font-style : 속성 값;

2) font-family 실습

● font-family를 사용하여 폰트를 변경하는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

p { font-family:'Open Sans' ;}

</style>

</head>

<body>

font-family를 사용하지 않은 일반적인 텍스트 !!!

<p> font-family를 이용하여 폰트를 적용한 텍스트 !!! </p>

</body>

</html>

3) @font-face 실습

● @font-face를 사용하여 폰트를 변경하는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

@font-face {

font-family: "Bitstream Vera Serif Bold";

src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");

}

p { font-family: "Bitstream Vera Serif Bold", serif }

</style>

</head>

<body>

@font-face를 사용하지 않은 일반적인 텍스트 !!!

<p> @font-face를 사용한 텍스트 !!! </p>

</body>

</html>

4) font-size, font-style 실습

● font-size, font-style을 사용하여 폰트를 변경하는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.no1 {

font-size: 20px;

font-style: normal;

}

.no2 {

font-size: 30px;

font-style: italic;

}

.no3 {

font-size: 40px;

font-style: oblique;

}

</style>

<body>

<p class = "no1"> font-style 속성 값 : normal </p>

<p class = "no2"> font-style 속성 값 : italic </p>

<p class = "no3"> font-style 속성 값 : oblique </p>

</body>

</html>

5) 텍스트 스타일

● direction : 텍스트 쓰기 방햐을 지정

- 기본적으로 왼쪽에서 오른쪽 표시

- direction 속성을 이용하여 오른쪽에서 왼쪽으로 표시 가능

p { direction : 속성값; }

● text-align : 텍스트 정렬하기

- 문단의 텍스트 정렬 방법 지정

text-align : 속성 값;

● text-decoration : 텍스트에 줄 표시하기

- 텍스트에 밑줄을 긋거나 가로지르는 줄을 표시

- 텍스트 링크의 밑줄을 없앨 때 주로 사용

text-decoration : 속성 값;

6) direction 실습

● direction을 사용하여 텍스트를 이동시키는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.direction1 {

direction : ltr;

}

.direction2 {

direction : rtl;

}

</style>

<body>

<p class = "direction1"> 텍스트를 왼쪽에서 오른쪽으로 표시 </p>

<p class = "direction2"> 텍스트를 오른쪽에서 왼쪽으로 표시 </p>

</body>

</html>

7) text-align 실습

● text-align을 사용하여 텍스트를 이동시키는 실습 에제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.aligh_left {

text-align: left;

}

.aligh_right {

text-align: right;

}

.aligh_center {

text-align: center

}

.aligh_justify {

text-align: justify;

}

</style>

<body>

</body>

</html>

8) text-decoration 실습

● text-decoration을 사용하여 텍스트를 이동시키는 실습 에제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.decoration1 {

text-decoration: none;

}

.decoration2 {

text-decoration: underline;

}

.decoration3 {

text-decoration: overline;

}

.decoration4 {

text-decoration: line-through;

}

</style>

<body>

<p class = decoration1> 텍스트 밑줄표시하지 않기!!! </p>

<p class = decoration4> 텍스트 영역을 가로지르는 선 표시!!! </p>

</body>

</html>

2. 테두리 관련 스타일

1) 박스 관련 스타일

● margin : 요소 바깥쪽 여백 설정하기

- margin-top, margin-right, margin-bottom, margin-left

- 요소의 바깥 위쪽, 오른쪽, 아래쪽, 왼쪽 margin 설정

- 네 가지 속성을 한 번에 사용할 수 있음

● padding : 콘텐츠 영역과 테두리 사이 여백 설정하기

- padding-top, padding-right, padding-bottom, padding-left

- 요소의 위쪽, 오른쪽, 아래쪽, 왼쪽 padding 설정

- 네 가지 속성을 한번에 사용할 수 있음

● border-radius : 박스 모서리 둥글게 만들기

- 지금까지 박스의 모서리를 부드럽게 만들 때 그래픽이나 자바스크립트를 이용함

- border-radius 속성을 이용하여 모서리 부분을 손쉽고 다양하게 처리 가능

- 각각의 모서리 별로 다르게 만들 수 있음

2) margin 실습

- margin을 사용하여 텍스트를 배치하는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

p {

margin-top: 50px;

marginright: 100px;

margin-bottom: 50px;

margin-left: 100px;

}

</style>

<body>

</body>

</html>

3) border-radius 실습

● border-radius를 사용하여 둥근모서리의 사각형을 만드는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

.radius1 {

border-radius: 5px;

border: 3px solid;

}

.radius2 {

border-radius: 10px;

border: 3px solid;

}

.radius3 {

border-radius: 20px;

border: 3px solid;

}

</style>

<body>

</body>

</html>

4) 테두리 관련 스타일

● border-width : 테두리 두께 지정학

- border-top-width, border-right-width, border-bottom-width, border-left-width

- 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 두께를 지정

- 네 가지 속성을 한 번에 사용할 수 있음

border-width : 키워드 | 크기 값;

● border-color : 테두리 색상 지정하기

- border-top-color, border-right-color, border-bottom-color, border-left-color

- 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 색상을 지정

- 불필요함

- 네 가지 속성을 한번에 사용할 수 있음

border-color : 속성 값;

● border-style : 테두리 선스타일 지정하기

- border-top-style, border-right-style, border-bottom-style, border-left-style

- 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 선스타일을 지정

- 네 가지 속성을 한 번에 사용할 수 있음

- 기본 값은 none-따로 지정하지 않으면 테두리가 화면에 표시되지 않음

border-style : 속성 값;

5) 테두리 관련 속성 실습

● border-width, border-color, border-style을 활용하여 테두리 속성을 변경해보는 실습 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

p {

border-width: thick;

border-color: blue;

border-style: solid;

}

</style>

<body>

</body>

</html>

'Legend 개발자 > CSS3' 카테고리의 다른 글

No.005.CSS3 좌표계 [2017-05-19] (0)	2017.05.19
No.004.CSS3 선택자 [2017-05-19] (0)	2017.05.19
No.003.CSS3 레이아웃 및 HTML5 적용 [2017-05-17] (0)	2017.05.17
No,001.CSS3의 개요 [2017-05-17] (0)	2017.05.17

Posted by 전설의아이

|

No,001.CSS3의 개요 [2017-05-17]

Legend 개발자/CSS3 2017. 5. 17. 11:12

1. CSS의 개요

1.CSS의 개요 및 CSSx와의 차이점

1) CSS3의 개요

● CSS : 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트

- CSS를 적용하면 웹 페이지의 한 가지 요소만 변경해도 전체 페이지의 내용이 한꺼번에 변경할 수 있음

- 기존 태그로 콘텐츠를 보여주는 방식을 재정의하여 HTML의 기능을 개선하는 별도의 스타일시트 언어

● CSS의 장점

- 작은 용량, 이해하기 쉬운 구조

- Table 코딩에 비행 보통 50%정도 코드 절약

- 디자인과 웹 구조의 완벽한 분리

- 웹 표준에 맞는 사이트 제작

- W3C에서 웹 표준 정의

2) 스타일 형식

● 검은색으로 된 텍스트 단락 글자를 파란색으로 변경하기 위한 예제

- p{ color : blue; }

3) CSS의 동작 방식

(1) 방문자가 주소창에 주소를 입력하거나 링크를 클릭하여 웹 페이지 열기

(2) 서버는 HTML 파일과 연결되거나 HTML 파일에 포함된 다른 파일과 함께 HTML 파일을 방문자의 컴퓨터로 전송

(3) CSS 코드의 위치와 상관없이 방문자의 브라우저는 CSS를 해석하고 이를 HTML에 적용

(4) 브라우저는 렌더링 엔진을 사용해 웹 페이지를 렌더링하고 이를 브라우저 창에 출력

4) CSS를 사용하여 텍스트 색상 변경하기 실습

● CSS를 사용하여 텍스트 색상 변경하는 실습 예제

<!doctype html>

<head>

<mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

h1 { color: red; }

p { color: blue; }

</style>

</head>

<body>

</body>

</html>

5) CSS3와 CSSx의 차이점

● CSS1

- W3C는 1996년에 첫 번째 CSS 공식 버전 발표

- 텍스트 서식, 폰트 설정, 마진 설정 같은 CSS와 관련한 핵심 기능 포함

- 넷스케이프4, 인터넷 익스플로러 3,4에서 지원함

● CSS2

- 1998년에 발표되었으며 현대 브라우저에서 가장 많이 채택되어 사용하고 있음

- 앞 버전의 모든 속성을 포함하고 국제적인 접근성 및 미디어 관련 CSS를 지정하는데 초점을 둠

- 2006년에 CSS2.1 수정 버전 발표

- 일부 에러 수정 및 몇 가지 이슈를 명확히 정리하였음

● CSS3

- 모든 명세를 포함한 단일 형태의 CSS3는 존재하지 않음

- 한번에 전체 명세를 발표하는 대신 일련의 모듈로 명세를 분할 하였음

- 각 모듈은 각자 별도의 개발 일정을 가지고 개발을 진행하고 있음

2. CSS3와 HTML5 관계

1) CSS와 HTML

● 웹 기술의 세 가지 핵심 요소

- 명사 HTML

- 동사 JavaScript

- 형용사와 부사 CSS

● CSS 사용시 얻을 수 있는 장점

- 설정이 용이

- 플러그인이나 소프트웨어가 불필요함

- 단순 규칙으로 이루어진 텍스트

● CSS 규칙의 종류

- HTML 선택자

- 클래스

- ID

● HTML 선택자 : HTML 태그의 텍스트 영역

- HTML 선택자는 CSS 규칙에서 태그가 보이는 방식을 재정의

h1 { color : blue; }

는

<h1>.....</h1>에 스타일을 적용한다.

●클래스 : 다수의 엘리먼트에 스타일을 적용하고자 할 때 사용

- 클래스 선택자는 가장 다용도로 사용할 수 있음

<엘리먼트 class="클래스 이름"></엘리먼트>

●ID : 클래스 선택자와 비슷하게 ID 규칙은 모든 HTML 태그에 적용

- ID 선택자는 자바스크립트 함수에서 객체를 사용할 수 있도록 특정 페이지상에서 특정 HTML 태그에 한 번만 적용해야 함

#myhome {position : absolute; top : 5px;}

는

<h1 id="myhome">......</h1>에 적용한다.

2) HTML에서 CSS를 사용하는 방법

● 인라인 스타일 : 한 줄짜리 스타일을 뜻함

- 태그 안에 직접 지정하여 사용(HTML과 섞어서 사용)

- 태그에 직접 스타일을지정할 때 손쉽게 이용할 수 있음

- 많이 작성할 경우 나중에어느 곳에 있는지 알아내기 어려움

- 유지, 보수 면에서 볼 때 가급적 사용을 자제하는 것이 좋음

● 내부 스타일 : HTML 파일 안에 별도 영역으로 스타일을 정의함

- 일반적으로 <head>...</head> 안에서 사용

- 영향을 주는 범위는 페이지 안의 전체 태그

- HTML 문서 하나가 고유한 CSS 내용을 가질 때 사용

h1 {

background-color : red;

color : white;

}

</style>

● 외부 스타일 : 스타일 내용을 별도의 페이지로 빼서 사용하는 방법

- 하나의 스타일로 여러 개의 HTML 페이지에 적용하여 사용하므로 유지 및 보수가 편리

- 각각의 HTML 페이지 문서느 <head> 섹션 안에 <link> 태그를 사용하여 스타일 페이지와 연결

- 스타일 시트 파일으 확장자는 css

- main.html ↔ style.css ↔ sub.html

'Legend 개발자 > CSS3' 카테고리의 다른 글

No.005.CSS3 좌표계 [2017-05-19] (0)	2017.05.19
No.004.CSS3 선택자 [2017-05-19] (0)	2017.05.19
No.003.CSS3 레이아웃 및 HTML5 적용 [2017-05-17] (0)	2017.05.17
No.002.CSS3 스타일링 [2017-05-17] (0)	2017.05.17

Posted by 전설의아이

|

Write Thinking

카테고리

태그목록

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

링크

글 보관함

달력

52024 이전 다음

'Legend 개발자/CSS3'에 해당되는 글 5건

No.005.CSS3 좌표계 [2017-05-19]

'Legend 개발자 > CSS3' 카테고리의 다른 글

No.004.CSS3 선택자 [2017-05-19]

'Legend 개발자 > CSS3' 카테고리의 다른 글

No.003.CSS3 레이아웃 및 HTML5 적용 [2017-05-17]

'Legend 개발자 > CSS3' 카테고리의 다른 글

No.002.CSS3 스타일링 [2017-05-17]

'Legend 개발자 > CSS3' 카테고리의 다른 글

No,001.CSS3의 개요 [2017-05-17]

'Legend 개발자 > CSS3' 카테고리의 다른 글

티스토리툴바