1. HTML 웹페이지 코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="2022-2-WebProg-C2-HW5-구영민-32190192.css">
<meta charset="UTF-8">
<title>컴퓨터 기술 소개</title></head>
<body>
<header class="header"><h3>웹 프로그래밍</h3><hr>
<h2>컴퓨터가 서로 연결돼있는 것을 네트워크가 연결되어있다고 한다.
그 네트워크안에 많은 서비스가 있는데 우리는 인터넷이라는 서비스를 이용하고 있다.
브라우저(클라이언트, 사용자)가 서버에 어떠한 정보를 요청(request)하면 서버는 요청한 쪽으로
다시 응답(response)하는 통신을 해줘야 하는데 이 전체적인 흐름을 <strong>웹 프로그램</strong>이라고 한다.
이 전체적인 흐름을 가진 웹 페이지를 만드는 과정을 <strong>웹 프로그래밍</strong>이라고 말한다.</h2>
<p><audio src="Web-2.m4a" controls loop>브라우저가 audio 태그를 지원하지 않습니다.</audio></p>
</header>
<dl>
<nav class="nav">
<dt><strong>목차</strong>
<dd><ul>
<li> <a href="#html">HTML</a>
<li> <a href="#css">CSS</a>
<li> <a href="#scr">Javascript</a>
</ul>
</nav>
<section class="mid"id="right">
<article><dt><p id="html"><a href="https://namu.wiki/w/HTML"target="_black"><strong>HTML</strong></a></p>
<dd>HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진
문서를 만드는 언어입니다.
다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.</article>
<article><dt><p id="css"><a href="https://ko.wikipedia.org/wiki/CSS"target="_black"><strong>CSS</strong></a></p>
<dd> Cascading Style Sheets 는 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이고
HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 한다.</article>
<article><dt><p id="scr"><a href="https://namu.wiki/w/JavaScript"target="_black"><strong>Javascript</strong></a></p>
<dd>Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다. 경고창을 띄우고, 탭인터페이스를 만들고, Drag & Drop 기능의 웹에플리케이션을 만들수 있다.</article>
<hr>
<article><figure><img src="webprogramming.jpg"width="300" height="300"><figcaption>webprogramming</figcaption></figure></article>
</section>
<footer>
<a href="file:///C:/Web/2022-2-WebProg-C2-HW4-%EA%B5%AC%EC%98%81%EB%AF%BC-32190192-survey.html"target="_black"><strong>설문조사</strong></a><hr>
<h4>Copyright 2022 by YoungMin</h4>
</footer>
</body>
</html>
2. 웹페이지 꾸며주는 CSS 코드
<style>
dt{font-size: 20px;color: blue;}
h3{font-size: 40px;color: darkblue;}
figure{text-align: center;}
h4{font-size: 7px;}
footer{
background-color: pink;
height: 8%;
width: 100%;
clear: both;
}
a > strong{
font-size: 30px;
color: white;
text-shadow: 3px 3px grey;
}
nav > dt > strong{
color: red;
font-size: 30px;
text-shadow: 3px 3px grey;
}
footer > a > strong{
color: blue;
font-size: 10px;
}
h2{
font-family: "Times New Roman", Serif;
}
article > dd{
color: red;
font-family: "Times New Roman", Serif;
}
nav > dd{
color: red;
}
html, body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: orange;
float: left;
}
nav{
height: 62%;
width: 20%;
background-color: orange;
float: left;
}
section{
height: 62%;
width: 80%;
background-color: blue;
float: left;
}
header{
height: 30%;
width: 100%;
background-color: yellow;
float: left;
}
</style>
3. 설문지 HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>웹 프로그래밍에 대한 설문지</title>
<link href="2022-2-WebProg-C2-HW5-구영민-32190192-survey.css" type="text/css" rel="stylesheet">
</head>
<body>
<header><h3>설문지</h3><br>
단국대학교 학생들의 웹프로그래밍의 대한 지식의 깊이를 바탕으로 수업이 진행될 예정입니다. 많은 참여 부탁드립니다.<hr></header>
<section>
<form>
<article><strong>학년</strong> 1학년<input type="checkbox" value="1"> 2학년<input type="checkbox" value="2"> 2학년<input type="checkbox" value="3"> 4학년<input type="checkbox" value="4"> </article>
<br> <br>
<article><strong>성별</strong><input type="checkbox">남자 <input type="checkbox">여자<br> <br></article>
<article><strong>과 선택</strong>
<select>
<option value="1"selected>소프트웨어학과</option>
<option value="1">컴퓨터공학과</option>
<option value="1">산업보안학과</option>
<option value="1">모바일시스템공학과</option>
</select><br><br></article>
<article><strong>웹 프로그래밍에 대한 이해도</strong><br>
1. <input type="checkbox"> 매우 높음<br>
2. <input type="checkbox"> 높음<br>
3. <input type="checkbox"> 보통<br>
4. <input type="checkbox"> 낮음<br>
5. <input type="checkbox"> 매우 낮음<br>
<br>
</article>
<article><strong>하고 싶은 말</strong><br>
<input type="text"style="width: 500px;height: 200px;"></article>
</form>
</section>
<footer>Copyright 2022 by YoungMin</footer>
</body>
4. 설문지 CSS 코드
<style>
body > header {
color : red;
margin-left : 30px;
margin-right : 30px;
}
h3 {
text-align : center;
color : darkblue;
font-size: 30px;
}
article > strong{
color: white;
}
section{
background-color: pink;
height: 70%;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: yellow;
}
header{
height: 20%;
background-color: yellow;
}
footer{
font-size: 7px;
height: 10%;
background-color: purple;
color: white;
}
</style>
출력화면
- CSS로 Semantic 태그를 꾸며보았습니다.
