티스토리 뷰

웹/HTML, CSS

HTML 문법, 자주쓰는 태그

cll179 2017. 12. 31. 09:00

HTML 기본 문법 - 태그(tag)

- 태그(tag)로 감싸여진 부분이 어떤 역할을 하는지 알려주는 기능이다.

- <태그이름> </태그이름>

 

*사용 형식

<strong> HTML 기본 문법 </strong>

 

- '<>' 사이에 태그의 기능이나 역할을 알려주는 태그명이 들어간다.

- 태그로 감싸여진 부분이 해당 태그의 기능이 발휘되는 곳이다.

- 앞에 있는 태그를 '열리는 태그', 뒤에 있는 태그를 '닫히는 태그'라고 부른다. 닫히는 태그는 '/'로 구분한다.

 

 

자주 쓰는 태그(tag)들

<strong> </strong> : 글씨를 굵게 만든다.

<u></u> : 감싸여진 부분에 밑줄을 넣는다.

<h1~6> </h1~6> : 본문 제목을 나타내는 태그, 1~6단계가 존재한다. 
 제목, 머리말을 작성할 때 <h1~h6> 태그 쓴 결과가 검색환경에서 더 잘 나온다.


<br> : 줄바꿈(New line)을 한다. 닫히는 태그는 없다.


<p> </p> : 본문의 단락 설정해준다. 번거롭게 <br>태그를 많이 쓰는거 보다 더 간결하게 작성할 수 있어 용이하다. 
css문법을 이용하여 <p>태그 사용하기 : <p style = "margin-top:40px;"> : 여백과 여백사이 40픽셀 떨어트린 상태에서 단락 설정

 

<img src="coding.jpg(이미지 주소, 이름)" width = "100%"> : 이미지 넣기, 소스(src)는 같은 프로젝트 폴더 안에 있는 소스(coding.jpg)를 이용한다. width는 비율이다.

 

부모 자식 관계 태그

* 사용 형식

<parent>
 <child></child>
</parent>

 

- parent 태그에 대해서 child 태그는 자식태그, child 태그에 대해서 parent태그는 부모 태그라고 부른다.

- 부모 자식 관계의 태그를 꼭 서로 부모 자식관계로 사용할 필요는 없다.

- 경우에 따라 부모 태그만, 아니면 자식 태그만 이용할 수 도 있다.

 

- 그런데 몇몇 태그들은 부모 자식 관계처럼 고정된 관계인 태그가 존재한다.

- 아래 '목차'를 만드는 태그가 대표적이다.

 

<li></li> : 목차 만드는 태그이다.

<ul></ul> : 목차를 구분지을 때 사용하는 태그이다. 이 안에 감싸여진 부분에 있는 목차들이 서로 연관 목차이다. 다른 목차간에 <br>태그로 구분짓는 기능과 동일하다. <ul>태그는 <li>의 부모 태그이다.

<ol></ol> : 목차에 넘버링을 부여한다. <ul>태그와 동일하게 목차간 구분짓는 기능을 한다. 이 태그 역시 <li>의 부모 태그이다.

 

- ul은 unordered list의 약자이고, ol은 ordered list의 약자이다.

 

* <ul>, <ol>, <li> 태그 예제

<ul>
  <li>1.HTML</li>

  <li>2.CSS</li>

  <li>3.JavaScript</li>
</ul>

 

<ol>
  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>
</ol>

 

<title></title> : 웹페이지 제목부분에 해당하는 태그(탭에 이름으로 뜨는..)
<meta charset="utf-8"> : 문서를 utf-8로 읽어들려라고 설정하는 태그(한글 깨짐 현상을 해결하는데 사용)



- 아래 태그들은 출력에 직접적인 영향을 끼치는 태그는 아니지만 약속으로서 의미가 중요한 태그이기 때문에 꼭 사용해야한다.


<!doctype html> : html 문서라는 것을 나타낸다.
<html></html> : 헤드와 바디를 감싸는 체고위 태그이다. html 문서라는 것을 나타낸다.
<head></head> : 본문을 설명하는 부분을 나타내는데 사용하는 태그
<body></body> : 본문 부분을 나타내는데 사용하는 태그

<a></a> : 감싸여진 부분에 링크를 거는 태그이다.

<a href = "https://www.w3.org/TR/html51/"
  target = "_blank" title = "html5
  specification"> 원하는 부분 </a> : 태그로 감싸여진 부분에 링크를 걸어둔다. target = "_blank" 은 새탭 열기를 한다. 

 

*위 태그들을 사용한 예제

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
<!doctype html>
<html>
<head>
  <title>WEB1 - HTML</title>
  <meta charset="utf-8">
</head>
 
<body>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <ul>
    <li>egoing</li>
    <li>youbin</li>
  </ul>
  <h1>HTML이란 무엇인가?</h1>
  <a href = "https://www.w3.org/TR/html51/"
  target = "_blank" title = "html5
  specification">Hypertext Markup Language (HTML)</a> 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>
  <p style = "margin-top : 40px;">
  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>
</body>
<html>
 cs


* 결과

 

참고 사이트 : https://opentutorials.org/course/3084 

 

※

해당 게시물은 '생활코딩'에서 진행하는 코딩야학 3기 수강 내용을 정리한 내용입니다.


본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > HTML, CSS' 카테고리의 다른 글

[HTML,CSS]float 레이아웃  (0) 2018.05.22
[CSS]미디어 쿼리  (0) 2018.01.23
[CSS]그리드  (1) 2018.01.23
[CSS]박스 모델  (0) 2018.01.22
[HTML/CSS]CSS 문법, 선택자  (0) 2018.01.08
댓글