[STEP 온라인평생교육원] - W3C HTML 웹 표준 및 간단한 웹페이지 제작
학습목표
- W3C HTML 웹 표준을 인증 받을 수 있다.
- 태그들을 이용하여 간단한 웹페이제를 제작할 수 있다.
학습내용
- W3C HTML 웹 표준 인증 받기
- 간단한 웹 페이지 제작
1) 웹페이지 제작
-로고 이미지 및 목록 영역
<!doctypehtml>
<head>
<meta charset="UTF-8">
<title>OnlineSolutions-Home</title>
</head>
<body>
<!--start header-->
<header>
<!--start logo-->
<a href="#"><imgsrc="images/logo.png" width="221" height="130" alt="logo"/></a>
<!--end logo-->
<!--start menu-->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!--end menu-->
<!--end header-->
</header>1) 웹페이지 제작
-배너 이미지 영역
<!--start intro-->
<section>
<div>
<div>
<imgsrc="images/banner1.png" width="960" height="300" alt="baner">
</div>
</div>
</section>
<!--end intro-->1) 웹페이지 제작
-본문 영역
<!--start holder-->
<div>
<section>
<h1>Latest news</h1>
<imgsrc="images/icon3.png" width="51" height="52" alt="icons"/>
<article>
<h2>10.08.2011 -Internet marketing</h2>
<p> 텍스트</p>
</article>
</section>
</div>
<!--end holder-->
<!--start holder-->
<div>
<section>
<h1> 1. Creative solutions</h1>
<imgsrc="images/icon4.png" width="51" height="52" alt="icons"/>
<p>텍스트</p>
<a href=＂＂><span class=＂button＂>Read more</span></a> </section>
<section>
<h1>2. Consulting</h1>
<imgsrc=＂images/icon2.png＂width=＂51＂height=＂52＂alt=＂icons＂/>
<p>텍스트.</p>
<a href=""><span class="button">Read more</span></a> </section>
<section>
<h1>3. Development</h1>
<imgsrc="images/icon1.png" width="51" height="52" alt="icons"/>
<p>텍스트</p>
<a href=""><span class="button">Read more</span></a> </section>
</div>
<!--end holder-->W3C HTML 웹 표준 인증받기
- 국내 주요 포털사이트에서 HTML5 DOCTYPE 사용
- DOCTYPE:웹페이지 선언문
- DTD:현재 사용하고 있는 HTML 버전에서 사용할 수 있는 태그를 알려주는지 침
- 웹 표준 인증: W3C 사이트에서 Markup검증 서비스 제공
간단한 웹페이지 제작
웹페이지 구성: <header>, <nav>, <section>, <article>, <footer>
HTML5 태그를 이용한 웹페이지 기초 제작
4) CSS를 사용하여 텍스트 색상 변경하기
CSS를 사용하여 텍스트 색상 변경하는 실습 예제
<!doctypehtml>
<head>
<meta charset="UTF-8">
<mce:scriptsrc="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>
<title>텍스트색변경하기</title>
<style type="text/css">
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1> CSS 사용한후텍스트색!!!</h1>
<p> CSS를사용하여간편하게텍스트의색을변경할수있다!!!</p>
</body>
</html>웹 기술의 세 가지 핵심 요소
CSS3와 HTML5 관계
- 웹 기술의 세 가지 핵심 요소: HTML, CSS, JavaScript
- 언어의 구성요소와 비슷한 측면이 있어 HTML은 명사, CSS는 형용사와 부사, JavaScript는 동사와 비슷한 역할을 함
- CSS 규칙의 종류: HTML 선택자, 클래스, ID
- HTML에 CSS를 사용하는 방법: 인라인 스타일, 내부 스타일, 외부 스타일
글꼴 스타일
- font-family : 글꼴 지정하기
• 웹 문서에서 사용할 글꼴을 지정
• <body> 태그, <p> 태그, <hn> 태그처럼 텍스트를 사용하는 요소들에서 주로 사용
• 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴 지정 가능
• <body> 스타일에서 한 번 정의하면 문서 전체에 적용(상속됨)
- @font-face : 웹 폰트 사용하기
• CSS3에서는 웹 폰트를 표준으로 채택
• 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보를 함께 저장
• 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템에 다운로드하게 함
- font-size : 글자크기 조절하기
• CSS3에서는 웹 폰트를 표준으로 채택
• 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보를 함께 저장
• 사용자가 웹문서에 접속하면 글꼴을 사용자 시스템에 다운로드하게 함
5월 1일에 시작했던 학습이 이제 벌써 끝이 보이기 시작했다. 얼른 강의를 다 듣고 복습을 한 다음 시험을 봐야겠다. 5월 31일에 강의를 마무리하면 웹 페이지의 기본을 마스터할 수 있을 것 같다. 위에서 소개한 것처럼 예제 코드가 많아 실습을 통해 기본을 익힐 수 있었다. 다음 포스팅에는 시험 후기를 남겨보도록 하겠다. 시험을 본다고 생각하니 조금 떨리는 것 같기도 하다. ㅎㅎ 그래도 알고 싶었던 css 사용법에 대해 자세히 배울 수 있어서 많은 도움이 되었다. 이를 바탕으로 파이썬을 사용한 웹페이지를 만들 것이다. 연습만이 살길이다.
https://portal.step.or.kr//page/pt/?m1=home%25
STEP 포털
www.step.or.kr
'STEP 온라인평생교육원' 카테고리의 다른 글
| [STEP 온라인평생교육원] - 수료 평가 / 시험 후기 (0) | 2020.05.21 |
|---|---|
| [STEP 온라인평생교육원] - 인기검색어 살펴보기 / 인기 강좌 분석 (0) | 2020.05.20 |
| [STEP 온라인평생교육원] - 콘텐츠 제작 및 판매 / STEP 마켓 (1) | 2020.05.17 |
| [STEP 온라인평생교육원] - 클립러닝이란? / 클립러닝 사용법! (0) | 2020.05.15 |
| [STEP 온라인평생교육원] - 가상훈련 보급이란? (0) | 2020.05.13 |