Ⅰ.Apache Tomcat 8 설치
1) Eclipse에서
-- eclipse 실행 browse - 새폴더 - myjsp
-- 웹 개발을 할 때에는 javaEE 사용
-- create a dynamic web project
-- Project Name : HTML5 - Next
-- 현재는 HTML을 배우기 위해 추가할 필요 없지만 추후에 JSP할 때에는 클래스 파일 추가 예정
-- Default output folder : build\WEB-INF\classes - Next
-- Finish (HTML만 할 때에는 필요 없으나 JSP할 때에는 꼭 체크해 주어야 한다.)
2) Apache Tomcat 8 설치
https://tomcat.apache.org/download-80.cgi
Apache Tomcat® - Apache Tomcat 8 Software Downloads
Welcome to the Apache Tomcat® 8.x software download page. This page provides download links for obtaining the latest versions of Tomcat 8.x software, as well as links to the archives of older releases. Users of Tomcat 8.0.x should be aware that it has reac
tomcat.apache.org
-- C드라이브 밑에 압축풀기 - 폴더 이름 : apache-tomcat-8.5.47
-- 내 PC - 속성 - 고급 시스템 설정 - 환경 변수 - 시스템 변수 - 새로 만들기
-- 시스템 변수 - Path - 새로 만들기
-- cmd(명령 프롬프트) 실행
-- 파일 탐색기 C:\apache-tomcat-8.5.47\conf - server.xml
-- EditPlus 3 외에 메모장도 사용 가능
-- port를 8080 사용하고 있는 것을 확인할 수 있다.
-- 127.0.0.1 : 자신의 ip / 8080 : 포트 넘버
-- oracle도 포트 넘버가 8080이기 때문에 충돌이 일어난다. 따라서 변경할 수 없는 오라클 대신 톰캣의 포트 넘버를 변경해 주어야 한다.
-- 한글이 깨지지 않도록 URIEncoding = "UTF-8" 추가
-- EditPlus 3 을 사용하면 생성되는데 삭제해도 된다.
-- 마찬가지로 메모장을 사용해도 되며 EditPlus를 사용할 경우 저장 후 생성된 파일은 삭제한다.
-- cmd(명령 프롬프트) 실행하여 확인 - 액세스 허용
-- chrome 주소창에 localhost:9090 입력 - 창이 뜨면 설치 완료
-- cmd(명령 프롬프트)에서 shutdown.bat 입력하여 tomcat 종료
3) Eclipse로 돌아와서
-- eclipse - window - reference
-- Apache Tomcat v8.5 - Next
-- Browse - tomcat 설치된 폴더 선택
-- Installed JREs - Add - Next - Directory JDK 설치된 폴더 선택 - Finish - Apply
-- 액세스 모두 허용
4) Eclipse UTF-8 환경 설정
-- 처음 Eclipse 설치했을 때 했던 UTF-8 환경 설정과 동일하다.
5) Web Browser 설정
-- Window - Web Browser - Chrome
-- Web Contents - new - folder - name : ch01_semantic - finish
-- ch01_semantic - new - html file - name : 01 - next - html(5) - finish
-- 주석문 : 블록 선택 + Ctrl + Shift + /
Ⅱ. Semantic Tag(시맨틱 태그)
-- header : 웹페이지의 제목 및 메뉴를 알려주는 태그
-- hgroup : 제목과 부제목을 묶는 역할
<body>
<header>
<hgroup>
<h1>서울 고등학교 홈페이지</h1>
<h4>우리들만의 즐거운 공간</h4>
</hgroup>
</header>
</body>
-- ol : 순서가 있는 목록 태그, li 태그와 같이 쓰인다.
<nav>
<ol>
<li>1학년</li>
<li>2학년</li>
<li>3학년</li>
</ol>
</nav>
<ol style="list-style-type: upper-alpha;">
<li>1학년</li>
<li>2학년</li>
<li>3학년</li>
</ol>
<ol style="list-style-type: upper-roman;">
<li>1학년</li>
<li>2학년</li>
<li>3학년</li>
</ol>
-- ul : 순서가 없는 목록 태그, li 태그와 같이 쓰인다.
<ul>
<li>1학년</li>
<li>2학년</li>
<li>3학년</li>
</ul>
<ul style="list-style-type: square;">
<li>1학년</li>
<li>2학년</li>
<li>3학년</li>
</ul>
-- 목록 표시 없이도 가능하다.
<ul style="list-style-type: none;">
<li>1학년</li>
<li>2학년</li>
<li>3학년</li>
</ul>
-- section : 섹션을 정의할 때 사용
<section>
<header><h3>이달의 인물</h3></header>
</section>
-- section, header, article, footer, nav 등의 시맨틱 태그는 존재 유무와 관계없이 실행 결과는 같지만 가독성을 위해 의미를 부여할 때 사용한다.
교내 <em>영상제</em>에서 <strong>최우수상</strong>을 받은 <mark>이빛나 양</mark>을 만나 봅니다.
-- © : ©
-- 형광펜(mark) 색을 바꾸고 싶을 경우 head에 style을 지정해 주면 된다.
<head>
<style type="text/css">
mark {
background-color: black;
color : yellow;
}
</style>
</head>
Ⅲ. 연습예제
-- ch01_semantic - new - html file - name : 02
위와 같은 결과가 나오도록 만들어 보자.
-- style.css 파일을 만들어 style 적용을 따로 한다.
-- ch01_semantic - new - other - web - css - name : style.css
-- style.css에 여백 및 기본적인 폰트를 설정
style.css
body {
border: solid 2px gray;
font-family: Arial, "MS Trebuchet", sans-serif;
}
-- border : 테두리
-- font-family : 글꼴
-- Arial 폰트 1순위 적용 / 없으면 MS Trebuchet 2순위 적용 / 없으면 sans-serif 3순위 적용
-- "MS Trebuchet"의 쌍따옴표는 공백이 있기 때문에 사용
페이지 내용 가운데 놓기
02.html
<body>
<div>Star Blog</div>
<div>얼마나 많이</div>
</body>
style.css
div{
border: solid 1px red;
}
-- 위의 테두리는 빨간색, 아래 테두리는 파란색으로 하고 싶으면 각자 id를 준다.
02.html
<body>
<div id="first">Star Blog</div>
<div id="second">얼마나 많이</div>
</body>
style.css
div#first{
border: solid 1px red;
}
div#second{
border: solid 1px blue;
}
-- width : 넓이
-- height : 높이
div first에 width=200px, height=300px와 second에 width=50%를 주어 보자.
style.css
div#first{
border: solid 1px red;
width: 200px;
height: 300px;
}
div#second{
border: solid 1px blue;
width: 50%;
height
}
-- margin : 바깥 여백(위, 오른쪽, 아래, 왼쪽)
-- padding : 안쪽 여백(위, 오른쪽, 아래, 왼쪽)
div#first{
border: solid 1px red;
height: 300px;
margin: 20px 50px;
}
div#second{
border: solid 1px blue;
width: 50%;
padding: 20px 50px 20px 50px;
}
-- margin : 0 auto 로 지정하면 가운데에 위치
02.html
<body>
<div id="wrap">
<header id="page_header">
<h1>Star Blog</h1>
<nav>
<ul>
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ul>
</nav>
</header>
</div>
</body>
-- header : 사이트에 대한 소개 정보나 메인 메뉴, 회사로고, 사이트 로고 등이 포함됨
-- nav : 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함됨
style.css
/* 페이지의 내용을 가운데에 놓음 */
div#wrap{
border: solid 1px red;
width: 960px;
margin: 0 auto;
}
/* 헤더의 넓이를 지정해서 보더 아래값만 주기*/
header#page_header{
width: 100%;
/* border-top: solid 2px blue;
border-right: solid 2px blue; */
border-bottom: solid 2px blue;
/* border-left: solid 2px blue; */
}
/* 내비게이션의 리스트의 점 제거 */
header#page_header nav ul{
list-style-type: none;
}
/* 내비게이션 가로 바 형태로 만듦 */
header#page_header nav ul li{
border: solid 0px gray;
/* 화면에 보여주는 형식. 아래로 보여줄 것인가?(block) 옆으로 보여줄 것인가?(inline) 를 결정하는 것 */
display: inline; /* 리스트를 가로 형태로 만듦 */
margin: 0 20px 0 0;
padding: 10px;
}
<body>
<div id="wrap">
<header id="page_header">
<h1>Star Blog</h1>
<nav>
<ul>
<li><a href="sub/1.html">최근 글</a></li>
<li><a href="sub/2.html">이전 글</a></li>
<li><a href="sub/3.html">공헌자 글</a></li>
<li><a href="sub/4.html">연락처</a></li>
</ul>
</nav>
</header>
</div>
</body>
style.css
/* a 태그에 밑줄 제거하기 */
a {
text-decoration: none;
}
a:link { /* 페이지에 연결하기 전의 링크 */
color : blue;
}
a:hover { /* 링크에 마우스 포인터를 올려 놓았을 때 */
background-color: #f8ec07;
color: black;
font-weight: bold;
}
-- ch01_semantic - new folder(sub) - new html file 4개 (1, 2, 3, 4) 생성
1.html
<body>
최근 글 입니다.<br><br>
<a href="../02.html" style="text-decoration: none;">홈으로</a>
</body>
../ : 상위 폴더로 변경
-- " : "
02.html
<section id="posts">
<article>
<header>
<h2>얼마나 많이 기록해 둬야 되겠습니까?</h2>
<p>Posted by Brain on 2019.10.15<p>
</header>
<aside>
<p>"물건을 팔 때는 거절할 기회를 주어선 안 됩니다. 고객의 상황에 맞도록 최선을 다해야 합니다."</p>
</aside>
<p>물건을 팔 때의 대원칙은, 고객이 빈손으로 돌아가게 만들면 이미 글렀다는 겁니다. 다시 오려고 하지
않을테니까요. 따라서 고객을 대할 때는 적극적인 자세를 취해야 합니다. 그렇다고 너무 오버하면 고객이 겁을 먹고 돌아가
버릴 수도 있으니 조심해야 합니다.</p>
<p>대화가 끊어지지 않게 이어 나가는 한 가지 요령을 알려드리죠. 네, 아뇨라고 대답할 수 있는 질문을 피하라는
겁니다. 예를 들어, 서비스 플랜을 판매중이라면, 절대 " 3년 서비스 플랜과 5년 서비스 플랜이 있는데,
들어보시겠습니까?" 하는 식으로 말문을 열어선 안 됩니다. 이런 식으로 해야죠. "3년 서비스 플랜과
5년 서비스 플랜이 있는데, 그 중 어떤 것이 더 좋으십니까?" 언뜻 보기엔 똑같은 질문으로 보이고, 고객이
거절할 수 있다는 점은 마찬가지지만, 두 번째 질문은 단순히 "아뇨"라고 말할 수 없기 때문에
거절하기가 더 힘듭니다.</p>
</article>
</section>
-- section : 페이지의 논리적 영역(내용부분)
-- p : 문단을 나누는 태그
-- aside : 인용구, 덧붙이고 싶은 생각, 관련된 링크
style.css
section#posts {
border: solid 1px blue;
float: left;
width: 70%;
border-right: solid 1px gray;
padding: 1%;
}
section#posts aside {
border: solid 1px yellow;
float: right;
width: 35%;
font-size: 20px;
font-weight: bold;
color: #b30059;
line-height: 40px;
margin-left: 20px;
}
section#sidebar{
border: solid 1px red;
float: left;
width: 24%;
margin-left: 1.5%;
}
p {
border: silid 0px red;
margin: 0 0 20px 0;
}
-- line-height : 줄간격
02.html
<section id="sidebar">
<h3>이전 글</h3>
<nav>
<ul>
<li><a href="1.html">2018년 10월</a></li>
<li><a href="2.html">2018년 11월</a></li>
<li><a href="3.html">2018년 12월</a></li>
<li><a href="4.html">2019년 01월</a></li>
<li><a href="5.html">2019년 02월</a></li>
<li><a href="6.html">2019년 03월</a></li>
</ul>
</nav>
</section>
02.html
<footer id="page_footer">
<p>© 2019 Star Blog</p>
<nav>
<ul>
<li><a href="home.html">홈페이지</a></li>
<li><a href="about.html">회사소개</a></li>
<li><a href="address.html">연락처</a></li>
<li><a href="board.html">게시판</a></li>
</ul>
</nav>
</footer>
style.css
header#page_header nav ul li , footer#page_footer nav ul li
footer#page_footer{
border: solid 1px green;
clear: both; /* float 을 해제해서 페이지 하단에 안착시킨다. */
width: 100%;
text-align: center;
}
-- 표시를 위해 했던 border를 삭제하면 완성된다.
<완성본>
-- 최근 글은 hover 표현
