body에 텍스트를 이용한 태그들

Recap 복습

  • html 문서는 tag로 이루어 진다.
  • 태그는 열린 태그와 닫힌 태그가 있으며, 내용은 태그의 사이에 들어간다.
  • 기본적으로 html은 head와 body로 구분되어 보여진다.
  • 기본적으로 사용되어야 할 html 코드를 보일러 플레이트라고 한다.

글 내용 적기

이전의 글에서 기본적인 html의 구조에 대해서 간략히 알아보았다면, 당연히 다음 수순은 그 안에 내용을 집어 넣어 볼 차례일 것이다. 우선은 간단한 문장 부터 넣어볼것이다.

입숨

글 내용을 어떻게 넣을것인지는 고민하지 않도록 한다. 우리는 한글 입숨을 이용하여 테스트용 글을 사용할 것이다. 한글 입숨 이라는 키워드로 검색을 하여도 좋고, 한글 로렘 입숨 (http://guny.kr/stuff/klorem/)을 이용해도 좋을 것이다. 향후 디자인 및 기획 업무등에서 많이 사용하게 될것이니 굳이 외울필요는 없지만 이런 내용이 있다고 알아두도록 한다.

기본 p, br

내용은 body 안에 작성한다고 하였으니, 기존의 보일러 플레이트를 활용하여 작성해보자.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        통신·방송의 시설기준과 신문의 기능을 보장하기 위하여 필요한 사항은 법률로 정한다. 국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한 소비자보호운동을 법률이 정하는 바에 의하여 보장한다.
        공공필요에 의한 재산권의 수용·사용 또는 제한 및 그에 대한 보상은 법률로써 하되, 정당한 보상을 지급하여야 한다. 혼인과 가족생활은 개인의 존엄과 양성의 평등을 기초로 성립되고 유지되어야 하며, 국가는 이를 보장한다.
    </body>
</html>

브라우저가 크게 설정되어 있으면 잘 보이지 않을수 있겠지만, 이 문서는 무엇인가 문제를 가지고 있다. 문단단위가 구분이 안가는 문제 즉 한 문단이 끝나고 줄바꿈이 되어야 하는데 그런것이 없이 나오는 문제이다. 이를 해결하기 위하여 p 태그를 이용할 것이다. p 는 paragraph(문단)의 약자이다.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <p>통신·방송의 시설기준과 신문의 기능을 보장하기 위하여 필요한 사항은 법률로 정한다. 국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한 소비자보호운동을 법률이 정하는 바에 의하여 보장한다.</p>
        <p>공공필요에 의한 재산권의 수용·사용 또는 제한 및 그에 대한 보상은 법률로써 하되, 정당한 보상을 지급하여야 한다. 혼인과 가족생활은 개인의 존엄과 양성의 평등을 기초로 성립되고 유지되어야 하며, 국가는 이를 보장한다.</p>
    </body>
</html>

저장 후 웹 브라우저를 갱신하여 보면 이제야 제대로 문단 구분이 되어서 나오는 것을 볼수 있을것이다.

근래의 페이지들을 만드는 경우 특별히 문단 안에서도 줄바꿈을 해야 할때가 있다. 이 경우는 혼자 사용되는 br 태그를 사용한다. 위의 예제에서 각 줄의 마침표 마다 br 태그를 삽입하여 보자 

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <p>통신·방송의 시설기준과 신문의 기능을 보장하기 위하여 필요한 사항은 법률로 정한다.<br> 국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한 소비자보호운동을 법률이 정하는 바에 의하여 보장한다.</p>
        <p>공공필요에 의한 재산권의 수용·사용 또는 제한 및 그에 대한 보상은 법률로써 하되, 정당한 보상을 지급하여야 한다. 혼인과 가족생활은 개인의 존엄과 양성의 평등을 기초로 성립되고 유지되어야 하며, 국가는 이를 보장한다.</p>
    </body>
</html>

이로서 텍스트 형태의 내용을 잘 배치 할 수 있게 되었다.

강조를 해보자 strong, u, em

흔히들 문장을 입력해 두고 강조를 위해서 두껍게 하기, 밑줄 귿기, 기울인글씨로 표시하기 등의 방법을 사용하곤 한다. 종이와 펜만을 사용하던 시절에야 밑줄 그리기가 전부이겠지만, 이 세가지를 사용하여 첫번째 문단의 몇몇 단어들을 강조해 보도록 하자.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <p>통신·방송의 <strong>시설기준</strong>과 <u>신문</u>의 기능을 <em>보장하기 위하여</em> 필요한 사항은 법률로 정한다.<br> 국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한 소비자보호운동을 법률이 정하는 바에 의하여 보장한다.</p>
        <p>공공필요에 의한 재산권의 수용·사용 또는 제한 및 그에 대한 보상은 법률로써 하되, 정당한 보상을 지급하여야 한다. 혼인과 가족생활은 개인의 존엄과 양성의 평등을 기초로 성립되고 유지되어야 하며, 국가는 이를 보장한다.</p>
    </body>
</html>

브라우저를 통해서 확인해보도록 하자. 나름대로 볼만한 문서가 되어가고 있음을 볼수 있을것이다.

헤딩 h1 - h6

신문 기사를 보게 되면 헤드라인이라는 문장이 있어서, 굵고 크게 제목과 같이 표시하는 경우를 볼 수 있다. 이렇듯 브라우저에서 기본적은 문장의 크기들을 지정해 놓은 태그가 있다. 제목등에 사용하므로 구글이나 네이버등의 검색엔진에서 별도로 검색에 참조 하기 때문에 제목의 위치에서는 이러한 heading 태그를 사용해 주는 것이 좋으므로 참조해 둔다.

    <body>
        <h1>텍스트 태그 연습</h1>
        <h2>첫번째 문단</h2>
        <p>통신·방송의 <strong>시설기준</strong>과 <u>신문</u>의 기능을 <em>보장하기 위하여</em> 필요한 사항은 법률로 정한다.<br> 국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한 소비자보호운동을 법률이 정하는 바에 의하여 보장한다.</p>

소스 예제 에서 글이 계속 길어지며 반복이 심해 지므로 이제 전체의 html을 언급하지 않도록 하겠다. 태그들을 보면서 어느 위치인지 잘 찾아 보도록 한다. 또한 위의 예제 코드에서 h1, h2를 사용하였다. h6까지 사용해 보면서 그 변화를 알아 보도록 하자.



댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 박스 모델 배열.

이미지
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다. Recap 스타일 요소를 html 에 포함한다. 기본 작성 규칙 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다. 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다. RGB 값을 이용하여 색상을 숫자로 표현한다. flex 모델 부모 요소에 flex 스타일을 적용 flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: #ccc; margin-top: 30px; } #top { background-color: white; border: none; } .rect { border: 1px solid black; width: 250px; height: 250px; } #rec_container { display: flex; } </style> </head> <body> <div id=...
자세한 내용 보기

페이지 레이아웃을 위한 준비

이미지
이제까지 html 파일을 작성하면서 연습용 파일을 이용하였지만, 실제 업무 또는 결과물을 위해서는 페이지 또는 사이트의 기획 부터 시작 하는 것이 맞을 것이다. 현재는 기획은 없지만, 일반적인 회사에서 많이 사용하는 페이지의 구조를 생각하여 참조할 레이아웃을 찾아보았다.   이 페이지를 각각의 구성요소로 분해하고, 이를 배치 하는 것을 레이아웃 이라고 한다. 위의 샘플 이미지를 이용하여 레이아웃을 잡아보면 각 개인마다 다른 의견들이 있겠지만 대부분 아래와 같을것이다.   Recap 표 표시 하기 - table, tr, td 태그 표의 속성 조정하기 - width, height 표의 각 칸 (cell) 의 속성 조정하기. 내용을 구조화 한다. - div 우선 "구조화 한다" 라는 단어가 생소할 듯 하다. 구조화란 "어떠한 대상을 비슷한 성질의 것으로 분류하고 그 분류를 차곡차곡 정리하여 조직적으로 쌓아 올린다." 라는 뜻이다. 이전의 포스트에서 테이블을 이용하여 사각형을 표시할 수 있게 되었으며, 위의 이미지를 보면 사각형의 모음으로 내용을 구조화 시킨 것을 살펴 볼 수 있다. 하지만 표를 이용하여 구조화된 페이지를 구성하게 되면 전체 페지가 표 하나와 같은 형태를 지니게 된다. 즉 html 문서 자체가 표가 되어 버리는 상황이 된다. 이것은 검색엔진이나 그림의 형태가 중요하지 않은 서비스에서 큰 장애가 된다. 따라서 이러한 구조화된 형태를 만들기 위하여 div 태그가 존재 한다. div 태그는 그 자체로는 내용에 영향을 미치지 않는다. <!DOCTYPE html> <html> <head> <title>TITLE</title> </head> <body> <div>top</div> <div>logo</div...
자세한 내용 보기

CSS 의 간략한 설명.

이미지
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다. Recap div를 이용하여 html 문서를 구조화 한다. div를 계층적으로 이용하여 부모 자식 구조를 만든다. div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다. div 요소를 구분하기 위하여 id 와 class 속성을 사용한다. 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다. style 요소 css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: ghostwhite; } </style> </head> <body> <div id="top" style="border: 3px solid red; height:30">top</div> <div id="logo" style="border:...
자세한 내용 보기