html
HTML이란?
HTML은 HyperText Markup Language의 약자입니다.
웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다.
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.
<strong> 태그
html
기본<strong>강조</strong>기본
결과
기본강조기본
<h1> 태그
html
<h1>제목</h1>
텍스트
결과
제목
텍스트
<a>태그(문서와 문서를 연결,하이퍼텍스트)href속성 사용
<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4">도널드 커누스</a>
결과
클릭시 해당 페이지로 이동 페이지가 새로고침되며 이동됨
새로운 페이지로 이동하고싶을땐 다음과 같이 target = "_black" 속성 사용
<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" target="_blank">도널드 커누스</a>
href에 마우스 포인트를 올려뒀을때 내용정보가 나오도록 설정할때 title 속성 사용
<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" title="전설적인 프로그래머">도널드 커누스</a>
li태그
html
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
결과
- 1
- 2
- 3
- 4
li태그 떨어뜨리기(ul(unordered list 순서가없는 list)태그 사용)
html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
or태그(ordered list 순서가있는 list)
html
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ol>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
결과
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
문서구조
<!DOCTYPE html>
<html>head와 body는 html에 감싸져있음
<head>부가적인내용(문서를 꾸며주는 역활)
<title>Page Title</title>페이지 이름
</head>
<body>본내용
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ol>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
</body>
</html>
<p>태그 단락(문단과 문단의 단락 길이는 css로 수정가능)
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>
제임스 고슬링은 캐나다 캘거리 대학교를 거쳐 카네기 멜론 대학교에서 박사학위를 밟고 썬 마이크로시스템즈에 합류한다. 그는 1990년 말 Patrick Naughton, Mike Sheridan과 함께 Green Project Team에 배치됐다. 당시 썬 마이크로시스템즈는 어떤 하드웨어 플랫폼에서도 동작하는 객체 지향 운영 체제를 원하고 있었다. Green Project Team은 객체 지향의 새로운 언어인 Oak를 개발했다. Oak는 모든 전자제품에 적용시킬 수 있는 전천후 언어로 완성 단계에 이르렀다.
</p>
<p>
제임스 고슬링은 Oak를 기반으로 상품 개발을 추진했다. Interactive TV(양방향TV)에 탑재해 비디오와 오디오를 통제할 수 있는 작은 액정 Controller를 제작했다. 그 후 Green Project는 자바 프로젝트로 새 출발을 하게 된다. 고슬링은 Oak를 웹에 적용시킬 수 있는 코드 작업을 맡았고 Naughton이 코드를 인터넷 상에서 컴파일할 수 있는 킬러 애플리케이션을 제작했다. 그 결과 고슬링의 코드는 자바(Java)라는 이름으로, Naughton의 킬러 앱은 핫자바라는 이름으로 완성된다.
</p>
</body>
</html>
결과
제임스 고슬링은 캐나다 캘거리 대학교를 거쳐 카네기 멜론 대학교에서 박사학위를 밟고 썬 마이크로시스템즈에 합류한다. 그는 1990년 말 Patrick Naughton, Mike Sheridan과 함께 Green Project Team에 배치됐다. 당시 썬 마이크로시스템즈는 어떤 하드웨어 플랫폼에서도 동작하는 객체 지향 운영 체제를 원하고 있었다. Green Project Team은 객체 지향의 새로운 언어인 Oak를 개발했다. Oak는 모든 전자제품에 적용시킬 수 있는 전천후 언어로 완성 단계에 이르렀다.
제임스 고슬링은 Oak를 기반으로 상품 개발을 추진했다. Interactive TV(양방향TV)에 탑재해 비디오와 오디오를 통제할 수 있는 작은 액정 Controller를 제작했다. 그 후 Green Project는 자바 프로젝트로 새 출발을 하게 된다. 고슬링은 Oak를 웹에 적용시킬 수 있는 코드 작업을 맡았고 Naughton이 코드를 인터넷 상에서 컴파일할 수 있는 킬러 애플리케이션을 제작했다. 그 결과 고슬링의 코드는 자바(Java)라는 이름으로, Naughton의 킬러 앱은 핫자바라는 이름으로 완성된다.
<br>줄바꿈 태그
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
제임스 고슬링은 캐나다 캘거리 대학교를 거쳐 카네기 멜론 대학교에서 박사학위를 밟고 썬 마이크로시스템즈에 합류한다.<br> 그는 1990년 말 Patrick Naughton, Mike Sheridan과 함께 Green Project Team에 배치됐다.<br> 당시 썬 마이크로시스템즈는 어떤 하드웨어 플랫폼에서도 동작하는 객체 지향 운영 체제를 원하고 있었다.<br> Green Project Team은 객체 지향의 새로운 언어인 Oak를 개발했다.<br> Oak는 모든 전자제품에 적용시킬 수 있는 전천후 언어로 완성 단계에 이르렀다.
</body>
</html>
결과
제임스 고슬링은 캐나다 캘거리 대학교를 거쳐 카네기 멜론 대학교에서 박사학위를 밟고 썬 마이크로시스템즈에 합류한다.
그는 1990년 말 Patrick Naughton, Mike Sheridan과 함께 Green Project Team에 배치됐다.
당시 썬 마이크로시스템즈는 어떤 하드웨어 플랫폼에서도 동작하는 객체 지향 운영 체제를 원하고 있었다.
Green Project Team은 객체 지향의 새로운 언어인 Oak를 개발했다.
Oak는 모든 전자제품에 적용시킬 수 있는 전천후 언어로 완성 단계에 이르렀다.
<img src="cat.jsp" width="100" height="100"(가로세로 이미지 크기 조정) alt="고양이"(이미지가 깨졌을때 출력되는 문자) title="고양이 이미지"(커서를 이미지에 두면 나타나는 이미지 도움말)> 이미지 태그
table만들기
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<tr>하나의 행 tr
<td>이름</td>하나의 컬럼 td
<td>id</td>
<td>pw</td>
</tr>
<tr>
<td>오지석</td>
<td>oh</td>
<td>1234</td>
</tr>
</table>
</body>
</html>
결과
이름 id pw
오지석 oh 1234
table 테두리 설정
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border="1">
<tr>
<td>이름</td>
<td>id</td>
<td>pw</td>
</tr>
<tr>
<td>오지석</td>
<td>oh</td>
<td>1234</td>
</tr>
</table>
</body>
</html>
결과
테이블 구조
html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border="1">
<thead> //테이블 칼럼명 부분
<tr>
<th>이름</th> //<th>태그를 사용하여 굵기를 진하게함
<th>id</th>
<th>pw</th>
</tr>
</thead>
<tr>
<td>오지석</td>
<td>oh</td>
<td>1234</td>
</tr>
<tfoot> //테이블 하단부분
<td>갯수</td><td></td><td>1개</td>
</tfoot>
</table>
</body>
</html>
thead와 tfoot 태그는 위치에 상관없이 가장 상단과 하단에 나타남
결과
