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> <ul> <li>
<dl> <dt> <dd>
<div>
<figure> <figcaption>
<p>
<pre>
<blockquote>
<main>
<hr>
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
태그를 쓰고싶어지는데,, 안좋은 습관이란걸 알았으니 앞으로는 다른 태그들을 고민해보고 최대한 안쓰도록 노력해야겠다.
Author And Source
이 문제에 관하여(Day2. 과제 - Grouping content), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimconut/Day2.-과제-Grouping-content저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)