본문 바로가기
코딩

html_br_img_alt

by 행운월드 2020. 9. 2.
반응형

 

 

이번 포스팅은 html의 <br>, <img>, <alt> 태그에 대한 포스팅입니다.

 

 

     <br>     

● 지난번 포스팅에서, <body>태그 내에 들어가는 text 콘텐츠들의 문단을 나누기 위해서는, <p>태그를 사용한다고, 다루었습니다. 문단을 나누는것은 text들 뿐만이 아닌, 여러가지 요소에서 필요로 합니다. 이미지 요소나, 기타 다른 태그들이 뒤섞여 있을때, 구분을 쉽게 하기위해서, 사이를 띄우거나 문단을 나눌 필요성이 있습니다. 구분을 위한 문단 나누기를 하는 방법으로는 여러가지가 있습니다. 그중에서 가장 쉽고, 흔한 방법은 바로 <br>태그 입니다. <br>은 열고 닫는 형식의 태그와는, 다르게 단독으로 쓰여집니다. 본문태그 내에서 한줄을 띄워주기 위해서 아무리 엔터를 쳐도, 웹브라우저 상에서는 표현이 안됩니다. 반드시 태그로 "이 곳의 다음 요소부터는 아래줄에 표현된다"라는 식으로 태그를 써주어야 합니다. 아래의 태그를 예로 들겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_br_img_alt</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱">
  <meta name="author" content="행운공장">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and
praising pain was born and I will give you a complete account of the system,
and expound the actual teachings of the great explorer of the truth,
the master-builder of human happiness. No one rejects, dislikes,
or avoids pleasure itself, because it is pleasure, but because those
who do not know how to pursue pleasure rationally encounter consequences
that are extremely painful. Nor again is there anyone who loves or pursues
or desires to obtain pain of itself, because it is pain, but because occasionally
circumstances occur in which toil and pain can procure him some great pleasure.

</p>

</body>
</html>

위에 코딩은 화면에 아래와 같이 보여집니다.

보시다시피, 무장들이 완전히 붙어있습니다. 이런 상태에서 특정한 문장앞에 <br>태그를 넣어보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_br_img_alt</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱">
  <meta name="author" content="행운공장">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and
praising pain was born and I will give you a complete account of the system,
and expound the actual teachings of the great explorer of the truth,
the master-builder of human happiness. No one rejects, dislikes,
or avoids pleasure itself, because it is pleasure, but because those
who do not know how to pursue pleasure rationally encounter consequences
that are extremely painful. 
<br>
Nor again is there anyone who loves or pursues
or desires to obtain pain of itself, because it is pain, but because occasionally
circumstances occur in which toil and pain can procure him some great pleasure.

</p>

</body>
</html>

<br>태그가 들어간 문장이 아래로 1줄 내려간 상태를 확인할 수 있습니다.

<br>태그를 활용해서, 문단의 사이를 더 띄워주고 싶다면, 여러개를 사용하면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_br_img_alt</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱">
  <meta name="author" content="행운공장">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and
praising pain was born and I will give you a complete account of the system,
and expound the actual teachings of the great explorer of the truth,
the master-builder of human happiness. No one rejects, dislikes,
or avoids pleasure itself, because it is pleasure, but because those
who do not know how to pursue pleasure rationally encounter consequences
that are extremely painful. 
<br><br><br>
Nor again is there anyone who loves or pursues
or desires to obtain pain of itself, because it is pain, but because occasionally
circumstances occur in which toil and pain can procure him some great pleasure.

</p>

</body>
</html>

<br>태그를 3번 마크업했을 경우의 화면입니다.

<br>태그는 편리하긴 하지만, 요소끼리의 사이를 수치를 주어서 정확하게 표현해서, 띄워주고 싶을때는 다른 태그를 사용해야 합니다.

 

 

    <img>     

● <img>는 이미지 요소를 넣을 수 있는 태그입니다. html태그들 중에서 웹을 다채롭게 표현해주는 요소중에 하나입니다. 글씨로 가득차 있는 화면에 이미지를 표현해 주어, 지루함을 덜어줍니다. 웹에 <img>태그로 이미지를 표현하는 방법은 <img src="">로 합니다. src의 ""사이에 이미지의 경로를 올바르게 넣어주면 됩니다. 아래의 태그를 참고해 주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_br_img_alt</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱">
  <meta name="author" content="행운공장">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>
귀여운 이미지를 넣어볼까...
<br>
<img src="https://hhgongjang.cafe24.com/blog/0902cute.jpg">
<br>
위에 이미지는 이미지를 무료로 다운 받을 수 있는 사이트에서 다운받은 이미지 입니다.
</p>

</body>
</html>

위에 태그가 웹브라우저에 표현된 화면은 아래와 같습니다.

위의 태그에서 표현되어진, src의 경로는 절대 경로 입니다. 절대경로와 상대경로에 대한 설명은 언젠가는 별도로 포스팅하겠습니다. 쉽게 설명하면, 절대경로와 상대경로를 나누는 기준은 현재 웹화면을 표현해주는 파일의 위치를 기준으로 나누는 방식인데, 설명하자면 길어지니 나중에 다루어 보도록 하겠습니다.

 

    <alt>     

● 그런데, 웹을 보여줄때 모든 상황이 다 만족되는 것은 아닙니다. 그래서, 이미지에 대한 설명이 필요합니다. 그럴때는 <img>태그에 alt를 사용하여 표현해 주면 됩니다. alt는 스크린 리더기가 사용되어지는 상황에서도 필요합니다. 다음의 태그를 예로 들겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_br_img_alt</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱">
  <meta name="author" content="행운공장">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>
귀여운 이미지를 넣어볼까...
alt설명 전
<br>
<img src="https://hhgongjang.cafe24.com/blog/0902cute.jpg" alt="파스텔톤 색상의 귀여운 인형과 가구들이 있는 이미지">
<br>
위에 이미지는 이미지를 무료로 다운 받을 수 있는 사이트에서 다운받은 이미지 입니다.
alt설명 후
</p>

</body>
</html>

위의 태그로 표현된 웹화면 입니다.

태그의 요소가 정상적일때는, 화면에 이상없이 보여집니다. 다음의 태그에서 경로를 잘못된 경로로 수정해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_br_img_alt</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱">
  <meta name="author" content="행운공장">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>
귀여운 이미지를 넣어볼까...
alt설명 전
<br>
<img src="https://hgongjang.cafe24.com/blog/0902cute.gif" alt="파스텔톤 색상의 귀여운 인형과 가구들이 있는 이미지">
<br>
위에 이미지는 이미지를 무료로 다운 받을 수 있는 사이트에서 다운받은 이미지 입니다.
alt설명 후
</p>

</body>
</html>

아래의 이미지는 위의 태그로 표현되어진, 웹화면입니다. 이미지의 경로가 올바르지 못하여, 제대로 표현되어지지 못하고, alt의 내용만 화면에 보여지는 것을 볼 수 있습니다.

웹을 표현해주기 위한 환경이 모든곳에서, 최적화 되어 있지 않은 경우에 잘 활용되어지는 것이 alt입니다. 만약의 상황을 위해서, alt속성을 잘 사용해 보세요.

 

 

 

저작자표시

'코딩' 카테고리의 다른 글

html_주석_color(주석처리와 색상코드)  (0) 2020.10.01
html_b_strong_ins(텍스트 표현 서식들)  (0) 2020.09.21
html_h1_h6_p  (0) 2020.08.26
html_meta_charset_name_content  (0) 2020.08.18
코딩_인공지능 사진 인식_닮은 동물 찾기  (0) 2020.08.07

관련글

댓글

티스토리툴바