웹개발 공부를 시작하였다. 우선 코드를 웹상에 구현해줄 서버가 필요한데 이를 위해서 가장 범용적이고 시장점유율이 높은 apache tomcat을 사용하였다.
버전은 9버전으로~
Apache Tomcat® - Welcome!
The Apache Tomcat® software is an open source implementation of the Jakarta Servlet, Jakarta Server Pages, Jakarta Expression Language, Jakarta WebSocket, Jakarta Annotations and Jakarta Authentication specifications. These specifications are part of the
tomcat.apache.org
압축파일 설치해서 풀어주고
이클립스에 접속하여
왼쪽 상단에 windows 탭 클릭.
server라고 검색해서 runtime Environments에서 apache tomcat v9.0을 추가해준다.
위 과정이 끝나면 프로젝트를 새롭게 만들어주자.
기존과는 다르게 새로운 프로젝트 타입을 만드는데
Dynamic Web Project를 클릭해서 새 프로젝트를 생성해주자.
이러한 파일구조가 생성되고
서버에는 당연히 apache Tomcat이 활성화되어있게 된다.
밑에 하단바에 서버탭이 생기게 되고 오른쪽상단에 빨간 네모박스가 ON되어있다면 서버가 가동중이라고 보면 된다.
그리고 이제 web-app이라고 되어있는 폴더에 html 파일을 생성해서 HTML 언어를 공부해볼것이다.
<!DOCTYPE html> <!-- DTD(Document Type Definition): 문서 타입 정의 -->
<html> <!-- 시작 태그(starting tag) -->
<head> <!-- HTML 파일의 설정들 -->
<meta charset="UTF-8"> <!-- 컨텐트를 갖지 않는 태그인 경우 -->
<title>HTML</title>
</head>
<body> <!-- 브라우저 화면에서 보여지는 내용 -->
<!-- HTML 요소(element) - HTML 태그(tag)
o. block 요소: 자동으로 줄바꿈되는 요소. 크기(width,height)를 지정할 수 있는 요소.
- 예:h1, ..., h6, div, p, ...
o. inline 요소: 자동으로 줄바꿈 되지 않는 요소. 크기(width, ...)를 지정할 수 없는 요소.
o. inline-block 요소: inline 요소처럼 자동으로 줄바꿈이 되지 않지만, 크기(width, ...)를 지정할 수 있는 요소.
- 예: img, ...
- CSS를 이용해서 block 또는 inline 요소들을 inline-block 요소로 변환할 수 있음.
-->
</body>
</html> <!-- 종료 태그(end tag) -->HTML언어는 태그라는 요소로 언어를 구현해나가는데 <body> </body> 이런식으로 시작과 종결태그를 " / " 이용하여 구분해놓는다.
<h1>첫번째 HTML</h1>
<h2>김다훈</h2>
<a href="http://www.naver.com">네이버</a>
<br /> <!-- break: line break(줄바꿈) -->
<a href="http://www.daum.net">다음</a>
<br />
<ul>
<li>
<a href="01_section.html">Section Tag</a>
</li>
<li>
<a href="02_image.html">Image Tag</a>
</li>
<li>
<a href="03_list.html">List Tag</a>
</li>
<li>
<a href="04_table.html">Table Tag</a>
</li>
</ul><h번호>는 구획을 나누면서 동시에 제목역할을 하는 태그이다.
<a href=> 는 링크를 연결해줄때 사용하는 태그이고, ul, li 태그는 컨텐츠의 리스트를 생성해주는 태그이다.
웹상에서 봤을때 위에 HTML 코드는 위와 같이 구현되는것을 확인할 수 있다.
그럼 이제 Section Tag를 눌렀을때 연결될 HTML 파일을 만들어보자.
파일명은 위의 <a href> 태그에서 지정한대로 "01_section.html"로 생성해야한다.
<h1>Block Sectioning Tag</h1>
<!-- div: division. 클라이언트에서 컨텐트가 보여질 (block) 영역을 지정하기 위한 태그.
컨텐트들의 스타일(CSS) 속성을 지정하기 위해서 많이 사용.
-->
<div style="border: 2px solid red; margin: 16px; background-color: cyan;">Division 1</div>
<div>Division 2</div>
<div>
<!-- p: paragraph. 문단. 텍스트 문단이 들어갈 영역을 지정하기 위한 태그. -->
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<hr/> <!-- hr: horizontal ruler. 가로선 --><h1>은 제목나타내는 태그이고, div 태그는 컨텐트를 표현해주는 경계선과 같은 태그이다. 그리고 이 div블록안에 style을 구분지어서 넣어줄수있다.
<h1>Inline Sectioning Tag</h1>
<!-- span: inline 요소가 들어갈 영역을 지정하기 위한 태그.
inline 요소들의 스타일(CSS)을 설정하기 위해서 많이 이용.
-->
<div>
<span style="color: red;">inline</span> 요소가 들어갈 영역을 지정하기 위한 태그.
<br/>
<strong>inline</strong> 요소들의 <em>스타일(CSS)</em>을 설정하기 위해서 많이 이용.
</div>인라인 요소 활용하기 위해 span도 이용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style>
/* CSS 주석 */
img {
width: 300px; /* 가로 길이 */
height: 200px; /* 세로 길이 */
}
.logo {
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<h1>HTML Image Tag</h1>
<!--
img 태그의 속성(attribute):
- alt: alternative. 이미지 파일을 찾을 수 없을 때 이미지 위치에 보여질 텍스트.
음성 인식 소프트웨어가 사용할 수 있음.
- src: source. 이미지가 저장된 폴더 위치, 이미지 파일 이름.
-->
<img alt="에펠탑" src="images/eiffel_tower.jpg" />
<img alt="금문교" src="images/golden_gate_bridge.jpg" />
<h2>이미지 링크</h2>
<!-- 다음 로고 이미지를 클릭하면 다음 메인 페이지로 이동할 수 있는 링크 -->
<a href = "https://www.daum.net">
<img alt="다음" src="images/daum_logo.png" class="logo" />
</a>
</body>
</html><style>이란 블록을 따로 지정해 이 파일안에 컨텐츠에 대한 CSS를 묶어서 표현하는 방법도 있다. 이 방법은 각 블록들을 클래스화하여 표현하는 방법이라고 개인적으로 생각한다.
그리고 이미지를 위와같이 img 태그를 통해 표현해줄수도 있다. 그리고 이미지를 링크로 연결하여 표현할 수 도 있다.
위의 다음 이미지를 클릭하면 다음홈페이지로 이동하게 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>HTML List Tag</h1>
<h2>Unordered List</h2>
<!-- ul: 순서가 없는 리스트. 불릿(bullet) 이미지로 아이템을 구분.
li: list item. 리스트 아이템.
-->
<ul>
<li>수리남</li>
<li>글리치</li>
<li>오징어게임</li>
</ul>
<h2>Ordered List</h2>
<!-- ol: 순서가 있는 리스트. 숫자/알파벳/로마글자 등으로 아이템을 구분하는 리스트. -->
<ol>
<li>수리남</li>
<li>글리치</li>
<li>오징어게임</li>
</ol>
<h2>중첩 리스트</h2>
<ul>
<li>커뮤니케이션
<ul>
<li>메일</li>
<li>카페</li>
<li>브런치</li>
</ul>
</li>
<li>미디어
<ul>
<li>뉴스</li>
<li>연예</li>
<li>스포츠</li>
</ul>
</li>
</ul>
<h2>Description List</h2>
<!-- dl(description list): 사전식 리스트. 용어와 설명을 갖는 리스트.
dt(description term): dl의 용어.
dd(description definition): dl의 정의(설명)
-->
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dd>웹 페이지의 정적 컨텐츠를 작성하는 Front-End 개발 언어</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
<dd>웹 페이지의 스타일을 작성하는 Front-End 문법</dd>
<dt>JavaScript</dt>
<dd>자바스크립트</dd>
<dd>웹 페이지의 동적인 기능, 이벤트 처리를 담당하는 Front-End 개발 언어</dd>
</dl>
<dl>
<dt>커뮤니케이션</dt>
<dd>메일</dd>
<dd>카페</dd>
<dd>브런치</dd>
<dt>미디어</dt>
<dd>뉴스</dd>
<dd>연예</dd>
<dd>스포츠</dd>
</dl>
</body>
</html>콘텐츠를 리스트화 하는 방법도 있다. 리스트를 활용하는 태그는 ul,ol,dl 정도만 알아두면 될것같다.
네이버나 다음같은 포털사이트들의 리스트는 대부분 dl,dt,dd 태그를 많이 사용하는걸 볼 수 있었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style>
table, th, td {
border: 1px solid gray;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>HTML Table Tag</h1>
<!-- 테이블 관련 태그:
- table: 테이블 시작, 끝.
- caption: 테이블 이름.
- thead: table header.
- tbody: table body.
- tfoot: table footer.
- tr: table row(행).
- td: table data(셀).
- th: table cell header. 행(row) 또는 열(row)의 이름을 표시.
-->
<table>
<caption>Front-End 과목 성적</caption>
<thead>
<tr>
<th>번호</th>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>90</td>
<td>100</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>100</td>
<td>80</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>290</td>
<td>280</td>
<td>280</td>
</tr>
</tfoot>
</table>
<br>
<hr>
<br>
<table>
<caption>회원정보</caption>
<thead>
<tr>
<th>아이디</th>
<th>비밀번호</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>ekgns011</td>
<td>1234</td>
<td>ekgns011@naver.com</td>
</tr>
<tr>
<td>ekgns012</td>
<td>12345</td>
<td>ekgns012@daum.net</td>
</tr>
<tr>
<td>ekgns019</td>
<td>123456</td>
<td>ekgns019@gmail.com</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<br>
<hr>
<br>
<table>
<caption>예제문제1</caption>
<thead>
<tr>
<th>이름</th>
<th colspan="2">전화번호</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>010-0000-0000</td>
<td>02-0000-0000</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<br>
<hr>
<br>
<table>
<caption>예제문제2</caption>
<thead>
<tr>
<th>이름</th>
<td>오쌤</td>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">전화번호</th>
<td>010-0000-0000</td>
</tr>
<tr>
<td>02-0000-0000</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>테이블을 만들때에는
- table: 테이블 시작, 끝.
- caption: 테이블 이름.
- thead: table header.
- tbody: table body.
- tfoot: table footer.
- tr: table row(행).
- td: table data(셀).
- th: table cell header. 행(row) 또는 열(row)의 이름을 표시.
위와같은 태그들을 이용하면 되고
셀을 병합할때는 rowspan,colspan등을 활용하면 된다.