[day-21] 다양한 태그

Joohyung Park·2024년 1월 26일
html
0

[모두연] 오름캠프

목록 보기
28/95
post-thumbnail

div & span

div

  • 콘텐츠 분할 요소이며 여러 태그들을 그룹핑하기 위한 태그
  • 블록 요소
  • CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않는다.

강사님은 div 태그 사용을 스타일 적용 용도로만 사용할 것을 권장하였다.

<body>

<h1>HTML DIV Example</h1>

Lorem Ipsum <div>I am a div</div> dolor sit amet.

<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>

</body>

span

  • 인라인 요소
  • CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않는다.
<html>
<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body>
</html>

Sections

  • 소개 및 탐색에 도움을 준다.
  • 회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함 될 수 있다.
  • head 태그와 혼동 주의, 실제 웹에서 보이는 부분
  • 헤더를 중첩 사용하거나 헤더 안에 푸터를 사용할 수 없다.

여기서 푸터는 웹 최하단에 해당 웹사이트를 작성한 작성자, 저작권 정보 등의 정보가 적혀있는 태그를 뜻함

<body>

<article>
  <header>
    <h1>A heading here</h1>
    <p>Posted by John Doe</p>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

</body>

  • navigation bar
  • 메뉴, 목차, 브레드크럼으로 사용
<body>

<h1>The nav element</h1>

<p>The nav element defines a set of navigation links:</p>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

</body>

main

  • body의 주요 콘텐츠를 나타낸다.
  • 웹페이지에서 한 번만 사용할 수 있다.
  • 사이드바, 탐색 링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해서는 안된다.
    (검색 폼이 주요 기능이라면 예외)
<body>

<h1>The main element</h1>

<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

</body>

article

  • 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄
    • 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행
    • 아티클 영역을 제거해도 페이지는 정상적으로 돌아감
  • 아티클이 대표적으로 사용되는 곳은 뉴스 홈페이지
    • 다양한 기사들이 한 페이지에 담겨있지만, 이 기사들은 각각 독립적으로 사용된다.
    • 시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영된다.
  • 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등
  • 제목 요소를 자식으로 포함하여야 한다.
<body>

<h1>The article element</h1>

<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

</body>

section

  • 제목 요소를 자식으로 포함하여야 한다!

    이쯤되면 article과 section을 언제 써야할지 헷갈리는데 일단 독립적으로 사용한다면 article을 사용하고 웹의 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미의 요소가 없을 때 사용하라고 한다.

    단순 스타일링은 div 요소를 쓰자.

<body>

<h1>The section element</h1>

<section>
  <h2>WWF History</h2>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h2>WWF's Symbol</h2>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

</body>

Contents

h1 ~ h6

  • Heading : 제목
  • 목차라고 생각하기
  • 순서대로 작성해야 한다.
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p><b>Tip:</b> Use h1 to h6 elements only for headings. Do not use them just to make text bold or big. Use other tags for that.</p>

</body>

a

  • 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.
<body>

<h1>The a element</h1>

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

</body>

href 속성과 id를 사용하여 페이지 내에서 이동하는 해시 링크를 만들 수 있다.

p

  • paragraph의 약어로 하나의 문단을 나타낸다.
  • HTML에서 문단은 이미지나 입력 폼 등 서로 관련 있는 콘텐츠는 무엇이나 될 수 있다.
  • 블록 요소
<body>

<h1>The p element</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>

strong

  • 기본적으로 굵은 글꼴이 적용
  • 중대하거나 긴급한 콘텐츠를 나타낸다. 단어 또는 문장일 수 있다.
<body>

<h1>The strong element</h1>

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

</body>

br

  • break(line break)의 약어로 줄을 나눈다는 뜻
  • HTML은 엔터 값을 인식하지 않기 때문에 HTML 문서에서 여러 줄로 되어 있어도 실제 화면에서는 한 줄로 보인다!
<body>

<h1>The br element</h1>

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

</body>

hr

  • 이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 사용한다.
  • 단락을 구분할 때 사용하므로 <p> 태그 내의 사용은 하지 않는다!
<body>

<h1>The Main Languages of the Web</h1>

<p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>

<hr>

<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>

</body>

code

  • 짧은 코드 조각(한 줄)을 나타날 때 사용한다.
  • 텍스트의 고정 폭 글꼴(monospace font: 모든 문자가 동일한 너비를 가지는 글꼴)을 사용한다.
<body>

<h1>The code element</h1>

<p>The HTML <code>button</code> tag defines a clickable button.</p>

<p>The CSS <code>background-color</code> property defines the background color of an element.</p>

</body>

pre

  • HTML에 작성한 내용 그대로를 표현한다.
  • 텍스트는 고정 폭 글꼴을 사용하고, 공백을 그대로 유지
  • 공백이 필요한 코드, 혹은 텍스트를 사용해 그림을 그릴 때 사용
<body>

<h1>The pre element</h1>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

</body>

목록 태그

ol

  • ordered list의 약자, 순차적 목록
  • 정렬된, 순서가 있는 보통 숫자 목록
  • type
<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>

여기서 type은 항목을 셀 때 사용할 카운터 유형이다.

  • start
<body>

<h1>The ol element</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>

start는 아라비아 숫자로 세고 시작할 숫자를 지정한다.

ul

  • unordered list의 약자, 비순차적 목록
  • 정렬되지 않은, 보통 불릿으로 표현되는 목록을 의미
  • 순서가 중요하지 않는 목록에 적용
<body>

<h1>The ul element</h1>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>

li

  • 목록의 항목을 나타낸다.
  • 단독으로 사용할 수 없다. ol, ul 의 자식요소로만 사용할 수 있다!
  • ol,ul의 자식요소로는 li만 사용할 수 있다!
<body>

<h1>The ol and ul elements</h1>

<p>The ol element defines an ordered list:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>The ul element defines an unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>

Media

img

  • 문서에 이미지를 삽입한는 코드
<body>

<h1>The img element</h1>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

</body>

여기서 src는 이미지의 경로이고, alt는 이미지에 대한 설명 부분이다. alt는 빈값이더라도 필수로 들어가야 한다.

추가적으로 이미지는 문서에 추가하면 하단에 빈 공간이 생기는데 이를 css로 없애줄 수 있다.

img{
	vertical-align:top;
}

라는 초기값을 넣어두자.

피드백

백엔드 개발자도 프론트엔드를 알아야 하기 때문에 맛만 보는 느낌으로 배우고 있다. 옛날 얘기, 비하인드 스토리 이런거는 재밌는데 실습을 안하고 이론만 계속 보니까 재미없다. 다음주부터는 실습도 한다고 하니까 기대해 봐야겠다.

출처

그림 출처

profile
Joohyung Park
익숙해지기 위해 기록합니다
이전 포스트

[day-21] HTML 기본

다음 포스트

[day-22] form

0개의 댓글