Day2. 과제 - Grouping content

Grouping content

  • HTML태그 중 Grouping content에 대해 배운 내용 정리
<ol> <ul> <li>
<dl> <dt> <dd>
<div>
<figure> <figcaption>
<p>
<pre>
<blockquote>
<main>
<hr>

ol, ul, li 태그

ol은 ordered list, ul은 unordered list이다.
순서가 중요한 카테고리나 리스트를 코딩할 때는 태그에 의미에 맞게 ol태그를 사용하고,
순서가 중요하지 않거나 메뉴 바 같은 것을 만들 때는 ul 태그를 사용한다.

<ol>
	<li>ant</li>
    <li>bee</li>
    <li>cat</li>
<ol>

<ul>
	<li>Coffee</li>
    <li>Tea</li>
    <li>sandwiche</li>
<ul>

<ol> <ul>의 자식요소는 무조건 <li>만 가능하다!
<li>는 각 항목들을 나열하는 태그이다.


dl, dt, dd 태그

목록을 정의할 때 사용되는 태그이다.
사전 처럼 어떠한 것을 정의할 때 쓰이는 태그.

<dl>
	<dt>개발</dt>
    <dd>
    	개발(開發, 영어: development)은 무엇인가를 보다 쓸모 있거나 향상된 상태로 변화시키는 행위이다.
        지적 능력의 향상에 대해서는 개발과 계발(啓發)을 모두 사용할 수 있다.
    </dd>
</dl>

<dl>: description list 용어를 정리할 때
<dt>: description term => key(단어)
<dd>:description data => value(설명)

<dl>태그 사용시 자식요소로 <dt>,<dd>태그가 꼭 있어야 한다.


div 태그

아무 의미가 없다.
아무리 생각해도 마땅한 태그가 떠오르지 않을 때 사용. CSS를 사용한 스타일링 목적으로 사용된다.

<div>
	<p>
    	hello world 
    </p>
</div>

figure, figcaption 태그

캡션이 있는 이미지를 만들고 싶을 때 사용한다.
이러한 컨텐츠의 경우 이미지와 캡션이 연결될 수 있도록 사용할 수 있는 태그이다.

<figure>
    <img src="눈내리는도시.jpeg" alt="" width="100px" height="100px">
    <figcaption>
        눈내리는 도시 
    </figcaption>
</figure>

p 태그

문단 태그.
하나의 완결된 문단을 의미한다. <p>안에 자식요소로 또 <p>를 넣을 수 없다.
줄바꿈의 용도로 사용하면 안됨

<p>
	Penguins are a group of aquatic flightless birds. 
    They live almost exclusively in the southern hemisphere: only one species, 
    the Galápagos penguin, is found north of the Equator. 
    Highly adapted for life in the water, penguins have countershaded dark 
    and white plumage and flippers for swimming.
</p>

+ 줄바꿈 용도로 사용할 수 있는 태그는 <br/>이 있는데 남용하면 안된다.


pre 태그

preformatted text, HTML문서 상에서도 코드 형식으로 작성하고 싶을 때 사용하는 태그.

<pre>
	p {
    	font-size: 40px;
        color: #000000;
      }
</pre>
	p {
    	font-size: 40px;
        color: #000000;
      }

비교를 위해 같은 내용을 <p>태그 안에 넣어보겠다.

<p>
		p {
    	font-size: 40px;
        color: #000000;
      }
</p>

p { font-size: 40px; color: #000000; }

!! 쉽게 비교가 가능하다.


blockquote 태그

인용을 할 때 사용하는 태그이다.
전체 내용을 인용하고 싶을 때 사용한다.

<q>태그도 인용 시 사용되는데, 문단 내에서 일부를 인용할 때 사용된다.
신기한 점은 자연스레 ""가 생긴다.

<blockquote>
    <p>제발 그만해.. 이러다가 다~~ 죽어!</p>
    <cite>오징어게임 오일남</cite>
</blockquote>

<p><q>제발 그만해.. 이러다 다~~ 죽어!</q>라고 오일남이 소리쳤습니다.</p>

제발 그만해.. 이러다가 다~~ 죽어!

오징어게임 오일남

제발 그만해.. 이러다 다~~ 죽어!라고 오일남이 소리쳤습니다.


Main 태그

HTML의 <main>태그는 문서의 주요 콘텐츠를 나타낸다.
하나의 HTML문서에는 단 한개의 <main>태그만 사용 가능하다.
<main>태그 안에 들어가는 내용은 문서의 유일한 내용이어야 한다.


hr 태그

원래 가로줄을 표현하기 위해 사용했으나 HTML5에 오면서 의미가 생긴요소.
단락을 구분할 때 사용한다.
이 태그를 직접 쓰기보단, <p>의 border-bottom을 이용하고, margin을 주어서
<hr>태그 사용 효과와 같은 효과를 얻을 수 있다.


img 태그

html문서에 이미지를 삽입하고 싶을 때 사용할 수 있는 코드이다.

    <img src="눈내리는도시.jpeg" alt="눈내리는 도시 풍경">

alt는 인터넷 연결이 안될 경우 이미지의 설명을 보여줌으로써 사용자가 이미지를 직접 보지 않더라도 어떤 이미지인지 알 수 있게 해주는 속성이다.


오늘 태그 수업을 들으면서 잘못된 태그 사용법을 고수해왔다는 것을 알게되었다.
예를 들어 span태그를 남발하는 것은 안좋다는 강사님의 말을 듣고, 나는 이상하다 생각했다.
주요 단락, 제목, 등은 <p>, <h>태그를 사용하고, 주변 큰 의미없는 내용들, 혹은 설명들은 주로 <span>태그를 사용해 마크업을 해왔었다. <div>태그는 남발하면 안좋다는 소리를 너무 많이 들어와서 쓰는데 조심하고 다른 태그들을 고민하고 그랬는데, span태그는 그동안 너무 잘써왔던 것 같다..

당장 고치려니 어색하고 자꾸 span태그를 쓰고싶어지는데,, 안좋은 습관이란걸 알았으니 앞으로는 다른 태그들을 고민해보고 최대한 안쓰도록 노력해야겠다.

좋은 웹페이지 즐겨찾기