HTML Start!
<>=TAG 태그 요소라고도 한다.
대부분의 태그는 여는 태그와 닫는 태그가 한쌍이어야 한다
<> 와 </>로 이뤄져 있다.
블럭요소: 해당 줄을 다 자신의 영역으로 사용한다.
<!-- --> : 주석처리 방법 직접 입력해도 되고 crtl+shift+/로도 된다
<h1~6> : 글자의 사이즈를 키우거나 줄여준다 1이 가장 크고 6이 가장 작다.
사용한 뒤 </h1~6>으로 닫아줘야한다.
<hr> : 선을 긋는 태그
<meta charset="UTF-8"> <!-- 속성=값 -->
UTF-8로 자동 설정하는 법
Window-Preferences-WEB-HTML Files
-Encoding UTF-8선택
<ul>
<li> </li>
</ul>
둘이 한쌍으로 순서가 정해지지 않은 목록을 작성할 수 있다
<ul type="circle"> 타입을 설정할 수 있다. 기본은 disk다.
<ol>
<li></li>
</ol>
이는 순서가 있는 목록이다.
타입또한 설정 가능하다. 디폴트는 숫자다.
<dl>
<dt>HTML</dt>
<dd>HTML은 Hyper Text Markup Languege의 약자입니다.
</dl>
dl,dt,dd는 용어를 정의할 때 사용하는데 반드시 사용할 필요는 없다.
<img src="images/cafe1.jpg" width="300" height="200" title="cafe 이미지 입니다."
alt="우리동네 카페">
<img> 태그는 이미지를 첨부하는 태그로 src="webapp이후의 폴더 위치/이미지명" 형태로 작성한다.
width 넓이 height 높이 title 마우스를 올렸을때 뜨는 문구 alt 이미지를 불러오지 못했을때 뜨는 문구
<figure>
<figcaption> </figcaption>
<img>
</figure>
이미지와 문구를 맞출때 사용하는 태그다.
<figcaption> 이 사이에 문구를 써준다</figcaption>
a 태그 :
<a href="http://www.kyobobook.co.kr/" target="_blank">
링크를 열어주는 태그로 href에 주소를 target은 _blank : 새창 _self: 기존창에서 이동한다.
<body>
<ul>
<li>
<a href="#Toy1">Toy1</a>
</li>
<li>
<a href="#Toy2">Toy2</a>
</li>
<li>
<a href="#Toy3">Toy3</a>
</li>
<li>
<a href="#Toy4">Toy4</a>
</li>
</ul>
<hr>
<h1 id="Toy1"><u>Toy1 부분입니다.</u></h1>
<img src="images/toy1.jpg" width="250" height="500">
<hr>
<h1 id="Toy2"><i><font color="red">Toy2 부분입니다.</font></i></h1>
<img src="images/toy2.jpg" width="250" height="500">
<hr>
<h1 id="Toy3"><b><font color="green" size="10" face="궁서체">Toy3 부분입니다.</font></b></h1>
<img src="images/toy3.jpg" width="250" height="500">
<hr>
<h1 id="Toy4"><strong><font color="cyan">Toy4 부분입니다.</font></strong></h1>
<img src="images/toy4.jpg" width="250" height="500">
<hr>
<a href="#">맨 위로 이동하기</a>
</body>
</html>
MarkUp 기능 : 글자의 굵기를 바꾼다거나 모양 색 밑줄 등을 설정한다.
'Develop > HTML CSS' 카테고리의 다른 글
| 0630 HTML /CSS (0) | 2022.07.04 |
|---|---|
| 0629 HTML /CSS (0) | 2022.06.29 |