HTML

윤지·2024년 9월 3일

HTML/CSS/JavaScrip

목록 보기
3/13

글자모양 태그

<b>굵게</b> : 글자를 굵게 표현
<i>기울기</i> : 글자를 기울여서 표현
<em>강조</em> : 글자를 강조하여 표현
<strong>중요한 부분</strong> : 글자의 중요부분을 굵게 표현
<small>작게</small> : 글자를 작게 표현
<del>취소선</del> : 글자에 취소선 표현
<mark>하이라이트</mark> : 글자에 형광팬처럼 하이라이트 표현

b,em,strong 태그는 보기에는 다 같아 보이지만 HTML에서 추구하는 모두 평등하게 웹페이지를 이용을 추구한다는 것을 생각하면 쉽다. 시각장애인의 입장에서는 다 다르게 들림으로 다 다르다고 볼 수 있다.

예시코드

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>글자모양 태그</h2>
    <br>

    <p> b태그는 글자를<b>굵게</b>표현합니다
    <p>strong태그는 <strong>중요 부분</strong>을 표현합니다 </p>
    <p>i 태그는 글자를 <i>기울여서</i>표현 합니다</p>
    <p>em태그는 <em>강조</em>하는 곳에서 사용합니다</p>
    <p>small 태그는 <small>작게</small>표현합니다.</p>
    <p>del태그는 <del>취소선</del>을 표현합니다</p>
    <p>mark 태그는 글자에 <mark>하이라이트</mark>를 표현 합니다</p>

</body>
</html>

a태그

외부 페이지 이동
<a href ="주소">주소</a>식으로 사용
페이지 내부 이동

  • a 태그를 사용해서 현재 문서 내부의 특정 위치로 이동할 수 있습니다.
  • 원하는 위치의 a 태그에 id 속성을 부여하고, href 속성에 이동하는 고의 '#id'를 작성합니다.

아래 예시 코드는 a태그를 다양한 방식으로 사용할 수 있음을 보여준다

예시코드

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>a 태그</h2>
    <br>
    <p>url : <a href="https://www.w3schools.com">?</a></p>
    <p>내부페이지 : <a href="./02_P_hr_br-tag.html">02_P_hr_br-tag</a></p>
    <p>내부페이지 : <a href="http://localhost:5500/text/03_Entity_Code.html">03</a></p>
    <br>
    <h2>target 속성</h2>
    <p><a href="https://naver.com">Naver</a></p> <!-- 현재 페이지에서 열림-->
    <p><a href="https://naver.com" target="_blank">Naver</a></p> <!--새로운 페이지에서 열림 -->
</body>
</html>
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

 <h2>페이지 내부 이동</h2>
 <br>
 <p>
     <a href ="#list">[ 해적단 목록 ]</a>
     <a href ="#character">[ 캐릭터 ]</a>
     <a href ="#ranking">[ 현상금 순위 ]</a>
 </p>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h3 id ="list">[ 해적단 목록 ]</h3>
<p><a href = "#top">TOP</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h3 id ="character">[ 캐릭터 ]</h3>
<p><a href = "#top">TOP</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
<h3 id ="ranking">[ 현상금 순위 ]</h3>
<p><a href = "#top">TOP</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

여기서 #top은 페이지의 제일 상단으로 이동 가능하는 속성의 값 입니다.

앞선 post에서 img태그에 대하여 언급하였으나 간단하게 설명하고 넘겼음으로 더 자세히 다뤄보겠습니다.

기본 사용 

1. <img src ="주소">
2. <img src = "../../내부주소/이미지.확장자명"/>
3. <img alt="작성내용" src="../../내부주소/이미지.확장자명"/>

이미지 크기 지정

1. <img src= "이미지주소" title = "내용" width = "200px" heigth=300px> 
- px은 고정된값
2. <img src= "이미지주소" title = "내용" width = "30%" heigth=20%> 
- 브라우저 사이즈에 따라 조정됨
- 브라우저가 늘어나면 그 화면에 맞춰서 늘고 줄어들면 화면에 맞춰 이미지가 줄어든다.
3. <img src= "이미지주소" title = "내용" width = "30em" heigth=20em> 
- 부모 폰트 기준으로 적용이 됨

이미지 링크

가상 이미지

예시코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08_img-tag</title>
</head>
<body>

<h2> img 태그 </h2>
<br>
<h3>이미지 태그 기본 사용</h3>
<img alt ="html5 로고 이미지 입니다." src = "http://localhost:8080/WebWork/image/img/html5.jpg" />
<img alt="html5로고입니다." src="../../image/img/html5.jpg"/>
<img alt="html5로고입니다." src="../../image/img/html5.jpg" title ="html5로고"/>
<br><br>

<h3>이미지 크기 지정</h3>
<img src ="../../image/img/html5.jpg" title="html5로고" width="200px" height="300px"/> <!-- 고정된 값 -->
<img src ="../../image/img/html5.jpg" title="html5로고" width="30%" height="40%"/> <!-- 브라우저 사이즈에 따라 조정됨 -->
<img src ="../../image/img/html5.jpg" title="html5로고" width="30em" height="40em"/> <!-- 부모 폰트 기준으로 적용이 됨 -->
<br><br>

<h3>이미지 링크</h3>
<a href = "httpS://www.w3.org"><img alt="html5로고입니다." src="../../image/img/html5.jpg" title ="html5로고"></a>
<br><br>

<h3>가상 이미지</h3>
<img src ="https:via.placeholder.com/500X400"/>
</body>
</html>

figure 태그

  • 본문 내용안에 첨부자료를 표시하면서 설명글을 작성하기 위한 태그 입니다.

figcaption 태그

  • figure 요소안에 제목을 붙일때 사용합니다.

예시코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09_figure-tag</title>
</head>
<body>
<h2>figure</h2>
<br>
<h3>이미지</h3>
<figure>
	<img src = "../../image/img/onepice_poster.jpg" title ="밀집모자 해적단 포스터" width="30%" height="20%">
	<figcaption>&lt; 밀집모자 해적단 현상금 &gt;</figcaption>
</figure>
<figure>
<figcaption>&lt; 밀집모자 해적단 현상금 &gt;</figcaption>
	<img src = "../../image/img/onepice_poster.jpg" title ="밀집모자 해적단 포스터" width="300px" height="200px">
</figure>
<br>

<h3>여러 이미지</h3>
<figure>
	<img src ="../../image/img/라이언_생각.png" title = "라이언 생각" width="100px" height="100px"/>
	<img src ="../../image/img/라이언_장미.png" title = "라이언 장미" width="100px" height="100px"/>
	<img src ="../../image/img/라이언_후드.png" title = "라이언 후드" width="100px" height="100px"/>
	<figcaption>[ 라이언 이미지 ]</figcaption>
</figure>

</body>
</html>
profile
윤지
바다속 무너 개발자
이전 포스트

HTML 특수문자

다음 포스트

CSS태그

0개의 댓글