[HTML-01] Tags

매커니즘

Web dynamic project 구조

• Java Resources : java source 파일
• WebContent : 서버. html, css, javasript 등의 파일이 서버에 올라가게 됨
• URL (Uniform Resource Locator) : 접속 주소 요청

http://localhost:8090/Sample/index.html
http://192.168.0.105:8090/Sample/index.html

• DNS (Domain Name System) : 도메인 네임 서비스

 

HTML

• Hyper Text Mark up Language
• Tag 형식 <태그명></태그명>, <태그명>, <태그 속성(attribute)=value> 텍스트 </태그>
• <br> : 개행

프로그래머들에게 가장 어려운 것 하나만 꼽아보라고 하면 절반이 ‘naming’을 선택한다고 합니니다. <br>
프로그램을 작성하면서 파일명, 클래스명, 변수명, 함수명 등 수도 없이 많은 이름들을 지어내야 합니다. <br> 
거의 작명소 수준입니다. 그런 이름 짓기보다 더 어려운 것이 있습니다. 바로 커밋 메시지 작성입니다. <br>

• <h> : heading tag
• <p> : paragraph tag. 문단별로 자동 개행
• <pre> : 입력한대로 출력

<pre>우리가 보고 있는대로 나오게 된다
개행도 자동으로 행해짐!</pre>

결과 화면

Attribute(=속성)

<태그명 attribute1="값" attribute2="값"></태그명>

property(=특성)

<태그명 attribute="property1:값;property2:값"></태그명>

<h1 style="color: blue; background-color: #ffff00">Hello Html</h1>

이때 style이 attribute, color가 property

 

Tag 안에서 사용하는 Tag

• <b>, <strong> : bold 체 강조

<!-- bold -->
<p>p <b>tag</b></p>
<p>p <strong>tag</strong></p>

 

• <i> : italic 체 기울기

<!-- italic -->
<p>p <i>tag</i></p>

 

• <sub> : 밑 첨자

<!-- 밑 첨자 -->
<p>A<sub>2</sub></p>

 

• <sup> : 위 첨자 → Aª

<!-- 위 첨자 -->
<p>A<sup>2</sup></p>

 

범위를 묶어 속성을 주는 태그

• <div>
  <div> 태그는 그 자체만으로 개행이 들어가 있다. 태그만으로 의미 있는 경우는 없고 범위로 묶어 속성을 준다.

<div align="center">
	<font size="6">Hello World</font>
	<h3>I can do it</h3>
	<p>Never change my mind</p>
</div>

• <span>
  <span> 태그는 개행이 들어가 있지 않다.

<span>span one</span>
<span>span two</span>
<span>span three</span>

결과

• <a>
  _self : 현재 창에서 이동
  _blank : 새 창에서 이동

<a href="./index3.html" target="_self">index3로 이동(현재창)</a><br>
<a href="./index3.html" target="_blank">index3로 이동(새 창)</a><br>

 

이미지 태그

순위	jpg	png	bmp(bitmap)	gif	tga	tiff
용량(적은순)	1	3	6	2	5	4
압축	1	0
활용	1	3		2

<img alt="이미지없음" src="./bird.png">

alt : 이미지가 없을 경우 대체되는 텍스트

WebContent는 로컬이 아닌 서버 폴더 이므로 해당 폴더에 넣으면 경로를 ./ 로 지정하여 출력 가능하다.

<a href="https://blog.ull.im/engineering/2019/03/10/logs-on-git.html">
	<img alt="이미지없음" width="200" height="100" src="./kakao.jpg"><br>
</a>

이미지에 태그달기!