HTML 에서 사용하는 다양한 태그들(2)

Notice

Recent Posts

Recent Comments

Link

구상님의 웹 포커스

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Dog foot print

HTML 에서 사용하는 다양한 태그들(2) 본문

HTML

HTML 에서 사용하는 다양한 태그들(2)

개 발자국 2019. 6. 27. 22:11

하루에 두번 씩 블로그를 업데이트 하기로 자스민 사람들과 약속하였다. 오늘 새벽에 javascript for문과 while에 대해서 올려서 오늘 두개를 올린 것은 맞지만 ... 쪼오금 양심에 찔리기 때문에 시간이 있을 때 몇가지의 html태그들과 개행을 사용하는 방법을 정리하려한다.

시작하며

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

지난 포스팅에서 이와 같은 구조의 html 기본 뼈대를 만들었을 것이다. 그리고 우리는 웹에서 텍스트나 무언가들이 보이려면 <body>태그 안에 작성하는 것을 알고 있다.

<a> 앵커 ,링크

앵커태그는 우리가 흔히 알고 있는 텍스트를 누르면 다른 웹페이지로 이동 할 수 있는 링크를 만들어 주는 태그이다.

<a>go To Naver</a>

위와 같이 앵커태그를 작성하면 놀랍게도 아무일 도 일어나지 않는다 ! 그 이유는 우리가 <a>태그에 링크를 걸어주지 않았는데, 링크를 걸어줄때는 다음과 같이 작성한다.

  <a href="http://www.naver.com">go To Naver</a>

<a>태그가 선언 되는 앞 부분에 href="" 가 추가되었는데 href=""는 링크로 이동할 경로를 지정할 수 있다. href 처럼 태그안에서 태그를 조금 더 구체화시켜주는 것을 어트리뷰트(attribute,속성)라고 한다.

위와 같이 <a>태그에 href 속성을 추가해주니 다음과 같이 폰트의 색상이 변하고 텍스트 밑에 언더라인이 생긴것을 볼 수 있다. 또한 전과 다르게 텍스트 위에 커서를 올리니 커서가 손모양으로 변하고 클릭하니 네이버로 이동할 수 있게 링크가 생성 되었다.

paragraph , 문단

태그는 문단을 나눠 줄때 사용하는 태그이다.

    <p>Lorem ipsum, dolor sit amet consectetur adipisic
    ing elit. Tempora rerum laborum aliquam cupiditate, 
    molestiae at? Quis rem amet, id exercitationem eaque rerum beat
    ae optio iste itaque omnis. Sapiente, dolorem beatae.</p>

태그안에 아무런 의미 없는 텍스트를 작성했는데 아무런 일도 없다. 그러나 태그 바깥에 다른 무언가를 적어주니 변화가 생긴다.

p 태그로 텍스트를 감싸게 되면 텍스트가 이어지지 않고 자동으로 개행이 된다.

, 볼드, 이탤릭체 태그

태그와 이탤릭체는 글씨를 굵게 만들어주거나 글씨를 기울게 해줍니다.

   <b>볼드 굵게 만들어 줍니다.</b>
   <i>이탤릭 글씨가 기웁니다.</i>

볼드 굵게 만들어줍니다.

이탤릭 글씨가 기웁니다.

개행

우리는 텍스트를 작성하여 개행이 필요할때면 엔터키를 눌러서 문단사이에 개행을 넣는다. 그러나 텍스트 에디터에서 아무리 enter키를 눌러 텍스트사이에 개행을 하여도 페이지에서는 개행이 되지 않는다. 이럴 때 개행을 넣어주는 태그가 있는데 바로 태그이다.

(br태그는 닫을 필요없이 열어주면 된다.)

   <b>볼드 굵게 만들어 줍니다.</b><br>
   <i>이탤릭 글씨가 기웁니다.</i>

<hr> 수평선

이 <hr>태그를 실전에서 사용해본적은 없지만 html을 처음 접했을 때 이 <hr>태그로 간단한 소개페이지를 만들고 놀았다.

 <h1>자스민</h1>
   <hr>
   <p>
       Lorem ipsum dolor sit 
       amet consectetur adipisicing elit. A
       ias aperiam, quasi quidem earum sapiente molestiae optio. 
       Aliquid officiis quis unde fugit, facilis est recusandae. 
       Repellendus pariatur ipsa amet iste enim!
   </p>

특수기호 &nbsp

텍스트에디터에서 스페이스버튼을 100번 치고 웹페이지를 보면 단 1번의 공백만이 존재한다. 웹 페이지는 문서상에 있는 공백이 중복되어 있는 경우 단 한번만 출력한다. 만약 공백이 여러개 필요하다면 &nbsp 를 텍스트 사이에 작성하게 되면 &nbsp를 입력한 만큼 공백이 늘어난 것을 볼 수 있다.

<h1>자스민</h1>
   <hr>
   <p>
       Lorem ipsum dolor sit 
       amet consectetur adipisicing elit. A &nbsp; \n
       ias aperiam, quasi &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;quidem earum sapiente molestiae optio. 
       Aliquid officiis quis unde fugit, facilis est recusandae. 
       Repellendus pariatur ipsa amet iste enim!
   </p>