romworld

태그 본문

WEB/HTML & CSS

태그

inderrom 2022. 10. 25. 01:03 
<<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    
  </body>
</html>

- 기본 구조는 이렇다.

 

<p></>		// 본문
<h1></h1>	//머릿말
<h2></h2>
...
// 1,2,3, 머릿말 크기가 조금씩 작아짐
<b></b> 	//볼드체
<i></i>		//이테릭체
<strong></strong> //강조
<em></em>		//강조
<code></code>	//코드임을 표시
<sup></sup>		//위첨자를 표시
<sub></sub>		//아래첨자를 표시
<hr/>	//한줄 긋기
<br/>	//한줄 내림
&nbsp;	//특수문자 공백
&lt;	//특수문자  <
&gt;	//특수문자 >
&quot;	//특수문자 "
&amp;	//특수문자 &
<ul></ul>	//순서가 없는 리스트
<ol></ol>	//순서가 있는 리스트
<dl></dl>	//설명을 표시하는 리스트(정의 리스트)
   <dl>
      <dt>에스프레소</dt>
      <dd>커피의 기본입니다.</dd>
      <dt>아메리카노</dt>
      <dd>에스프레소 + 물</dd>
      <dt>카페라떼</dt>
      <dd>에스프레소 + 우유</dd>
   </dl>
 <a href="http://naver.com" </a>	//원하는 페이지(링크) 이동
  <a href="https://www.naver.com" target="_blank"> 네이버로 이동(_blank)</a>   <!-- blank 와 self가 많이 쓰임 -->
   <p>target _self 실행</p>
   <a href="https://www.naver.com" target="_self"> 네이버로 이동(_self)</a>
   <p>target _parent 실행</p>
   <a href="https://www.naver.com" target="_parent"> 네이버로 이동(_parent)</a>
   <p>target _top 실행</p>
   <a href="https://www.naver.com" target="_top"> 네이버로 이동(_top)</a>
   
   <p>id 속성</p>
   <p id="title">p태그에 id속성(id는 title)을 부여한다</p>
   <a href="mailto:wh-guswns123@hanmail.net">	//이메일 보내기
   
<p>img 태그</p>
   <p>src : 경로를 설정합니다</p>
   <p>width : 이미지의 넓이(가로)를 설정합니다.</p>
   <p>height : 이미지의 높이(세로)를 설정합니다.</p>
   <p>alt : 이미지의 설명을 설정합니다.</p>
   <p>border : 이미지 테두리 굵기를 설정합니다.</p>
   <p>예제)</p>
   <img border="10" src="./img/class01.jpg"
      width="450" height="350"
      alt="20221024_Class 수업 이미지"/>
      
   <p>table tr th td 태그</p>
   <p>표를 만들때 사용하는 태그</p>
   <p>예제)</p>
   <table border="1">
      <tr>
         <th>번호</th>
         <td>1</td>
      </tr>
      <tr>
         <th>제목</th>
         <td>제목입니다</td>
      </tr>
      <tr>
         <th>작성자</th>
         <td>a001</td>
      </tr>
   </table>
   
   <p>행병합, 열병합</p>
   <table border="1">
      <tr>
         <th>1열</th>
         <th>2열</th>
         <th>3열</th>
      </tr>
      <tr>
         <td rowspan="2">1행 1열</td>
         <td>1행 2열</td>
         <td>1행 3열</td>
      </tr>
      <tr>
         <td>2행 2열</td>
         <td>2행 3열</td>
      </tr>
      <tr>
         <td colspan="3">3행 1열</td>
      </tr>
   </table>
   <hr/>
   <table border="1">
   <caption>
      최근에 본 영화들
   </caption>
      <tr>
         <th>영화제목</th>
         <th>연도</th>
         <th>감독</th>
         <th>평가</th>
      </tr>
      <tr>
         <td>라이프 오브 파이</td>
         <td>2013</td>
         <td>이안</td>
         <td>8.68</td>
      </tr>
      <tr>
         <td>레미제라블</td>
         <td>2012</td>
         <td>통후퍼</td>
         <td>8.28</td>
      </tr>
      <tr>
         <td>장고:분노의 추적자</td>
         <td>2012</td>
         <td>타란티노</td>
         <td>8.29</td>
      </tr>
   </table>

'WEB > HTML & CSS' 카테고리의 다른 글

CSS - 시멘틱요소를 이용한 내가 만든 웹페이지  (0) 2023.01.05
CSS - 레이아웃  (0) 2023.01.05
WEB2 - CSS  (2) 2022.07.31
WEB1-HTML(4)  (0) 2022.07.30
WEB1 - HTML(3)  (2) 2022.07.06
'WEB/HTML & CSS' Related Articles more
Comments