본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔드1-2. 기본태그(글자,목록,테이블,미디어,MAP)

by 이쟝 2022. 2. 4.

[1. HTML 기본 태그]

구분 태그 설명
글자태그 h1~h6 제목 글자생성
p(단락), br(줄바꿈), hr(수평줄) 본문 생성
a 하이퍼링크 생성
b, i, small, sub, sup, ins, del 글자 모양 지정
목록태그 ul/ol, li 순서가 없는/있는 목록 생성, 목록 요소 생성
테이블태그 table, tr, th, td 표 생성
미디어태그 img, audio, video 이미지, 오디오, 비디오 삽입

 

 

[1-2 앵커태그]

  •  a태그는 anchor를 의미 하고 href는 hyper reference를 의미
  • <a herf = "이동할 웹페이지">출력글자<a>

 

1. 특정 웹 페이지에 연결하기

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT BASIC PAGE</title>
</head>
<body>
    <a href = "http:/www.naver.com"/>네이버</a>/br>
</body>
</html>

 

2. 같은 폴더에 있는 페이지에 연결하기

 

1) 상대주소 참조 

- 상대주소 입력하는 법: cmd에 입력하는 것과 비슷함 ex) .. : 상위 폴더로 이동

<a href = "상대주소"> 링크걸어 표시할 텍스트</a>

예시 : 
<a href = "../index.html">인덱스페이지</a>

2) 절대주소(파일경로)참조

<a href = "절대주소(파일경로)"> 링크걸어 표시할 텍스트</a>
예시 : 
<a href = "/webApp/index.html">인덱스페이지</a>

 

3. 웹 페이지 내부에 연결하기(같은 페이지의 특정 위치로 이동)

  • 웹 페이지 내부의 특정 태그로 이동하려면 id속성을 추가로 사용해야 한다. 
  • h1 태그에 id속성을 입력하고, 이동하려는 태그의 id 속성을 a태그의 href속성에 '#id 속성' 형태의 문자열을 입력한다.
  • id는 유일한 값을 가진 변수, #는 넘버싸인, 클릭하면 넘버싸인이 있는 곳으로 이동
<h2>같은 페이지의 다른 위치로 이동하기</h2>
1. <a href = "#s1">html이란?</a><br/>
2. <a href = "#s2">css란?</a><br/>
3. <a href = "#s3">javascript란?</a><br/>
4. <a href = "#s4">jquary란?</a><br/>

<br/>
1. <a id = "s1">html이란?</a>
<p>문단테그</p><p>문단테그</p><p>문단테그</p><p>문단테그</p>
<p>문단테그</p><p>문단테그</p><p>문단테그</p><p>문단테그</p>
<p>문단테그</p><p>문단테그</p><p>문단테그</p><p>문단테그</p>

2. <a id = "s2">css란?</a>
<p>cascading</p><p>cascading</p><p>cascading</p><p>cascading</p>
<p>cascading</p><p>cascading</p><p>cascading</p><p>cascading</p>
<p>cascading</p><p>cascading</p><p>cascading</p><p>cascading</p>

3. <a id = "s3">javascript란?</a>
<p>계산이 가능한 웹페이지</p><p>계산이 가능한 웹페이지</p><p>계산이 가능한 웹페이지</p>
<p>계산이 가능한 웹페이지</p><p>계산이 가능한 웹페이지</p><p>계산이 가능한 웹페이지</p>
<p>계산이 가능한 웹페이지</p><p>계산이 가능한 웹페이지</p><p>계산이 가능한 웹페이지</p>

4. <a id = "s4">jquary란?</a>>
<p>javascript라이브러리이다.</p><p>javascript라이브러리이다.</p>
<p>javascript라이브러리이다.</p><p>javascript라이브러리이다.</p>
<p>javascript라이브러리이다.</p><p>javascript라이브러리이다.</p>
<p>javascript라이브러리이다.</p><p>javascript라이브러리이다.</p>
더보기

 

3번을 클릭하면 3. javascript란?으로 이동

1) 문자에 링크걸기

  • target속성은 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시한다.(페이지에서 네이트를 클릭하면 새로운 창으로 네이트가 열림)
문자에 링크걸기:
<a href="https://www.nate.com" target="_blank">네이트</a>
<a href="/webApp/Index.html">나의 홈</a>
<hr/>

 

2) 이미지에 링크걸기

  • 이미지 위에 마우스를 갖다대면 연결되어진 링크로 이동한다. 
이미지에 링크걸기<br/>
<a href="https://www.naver.com" target="_blank"><img src="../img/img1.jpg" width="400"/></a>
<hr/>

이미지에 링크를 걸기 위해서 webapp 하위에 img 폴더 생성하고 img폴더에 사용할 이미지 파일 저장

 

 

  • <pre></pre> : 이 태그 안은 html 태그도 적용되고, space와 enter등이 입력하는대로 적용되는 구역이지만 글자크기는 default값인 16px보다 작다. 
  • <img> 태그의 alt 속성: 이미지를 설명하는 대체 텍스트

 

 

 

 

3) 다운로드 

  • 웹에서 실행되는 파일이 아닐경우에만 다운로드 진행
  • 웹에서 실행되는 jpg 파일, pdf파일 등의 경우에는 새 창에 해당 파일을 실행시켜 보여주기 때문에 다운로드하기 jpg나 pdf 파일을 다운로드 하기 위해서는 download속성을 이용해야 한다!
  • [download] a 태그에 링크된 파일의 속성에 상관없이 무조건 다운로드 하게 만드는 속성
다운로드<br/>

<a href="../etc/1_데이터베이스_실습 2문항(과제).hwp">한글파일</a>
<a href="../etc/day_4.zip">zip파일</a>
<a href="../etc/mysql_demo.sql">sql파일</a>
<a href="../etc/SourceTreeSetup-3.4.7.exe">실행형파일</a>

<a href="../img/img4.jpg" download>이미지파일</a>
<a href="../1_데이터베이스_실습 2문항(과제).pdf" download>PDF파일</a><br/>
<hr/>

 

 

[1-3 목록태그]

 

1. 순서가 없는 기본 목록(ul)

  • ul type 속성: disk(채워진 원), circle(안이 비워진 원), square(채워진 사각형)
<ul type="circle">
	<li>자바</li>
	<li>html</li>
</ul>
		
<ul type="disk">
	<li>자바</li>
	<li>html</li>
</ul>
		
<ul type="square">
	<li>자바</li>
	<li>html</li>
</ul>

 

2. 순서가 있는 기본 목록(ol)

  • ol type  속성: 1, a, A, i, I
<ol>
	<li>자바</li>
	<li>html</li>
	<li>stylesheet</li>
</ol>
	
<ol type="a">
	<li>자바</li>
	<li>html</li>
	<li>stylesheet</li>
</ol>

<ol type="A">
	<li>자바</li>
	<li>html</li>
	<li>stylesheet</li>
</ol>
		
<ol type="i">
	<li>자바</li>
	<li>html</li>
	<li>stylesheet</li>
</ol>
		
<ol type="I">
	<li>자바</li>
	<li>html</li>
	<li>stylesheet</li>
</ol>

[1-4 테이블 태그]

 

 

<table width="300" border = "1" cellspacing="0">
<thead>
	<tr>
		<th></th>
		<th>mon</th>
		<th>tue</th>
		<th>wed</th>
		<th>thurs</th>
		<th>fri</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1교시</td>
		<td>영어</td>
		<td>국어</td>
		<td>과학</td>
		<td>수학</td>
		<td>사회</td>
	</tr>
	<tr>
		<td>2교시</td>
		<td>체육</td>
		<td>음악</td>
        <td>기술</td>
		<td>도덕</td>
		<td>수학</td>
	</tr>
</tbody>
</table>

 

테이블의 속성

 

 

 

1. 테이블에 디자인 요소 넣기

 

 

<table width="500" border="5">
	<caption>표의 제목</caption>

	<colgroup>
		<col style="background-image:url(../img/img1.jpg)"/> <!-- 첫번째 열 -->
		<col span="2" style="background-color:lightpink"/> <!-- 두,세번째 열 -->
	</colgroup>
			
	<thead>
		<tr><!-- 첫번째 행(줄) -->
			<th>AAAAAA</th>
			<th style="background-color:Lightblue">BBBBBB</th>
			<th>CCCCCC</th>
		</tr>
	</thead>
	<tbody>
		<tr height="50" style="background-color:Lightgreen"><!-- 두번째 행(줄) -->
			<td>DDDDDD</td>
			<td>EEEEEE</td>
			<td>FFFFFF</td>
		</tr>
		<tr> <!-- 세번째 행(줄) -->
			<td><img src="../img/img3.jpg" width="100"/></td>
			<td>
				<ul>
					<li>해바라기</li>
					<li>진달래</li>
					<li>코스모스</li>
				</ul>
			</td>
			<td>
				<h4>표연습중</h4>
			</td>
		</tr>
	</tbody>
</table>

 

 

2. 행과 열의 수가 다른 표만들기

 

<h1>행과 열의 수가 다른 표만들기</h1>
	<table width="200" border="1" cellspacing="5">
		<tr> <!-- 첫번째 줄(행) -->
			<td>11</td>
			<td>22</td>
			<td>33</td>
			<td>44</td>
		</tr>
		<tr> <!-- 두번째 줄(행) -->
			<td>55</td>
			<td colspan="2">66</td> <!--두 칸을 합친다.-->
			<td rowspan="2">77</td> <!--두 줄을 합친다.-->
		</tr>
		<tr> <!-- 세번째 줄(행) -->
			<td>88</td>
			<td rowspan="2">99</td>
			<td>1010</td>
		</tr>
		<tr> <!-- 네벌째 줄(행) -->
			<td>1111</td>
			<td>1212</td>
			<td>1313</td>
		</tr>
	</table>

[1-5 미디어 태그]

 

 

 

<audio>태그, <video>태그의 속성

 

controls 플레이어 화면에 컨트롤 바를 표시
autoplay 오디오나 비디오를 자동으로 실행한다. (muted상태일때만 자동재생)
muted 오디오나 비디오의 소리를 제거한다.
loop 오디오나 비디오를 반복 재생한다.
preload 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다.
사용할 수 있는 값은 auto, metadata, none이다. 기본적으로 preload=”auto”가 사용된다.
width, height 비디오 플레이어의 너비와 높이를 지정한다.
width나 height의 값 중에서 하나만 지정하면 나머지는 자동으로 계산해서 표시한다.
poster=”파일이름” <video>태그에서 사용하는 속성으로, 비디오가 재생되기 전에 화면에 표시될 이미지 지정(썸네일)

 

 

 

//1번과 2번의 코드가 같다.
//(1)
<audio src="../audio_movie/mp3.mp3" controls loop="2"></audio>

//(2)
<audio controls loop="2">
	<source src="../audio_movie/mp3.mp3" type="audio/mp3"/>
</audio>

 

//1번과 2번이 동일하다. 
//(1)
<video src="../audio_movie/Seoul_-_21985.mp4" controls poster="../img/img1.jpg"></video>

//(2)
<video controls poster="../img/img1.jpg"> 
	<source src="../audio_movie/Seoul_-_21985.mp4" type="video/mp4"/>
</video>

[1-6 map 태그]

  • <area>요소(<map>의 자식요소)와 함께 이미지의 특정 부분을 지정해 링크를 걸 떄 사용하는 태그
  • 이미지를 마치 지도처럼 사용한다고 해서 이미지맵이라고 한다. 
  • 이미지의 일부분을 클릭하면, 그 부분에 링크된 주소로 이동한다.
  • 항상 모든 컨텐츠가 다 들어오고 난 뒤에 제일 마지막에 map을 추가한다. 

coords 속성(좌표)

  • coords 속성안에는 빈칸이 올 수 없다. 
  • 그림판을 이용해서 x좌표와 y좌표값을 구한다. 
  • 이미지 맵 태그 쉽게 만들어주는 사이트: www.image-map.net/

 

사각형(shape="rect")  좌표의 순서 x1,y1,x2,y2(좌측 상단의 x1,y2먼저 구하고 우측 하단의 x2,y2구하기)
원모양(shape="circle") 좌표의 순서 x,y,r(반지름)(x,y는 원의 중심점 좌표)
다각형모양(shape="poly") 좌표의 순서 x,y,x,y,... 시작하고 싶은 위치를 정해서, 시계방향 OR 반시계방향
3개 이상의 x,y좌표		 
<img src="../img/jeju_map.jpg" usemap="#jejuMap>

<map name="jejuMap">
	<area shape="rect" coords="190,130,315,170" href="https://www.airport.co.kr/jeju/index.do" title="제주공항으로" target="_blank"/>
</map>
더보기
  • 이미지의 usemap="이름"과 map name="이름"은 동일하게 지정한다.
  • 좌표쪽에 마우스를 갖다대면 title이 뜨고 누르면 페이지 이동한다.

 

<img src="../img/jeju_map.jpg" usemap="#jejuMap"/>
	
<map name="jejuMap">
	<area shape="circle" coords="340,270,50" href="https://www.visitjeju.net/kr/detail/view?contentsid=CONT_000000000500685" title="한라산" target="_blank"/>
</map>

 

<img src="../img/jeju_map.jpg" usemap="#jejuMap"/>
	
<map name="jejuMap">
	<area shape="poly" coords="65,215,160,270,50,290,20,245" href="https://www.visitjeju.net/kr/detail/view?contentsid=CONT_000000000500697" title="협재해수욕장" target="_blank/">
</map>
저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드1-6. CSS 메뉴 만들기 실습(가상클래스, text-decoration)  (0) 2022.02.05
프론트엔드1-5. CSS 기초(선택자, position, background)  (0) 2022.02.05
프론트엔드1-4. <div>  (0) 2022.02.04
프론트엔드1-3. 기본태그(form과 input, 그 외 태그들)  (0) 2022.02.04
프론트엔드1-1. 웹서버, 아파치 톰캣, 환경변수 설정하기  (0) 2022.02.04

관련글

티스토리툴바