게임웹사이트운영 [9] div & span.

Presentation on theme: "게임웹사이트운영 [9] div & span."— Presentation transcript:

1 게임웹사이트운영 [9] div & span

2 구간 표시 h1 <div id=“aa”> … </div> div id=“aa”
<div id=“bb”> <div id=“bb1”> <div id=“bb2> div id=“aa” h2 p div id=“bb” div id=“bb1” h2 p div id=“bb2” p

3 index.html의 구간구분 ㅇㅇㅇ 홈페이지(이미지) 청강문화산업대학 콘텐츠스쿨 컴퓨터게임전공 내 소개 과목소개 3. 실습
<div id=“aa”> </div> 청강문화산업대학 콘텐츠스쿨 컴퓨터게임전공 <div id=“bb”> </div> 내 소개 과목소개 <div id=“cc”> </div> 3. 실습 <div id=“dd”> </div> 4. 유용한 링크 <div id=“footer”> </div> ©저작권

4 <구간에 너비 지정> #aa { border-width: thin; border-style: solid; border-color: #007e7e; width: 420px; } #aa { border-width: thin; border-style: solid; border-color: #007e7e; width: 420px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-left: 20px; text-align: center; background-color: yellow; }

5 <실습> index.html에 구간적용 border-style 컬러이름 구간별로 테두리 색, 모양 다르게 설정
solid, dotted, double, dashed, groove 컬러이름 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

6 #aa는 <div id=“aa”>의
1. 블록을 떠오르게 하기 [1] main.css 수정 #aa { …. width: 300px; float: right; } 다음 내용이 위쪽으로 이동 떠올라서 자리를 오른쪽으로 이동 main.css에서 수정 #aa는 <div id=“aa”>의 이름과 같아야한다.

7 2. 2컬럼으로 만들기 bb영역을 왼쪽으로 조정 #bb { … margin: 0px 440px 10px 10px; }
오른쪽 마진을 aa의 크기만큼 조정 : px #bb { … margin: 0px 440px 10px 10px; }

8 이 사이가 떨어지게 bb의 margin 값 조절.

9 3. index화면을 3컬럼으로 ㅇㅇㅇ 홈페이지 청강문화산업대학 콘텐츠스쿨 내 소개 3. 실습 과목소개 4. 유용한 링크
©저작권

10 <실습> <div id=“bb”>
#bb에서 margin 제거 width: 150px; float: left; 로 설정 위로 떠서 왼쪽으로 이동

11 <실습> 3컬럼으로 조정 #cc, #dd의 margin-left: 170px; margin-right: 440px;
값 조절

12 행단위 구간 설정 블록단위 구간 설정 : <div>
행단위 태그(인라인 태그)의 구간 설정 : <span>

13 <span 실습 준비> me.html 수정 1,2,3항목을 목록(ul, li 태그)으로 수정

14 <span 추가 1> 인라인 태그의 속성 정의 이름 : 홍길동 학번 : 200932000 전공 : 컴퓨터게임전공
<li>이름: 홍길동</li> <li><span class=“nm1”>이름</span>: <span class=“nm2”>홍길동</span></li>

15 <span 추가 2> myself.css에 추가 .nm1 { font-style: italic; } .nm2 {
font-weight: bold;