WEB1 HTML-제목과 줄바꿈

HTML 태그 중 제목을 쓰는 데 사용하는 태그와 줄 바꿈을 하는데 쓰이는 태그를 배웠다.

 

우선 제목을 쓰는데 쓰이는 태그는 <h1>제목</h1>이다.

줄 바꿈을 하는데 쓰이는 태그는 <br>이고

단락을 표현하는 태그는 <p>단락</p>이다.

 

<h1>HTML</h1>
Hypertext Markup Language (HTML) is the 
standard markup language for 
<strong>creating <u>web</u> pages</strong> and web applications.Web 
browsers receive HTML documents from a 
web server or from local storage and 
render them into multimedia web pages. 
HTML describes the structure of a web 
page semantically and originally 
included cues for the appearance of 
the document.

HTML elements are the building blocks 
of HTML pages. With HTML constructs, 
images and other objects, such as 
interactive forms, may be embedded into 
the rendered page. It provides a means 
to create structured documents by 
denoting structural semantics for text 
such as headings, paragraphs, lists, 
links, quotes and other items. HTML 
elements are delineated by tags, 
written using angle brackets. 

 저번 코드에다 HTML이라는 제목을 붙이기 위해 <h1>HTML</h1> 태그를 붙여 주었다.

h1태그는 뒤에 숫자가 커질수록 제목 크기가 작아지고 h1~h6까지 있다.

줄 바꿈을 하기 위해 위에 단락과 아래 단락을 그냥 엔터를 쳐서 간격을 주었는데

코드 상에서는 간격이 띄어진 거처럼 보이지만 실제 웹페이지로 구현해보면 아래와 같이 제목만 새롭게 추가되었을 뿐 줄 바꿈은 되지 않은 것을 알 수 있다.

 

이렇게 그냥 엔터로 간격을 둬서는 실제로 웹상에서는 줄 바꿈이 표현되지 않기 때문에 <br>이나 <p>, </p>를 써줘야 한다.

 

<h1>HTML</h1>
Hypertext Markup Language (HTML) is the 
standard markup language for 
<strong>creating <u>web</u> pages</strong> and web applications.Web 
browsers receive HTML documents from a 
web server or from local storage and 
render them into multimedia web pages. 
HTML describes the structure of a web 
page semantically and originally 
included cues for the appearance of 
the document.<br><br>HTML elements are the building blocks 
of HTML pages. With HTML constructs, 
images and other objects, such as 
interactive forms, may be embedded into 
the rendered page. It provides a means 
to create structured documents by 
denoting structural semantics for text 
such as headings, paragraphs, lists, 
links, quotes and other items. HTML 
elements are delineated by tags, 
written using angle brackets. 

먼저 <br>로 줄 바꿈을 하는법을 알아보면 이렇게 줄바꿈을 하고자 하는 곳에 <br>을 써주면 되는데 위에 코드에서는 두 개를 쓴 이유는 <br>을 여러 개 쓸수록 줄 간격을 더 넓힐 수 있기 때문이다.

그리고 <br>은 줄 바꿈이라는 시각적인 의미를 가지고 있기 때문에 닫는 태그는 없다.

 

웹에 코드를 실행해 보니 줄바꿈이 되어 줄 간격이 벌어진 것을 알 수 있다.

 

다음으로 <p>,</p>로 단락을 표현하는 법을 알아보면 다음과 같다.

 

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the 
standard markup language for 
<strong>creating <u>web</u> pages</strong> and web applications.Web 
browsers receive HTML documents from a 
web server or from local storage and 
render them into multimedia web pages. 
HTML describes the structure of a web 
page semantically and originally 
included cues for the appearance of 
the document.</p><p>HTML elements are the building blocks 
of HTML pages. With HTML constructs, 
images and other objects, such as 
interactive forms, may be embedded into 
the rendered page. It provides a means 
to create structured documents by 
denoting structural semantics for text 
such as headings, paragraphs, lists, 
links, quotes and other items. HTML 
elements are delineated by tags, 
written using angle brackets.</p> 

<p>,<p/>는 단락이 시작하는 곳과 끝나는 곳에 여는 태그와 닫는 태그를 써줌으로써 단락을 구분 지어준다.

위와 같이 두 단락을 <p>,<p>태그로 구분 지어주면 아래와 같은 실행 결과가 나온다.

 

이렇게 단락이 구분되는 걸 알 수 있다.

그런데 <p>,</p>태그의 단점은 <br>태그와는 다르게 자유롭게 줄 간격을 조절할 수 없다는 것이다.

하지만 <p>,</P>태그에 css라는 언어를 결합하면 이러한 한계를 극복할 수 있다.

 

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the
standard markup language for
<strong>creating <u>web</u> pages</strong> and web applications.Web
browsers receive HTML documents from a
web server or from local storage and
render them into multimedia web pages.
HTML describes the structure of a web
page semantically and originally
included cues for the appearance of
the document.</p><p style="margin-top:45px;">HTML elements are the building blocks
of HTML pages. With HTML constructs,
images and other objects, such as
interactive forms, may be embedded into
the rendered page. It provides a means
to create structured documents by
denoting structural semantics for text
such as headings, paragraphs, lists,
links, quotes and other items. HTML
elements are delineated by tags,
written using angle brackets.</p>

 간격을 넓히고자 하는 단락의 여는 태그에 위와 같이 style="margin-top:45px;"를 써주면 된다.

그러면 <p>태그 위쪽에 45px만큼의 여백(margin)이 생긴다.

이 코드를 웹에 실행해 보면 아래와 같이 실행된다.

 

CSS를 이용해서 여백을 주니 확실히 <p>태그만 썼을 때 보다 여백이 늘어난 것을 알 수 있다.

 

 

*느낀 점*

 

HTML에서 제목 글자 크기나 줄 바꿈을 할 수 있는 태그가 있다는 것을 오늘 배웠는데

앞으로 배울 학습과정에 얼마나 다양한 기능을 하는 태그들이 나올지 기대가 되고

아직 CSS과정은 들어가지는 않았지만 오늘 맛보기로 잠깐 CSS를 HTML과 결합해서 이용하는 것을

해봤는데 하나의 프로그래밍 언어로만 웹을 만들지 않고 다른 언어와 서로 결합해서 한다는 게

흥미로웠다.