-
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 태그는 위치에 상관없이 가장 상단과 하단에 나타남
결과
'html' 카테고리의 다른 글
태그들과 검색엔진 최적화 (0) 2020.06.29 form태그 (0) 2020.06.29