FrontEnd - HTML(2)

태그

서식 태그

b태그,strong태그

<p><b>글씨 진하게</b></p>
<p><strong>글씨 진하게</strong></p>

b태그는 텍스트를 굵게 표시하고 strong태그는 굵게 표시하고 내용도 중요하다는 의미도 포함한다.

i태그,em태그

<p><i>이탤릭</i></p>
<p><em>이탤릭</em></p>

i태그는 이탤릭으로 표현해주고 em태그는 이탤릭으로 표현과 중요하다는 의미도 포함하고 있다

mark 태그

<p><mark>마크</mark></p>

mark 태그는 형광펜을 칠한 효과를 준다

del 태그

<p><del>효과</del></p>

del태그는 텍스트를 지운듯한 효과를 준다

ins 태그

<p><ins>ins</ins></p>

ins태그는 밑줄을 친 효과를 준다

sup 태그와 sub 태그

<p>x<sub>sub</sub></p>
<p>x<sup>sup</sup></p>

sup 태그는 위첨자 sub 태그는 아래첨자 효과를 준다 수학적 표현을 할때 유용하다

q 태그

<p><q>인용구</q></p>

짧은 인용구는 q태그를 사용하고 큰 따옴표가 들어간다

blockquote 태그

<blockquote>

인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.

</blockquote>

길이가 긴 인용구는 blockquote 태그를 사용하며 별도의 단락으로 구분한다

abbr 태그

<p><abbr title="HyperText Markup Language 5">HTML</abbr></p>

abbr 태그위에 마우스를 올리면 title 속성에 명시한 용어가 등장한다

address 태그

<address>
	서울


</address>

address 태그는 주소를 표현하고 이탤릭으로 표현된다

엔티티

html에는 미리 예약된 몇몇 문자가 있는데 이러한 문자를 html 예약어라고 한다. 예약어 자체 의미를 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티라고 한다

<p> h&nbsp;ello</p>
<p> 1&lt;2</p>
<p> 3&gt;2</p>
<p> 1 &amp; 2</p>
<p> &quot;hello&quot;</p>
<p> &apos;hello&apos;</p>

HTML의 스타일

html 요소에 style 속성을 이용해서 배경색을 바꾼다던지, 글자색을 바꾸거나 가운데 정렬을 사용할 수 있다.

선언

<태그이름 style = "속성이름: 속성값; 속성이름 : 속성값"

• 배경색,색,정렬,폰트 사이즈 변경

<h1 style="background-color:yellow; color:red; text-align:center; font-size: 250%">스타일 변경</h1>

스타일 태그를 하나만 사용하면 세미클론을 선언하지 않아도 되지만 여러개 사용할때는 세미콜론을 사용하고 마지막 속성에는 사용하지 않는다

HTML 링크

링크를 클릭하면 이동하는 것을 하이퍼링크라고 한다. a태그를 이용하면 된다.

a태그

<a href="https://www.naver.co" target=_blank>네이버</a>
<a href="https://www.naver.co" target=_self>네이버</a>
<a href="https://www.naver.co" target=_parent>네이버</a>
<a href="https://www.naver.co" target=_top>네이버</a>

<a href=#bookmark>텍스트</a>


<a name="bookmark">텍스트</a>

target 속성

문서를 어떻게 표시할지 정하는 속성이다

state

<style>
a:link{
  color:yellow;   
} <!--링크를 방문한적이 없을때 색상이 옐로우로 바뀐다 -->
  
a:visited{
  
  color:green;
  } <!--링크를 방문한적이 있을때 색상이 그린으로 바뀐다 -->
  
a:hover {
  
 color:blue; text-decoration: none  
}<!-- 마우스를 링크 위에 올려놨을때 색상이 블루로 바뀌고 밑줄이 없어진다 -->
  
a:active{
  
  color:red; text-decoration:none
  } <!-- 링크를 누르고 있을때 색상이 레드로 바뀌고 밑줄이 없어진다 -->



</style>

이미지 태그

html에 이미지를 사용할수 있는 태그 이다.

<img src="chaewon.jpg" alt="사진이 없습니다" style="width: 150px;height:150px; border: 1px solid white">

여기서 alt는 사진이 없을때 대신 나오는 텍스트 이고 사진의 크기를 직접적으로 적용해도 되지만 내부 스타일 시트나 외부 스타일 시트에 영향을 받지 않으려면 스타일을 사용하는 것이 좋다 이미지 크기는 픽셀로도 가능하고 %으로도 가능하다

리스트

순서가 없는 리스트

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>  <!--기본인 검은색원모양 disc -->

<ul type="circle">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul> <!--기본인 하얀색원모양 circle -->

<ul type = "square">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul> <!--기본인 검은색네모모양 square -->

순서가 있는 리스트

<ol>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ol>
	
	<ol type="a">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ol>
	
	<ol type="A">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ol>
	<ol type="i">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ol>
	
	<ol type="I">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ol>

순서에 따라 숫자가 증가한다 또는 알파벳이 바뀐다

테이블

<style>

table,th,td {

border: 1px solid black


}

</style>


    <table>
	<tr >
	<th>1</th>
	<th>2</th>
	<th>3</th>
	
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	
	</table>

tr은 열을 의미한다 th는 제목을 나타내고 굵은텍스트와 가운데 정렬이 자동으로 된다 td는 테이블의 열을 각각의 셀로 나눠 준다.

테이블 열,행 합치기

열을 합치려면 colspan , 행을 합치려면 rowspan을 사용하면 된다

<table>
	<tr >
	<th>1</th>
	<th>2</th>
	<th>3</th>
	<th>4</th>
	<th>5</th>
	<th>6</th>
	<th>7</th>
	
	</tr>
	<tr>
	<td rowspan="2">1</td>
	<td rowspan="2">2</td>
	<td colspan="2">3</td>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	
	
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	<td>5</td>
	
	</tr>
	<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	</tr>
	<tr>
	<td colspan="2">1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
	<td>5</td>
	<td>6</td>
	
	</tr>
	
	</table>

출처: http://www.tcpschool.com/