[HTML] 기본 문법과 태그_(1) (<strong>, <u>, <h1>, <br>, <p>, <image>) - 짱우의 코딩일기 - 티스토리

  요즘 HTML 공부를 하면서 티스토리 블로그를 편집할 수 있는 실력이 생길날이 오기만을 기다리고 있다. 아직 CSS는 공부를 못했으니 좀만 참아봐야겠다.

  HTML 공부는 '생활코딩! HTML+CSS+자바스크립트' 책을 보면서 공부하고 있다. 다음 글의 예제들도 모두 책에 있는 내용을 바탕으로 작성한 글이다.

---

기본 문법과 태그

html 파일 생성 후 텍스트 입력

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

< html 파일 생성 후 텍스트 출력 화면 >

 

<strong> 태그로 굵게 강조

<strong>Hypertext Markup Language (HTML)</strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

< strong 태그로 굵게 강조한 출력 화면 >

 

<u> 태그로 밑줄 긋기

<strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

< u 태그로 밑줄 그은 출력 화면 >

  <u> 태그의 u는 underline의 첫 번째 글자다.

 

<h1> 태그를 이용해 제목 만들기

<h1>HTML</h1>

<strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

< h1 태그를 이용해 제목 만들고 난 후의 출력 화면 >

  h 뒤의 숫자가 커지면 커질수록 화면에 출력되는 글씨의 크기는 작아진다.

 

줄바꿈 : <br>, <p>

  줄바꿈 태그를 연습하기 위해 내용을 더 추가해준다.

<h1>HTML</h1>

<strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

< 내용 추가 한 후의 출력 화면 >

새로운 줄을 표현하는 <br> 태그

<h1>HTML</h1>

<strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. <br><br><br> HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

  <br> 태그를 세 번 썼다.

< br 태그를 이용한 출력 화면 >

  <br> 태그는 줄바꿈이라는 시각적인 의미만 가지고 있기 때문에 뭔가를 감쌀 필요가 없다. 따라서 닫는 태그가 없다.

 

<p> 태그로 단락 만들기

<h1>HTML</h1>

<p><strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p><p> HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>

< p 태그로 단락 만들고 난 후의 출력 화면 >

  <p> 태그의 p는 Paragraph의 첫 번째 글자다. <br> 태그와는 다르게 <p> 태그는 열고 닫는 태그가 존재한다. 결과를 보면 <br> 태그를 썼을 때와 같지만 문단을 나눈다는 의미에서는 <p> 태그가 더 적절한 태그다. <br> 태그는 단지 줄바꿈을 위한 태그이기 때문이다.

  위와 같이 <p> 태그를 쓰면 <br> 태그를 세 번 썼을 때보다 단락 사이가 좁기 때문에 시각적으로 불편하게 보인다. 이때 CSS를 추가해주면 된다.

<h1>HTML</h1>

<p><strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p><p style="margin-top: 40px;"> HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>

< CSS를 이용하여 단락 사이를 넓힌 후의 출력 화면 >

  <p> 태그 안에 <p style="margin-top: 40px;">와 같이 CSS 코드를 추가해주면 단락 사이의 간격이 벌어진 것을 확인할 수 있다.

 

이미지 태그

<image> 태그를 이용하여 이미지 넣기

<h1>HTML</h1>

<p><strong>Hypertext Markup Language <u>(HTML)</u></strong> is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p>

<img src="image1.jpg" width="100%">

<p style="margin-top: 40px;"> HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>

< image 태그를 사용한 후의 출력 화면 >

  만약 사진 파일이 html 파일과 같은 경로에 있으면 이미지를 불러올 때 따로 경로를 써주지 않아도 된다. 경로가 다를 경우에는 이미지 파일의 경로를 src안에 적어줘야 한다.

  <image> 태그를 이용해서 이미지를 넣게되면 크기가 너무 커지기 때문에 width에 100% 값을 집어넣어 자동으로 웹 브라우저의 크기에 맞게 이미지의 크기를 바꿀 수 있다.