게임웹사이트운영 [7] 폰트,색,박스모델.

Presentation on theme: "게임웹사이트운영 [7] 폰트,색,박스모델."— Presentation transcript:

1 게임웹사이트운영 [7] 폰트,색,박스모델

2 1. 폰트 패밀리 웹에서 사용할 폰트 목록을 지정 CSS 파일 설정 : main.css
순서대로 적용됨. 처음 지정한 폰트가 없으면 다음 폰트.. CSS 파일 설정 : main.css body { font-family: 궁서, 바탕, 굴림, 돋움; }

3 2. 폰트 크기 조절 [1] 폰트의 크기를 조절 body { font-size: 14px; } h1 {
픽셀, 비율, 배율로 조절 body { font-size: 14px; } 픽셀로 지정 h1 { font-size: 150%; } 비율로 지정 부모엘리먼트의 폰트의 150% h2 { font-size: 1.2em; } 배율로 지정 부모엘리먼트의 폰트의 1.2배

4 2. 폰트 크기 조절 [2] 키워드로 폰트 크기 조절 body { font-size: medium; } h1 {
xx-small, x-small, small, medium, large, x-large, xx-large body { font-size: medium; } h1 { font-size: 150%; } 비율로 지정 부모엘리먼트의 폰트의 150%

5 <실습> main.css 수정 - Body는 18픽셀, h1, h2, p 별로 별도의 크기 지정
index.html 확인 - h1, h2, p 태그 모두 있는지 확인, 없으면 생성 3) 적당한 크기의 폰트로 조정

6 3. 폰트 굵기 변경 font-weight h1,h2 { font-weight: normal; }
lighter, normal, bold, bolder h1,h2 { font-weight: normal; }

7 4. 폰트에 스타일 추가 font-style italic, oblique h2 { font-style: italic; }

8 5. 텍스트 장식 text-decoration h2 { text-decoration: underline; }
none, underline, overline, line-through, blink h2 { text-decoration: underline; }

9 6. 웹 컬러 body { background-color: #cc6600; 웹 컬러 명시 } body {
컬러 이름 숫자로 명시 body { background-color: rgb(200,100,0); } body { background-color: silver; } body { background-color: rgb(80%,50%,0%); }

10 온라인 색상 차트

11 <실습> Body를 연두색 계열로 지정 H1의 배경을 오렌지 계열로 지정 H1을 이탤릭, 밑줄있게 지정
=> 완료후 1차 확인

12 <링크 색상 조정> a:link { color: green; } a:visited { color: red;
a:hover { color: yellow; 방문하지 않은 링크 색상 방문한 링크 색상 링크에 마우스를 올리면 나타나는색상

13 <링크 색상 실습> index.html의 링크 색상 수정 main.css 수정 방문한 링크 : magenta
방문하지 않은 링크 : blue 마우스를 올리면 나타나는 색상 : green main.css 수정

14 7. 박스 모델 마진(margin) (바깥여백) 패딩 (padding) (안여백) 테두리 (border) 내용
패딩과 마진은 투명하며 자신의 색깔을 갖지 않음 테두리 (border) 내용

15 <박스모델 실습 준비> me.html에서 실습준비 파일의 끝에 다음 내용 삽입
<p class=“myself”> 자기소개 : 내가 태어난 곳은 ***입니다. 내가 좋아하는 것은 게임입니다. 나는 현재 청강문화산업대학 게임전공에다니고 있습니다. 게임은 새로운 문화산업으로 향후 높은 성장이 기대되는 분야입니다. </p>

16 <박스 실습 1> myself.css 파일 me.html에 추가후 결과 확인 .myself {
border-color: black; border-width: 2px; border-style: solid; background-color: #a7cece; } 테두리(border) 색상 : color 굵기 : width 스타일 : 실선(solid) me.html에 추가후 결과 확인 <link type=“text/css” rel=“stylesheet” href=“../css/myself.css” />

17 <박스 실습 2> 패딩 추가 me.html 결과 확인 .myself { border-color: black;
border-width: 2px; border-style: solid; background-color: #a7cece; padding: 25px; } me.html 결과 확인

18 <박스 실습 2> 패딩 추가 me.html 결과 확인 .myself { border-color: black;
border-width: 2px; border-style: solid; background-color: #a7cece; padding: 25px; } me.html 결과 확인

19 <박스 실습 3> 마진 추가 me.html 결과 확인 .myself { border-color: black;
border-width: 2px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; } me.html 결과 확인

20 <박스 실습 4> 배경이미지 추가 포샵으로 gif 이미지 생성(투명 이미지) .myself {
border-color: black; border-width: 2px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; background-image: url(../image/myself.gif); }

21 <박스 실습 5> 배경이미지의 반복 제거, 위치 지정 .myself { border-color: black;
border-width: 2px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; background-image: url(../image/myself.gif); background-repeat: no-repeat; background-position: top left; }

22 <박스 실습 6> 왼쪽 패딩 조정, 오른쪽 마진 증가 .myself { … padding: 25px;
padding-left: 80px; margin: 30px; margin-right: 250px; background-image: url(../image/myself.gif); background-repeat: no-repeat; background-position: top left; }

23 <줄 간격 고치기> me.html의 myself 부분 줄 간격 고치기 .myself {
border-width: thin; border-style: solid; border-color: #007e7e; width: 250px; line-height: 2em; }

24 <박스 실습 7> 테두리 스타일과 색상 지정 myself의 테두리 조정 border-style: 테두리 스타일 값
-> solid, double, groove(홈), outset, dotted, dashed, inset, ridge border-width: 테두리 굵기 지정 -> 픽셀값으로 지정(1px~6px), -> 이름으로 지정(thin, medium, thick) myself의 테두리 조정 대시라인으로 색상은 파랑색으로 굵기는 thick로

25 <박스 실습 8> id 속성 사용 index.html의 </body> 위에 추가
<p id=“footer”> (c ) 저작권 ooo </p> main.css에 추가 #footer { color: red; } p#footer로도 가능 2차 확인 index.html me.html