CSS Web Page Construction

Presentation on theme: "CSS Web Page Construction"— Presentation transcript:

1 CSS Web Page Construction
이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 7

2 웹사이트 구축

3 웹사이트 구축 과정

4 내비게이션 구조도 computer.html clothing.html music.html movie.html
sports.html furniture.html food.html shopcart.html register.html findid.html HOME HOME (Index.html ) ABOUT US NEWS MY ACCOUNT CONTACTS

5 레이아웃

6 실습 - /exercise/0413/webshop/index.html
zip 파일을 다운받아 압축 해제 요구사항에 맞게 CSS 파일을 작성하여 /exercise/0413/webshop/ 디렉토리로 전송하여 HTML 문서 완성 완성 버전: webshop/index.html

7 헤더 - <header> <header> <h1>
<img src="images/shop.png" width="50" height="50"> <a href="index.html"> Web Shop </a> </h1> </header>

8 내비게이션 메뉴 - <nav> <nav> <ul>
<li><a href="index.html">Home</a></li> <li><a href="index.html">About Us</a></li> <li><a href="index.html">News</a></li> <li><a href="index.html">My Account</a></li> <li><a href="index.html"> Contacts </a></li> </ul> </nav>

9 왼쪽 수직 메뉴 - <aside>
<aside id="left"> <h4>카테고리</h4> <ul> <li><a target="iframe1" href="computer.html"> 컴퓨터</a></li> <li><a target="iframe1" href="clothing.html"> 의류</a></li> <li><a target="iframe1" href="music.html">음악</a></li> <li><a target="iframe1" href="movie.html">영화</a></li> <li><a target="iframe1" href="sports.html"> 스포츠/레저</a></li> <li><a target="iframe1" href="funiture.html"> 가구/인테리어</a></li> <li><a target="iframe1" href="food.html">식품></li> </ul> </aside>

10 스타일 파일 요구사항 다음의 요구사항에 따른 style을 완성하시오 전체(*) 파일 이름: mystyle.css Body
선택자 스타일 전체(*) 안쪽 여백: 0 밖 여백: 0 Body 배경색: #F3F1E9

11 스타일 파일 요구사항 (계속) header 높이(height): 60px 밖 여백: 10px nav aside#left
위쪽 margin: 20px float: left section#main font-family: Arial, Helvetica, sans-serif 글자 크기: 12px 글자 색상: #464646 overflow: hidden width: 430

12 스타일 파일 요구사항 (계속) padding: 0 margin-left: 10px aside#right width: 200px
float: left footer width: 100% height: 50px clear: both background-image:url(images/footer_bg.gif) background-position: top left background-repeat: repeat-x

13 스타일 파일 요구사항 (계속) nav ul 리스트 스타일(list-style): none
텍스트 정렬(text-align): center 경계선(위, 아래) 두께 1px 스타일: solid 색: 빨강 안쪽 여백(padding): 상하10px 좌우 0 nav ul li display: inline 텍스트(text-transform): 대문자로 안쪽 여백(padding): 상하 0, 좌우 10px 문자 간격(letter-spacing): 10px

14 스타일 파일 요구사항 (계속) nav ul li a text-decoration: none 색상(color): black
nav ul li a:hover text-decoration: underline #left h4 font-family: Arial, Helvetica, sans-serif 크기: 20px #left ul font-familt: 위와 같게 font 크기: 15px 색상: #FFFFFF 리스트 스타일: none 텍스트 들여쓰기: 15px

15 스타일 파일 요구사항 (계속) #left ul li 배경색: #3F3F3F line-height: 28px
아래쪽 경계선: 1px solid #333333 #left ul li a text-decoration: none 색상: #FFFFFF display: block #left ul li a:hover 배경색: #D40203 #shopcart margin-bottom: 20px #login margin-top: 40px

16 Q&A HAVE A NICE DAY!!!