HYPER TEXT MARKUP LANGUAGE

Presentation on theme: "HYPER TEXT MARKUP LANGUAGE"— Presentation transcript:

1 HYPER TEXT MARKUP LANGUAGE
HTML HYPER TEXT MARKUP LANGUAGE Lan2 김소정

2 목차 CSS? CSS 를 사용해야 하는 이유 색상과 배경 텍스트 스타일 상자 스타일 꾸미기 레이어와 스타일 Q&A

3 HTML문서에서의 스타일이란 자주 사용되는 서체, 색상, 정렬 등의 유형을 가리킴
웹 페이지를 디자인 하는 스타일 시트 HTML문서에서의 스타일이란 자주 사용되는 서체, 색상, 정렬 등의 유형을 가리킴 CSS(Cascading Style Sheet): 스타일을 미리 정의해 두었다가 필요할 때마다 불러서 사용할 수 잇도록 스타일 정보만 모아놓은 것 Cascading:‘단계’, 여러 스타일이 하나의 요소에 적용될 때 단계적으로 적용한다는 의미

4 웹 페이지를 디자인 하는 스타일 시트 소스의 관리와 수정이 쉬워짐 페이지 로딩 속도가 빨라짐 웹 문서 제작 시간이 줄어듬

5 색상과 배경 글자 색상 – Color 속성 P{ color: red} P{ color:#FF00000}

6 색상과 배경 배경색 지정: background-color

7 배경 이미지: background-image
색상과 배경 배경 이미지: background-image Body{background-image: url(aa.gif)} P{background-image: none} 배경이미지를 반복:background-repeat Body{ background-image: url(aa.gif); background-repeat: no-repeat; } Repeat(반복): 브라우저 화면에 가득 찰 때 까지 배경이미지가 가로와 세로로 반복됨 Repeat-x(수평반복): 브라우저 창 너비와 같아질 때까지 배경 이미지가 가로로 반복됨 Repeat-y(수직반복): 브라우저 창 높이와 같아질 때까지 배경 이미지가 세로로 반복됨 No-Repeat(반복없음): 배경 이미지를 한 번만 표시하고 반복 하지 않음

8 배경 이미지 고정: background-attachment
색상과 배경 배경 이미지 고정: background-attachment 배경 이미지의 위치를 조절: background-position 배경 이미지를 고정시키게 되면 웹 페이지를 아무리 스크롤 하더라도 배경이미지는 스크롤 되지 않고 내용만 스크롤 되기 때문에 마치 배경 이미지 위로 다른 내용들이 스크롤 되는 것처럼 보임

9 색상과 배경

10 텍스트 스타일 글꼴과 관련된 스타일 웹 문서에서 사용할 글꼴의 종류를 지정: font-family 글자를 이탤릭체로 표현할 것인지 여부: font- style 영문 소문자를 작은 대문자로 표시: font-variant 글자의 굵기를 지정: font-weight

11 텍스트 스타일

12 단락의 첫 번째 줄을 들여쓰기: text-indent
텍스트 스타일 단락의 첫 번째 줄을 들여쓰기: text-indent P{text-indent:3px;} 텍스트의 정렬 방법을 지정: text-align 텍스트에 추가하는 장식 효과를 지정:text-decoration (밑줄을 긋거나 글자 위에 윗줄을 긋는 등의 효과를 말함) None:장식이 없음 Underline:밑줄을 그음 Overline: 윗줄을 그음 Line-through: 텍스트 위로 줄을 그음 Blink: 텍스트를 깜빡이게 함

13 텍스트 스타일

14 단어와 단어 사이의 간격을 조절: word-spacing
텍스트 스타일 줄 간격을 지정: line-height P{line-height:1.2 ; font-size: 10pt} 단어와 단어 사이의 간격을 조절: word-spacing H1{word-spacing: 0.5cm}

15 상자 스타일 꾸미기 텍스트나 이미지 등이 나타나는 실제 컨텐츠 영역, 상자와 컨텐츠 사이의 안 여백(padding), 상자의 테두리선(border), 그리고 상자 주변의 여백(margin) 등과 연관된 스타일

16 상자 스타일 꾸미기

17 상자 스타일 꾸미기

18 상자 스타일 꾸미기

19 레이어: 웹 문서에 있는 텍스트나 이미지를 자유롭게 이리저리 움직일 수 있는 것
레이어와 스타일 레이어: 웹 문서에 있는 텍스트나 이미지를 자유롭게 이리저리 움직일 수 있는 것 특징 레이어는 투명하다 겹쳐 쌓을 수 있다 어느 위치에든 갖다 놓을 수 있다 가시성을 조절할 수 있다 가시성: 레이어를 어느 정도 화면에 보이게 할 수 있는지를 조절할 수 있다는 뜻

20 레이어와 스타일 <div>태그 안에서 직접 스타일을 정의

21 레이어와 스타일 스타일 시트에서 레이어 스타일을 미리 정의

22 레이어와 스타일

23 THANK YOU Q&A