HTML Tag
Sections
-
<article>
독립적으로 구분하거나 재사용 할 수 있는 구역 -
<section>
-사이트 내 연관 콘텐츠들을 묶는 영역
-헤딩요소와 같이 사용할 것을 권장
-
<h1> ... <h6>
-<h1>Tag는 페이지당 한번만 사용할 것을 권장(대제목)
-대제목 다음가는 카테고리 제목에는<h2>를 사용하고 순차적으로 작성하는것이 좋다.
-헤딩요소를 사용하면 다음 헤딩요소를 만날때까지 브라우저는 익명영역을 생성한다.
-<hgroup>을 사용해 대제목과 소제목으로 나눌 수 있다.
-heading maps 크롬 확장프로그램을 추가하여 사이트의 헤딩들을 정리해서 볼 수 있다. -
<aside>
-문서의 주요 흐름을 따라가지 않는, 간접적으로 관련있는 별개의 구획을 만들때 사용
-보통 각주 또는 광고 또는 양쪽사이드에 위치하는 요소를 구획지을때 사용 -
<footer>
-가장 가까운 구획의 정보를 나타냄
-작성자 정보, 저작권, 관련된 링크등의 내용을 담는 구획요소 -
<address>
-가장 가까운 부모<article>이나<body>요소의 연락처 정보를 나타냄
Grouping content
-
<ol>, <ul>, <li>
-<ol>은 ordered list로 순서가 있는 목록에 사용
-<ul>은 unordered list로 순사가 없는 목록에 사용
-<li>는 list item으로 ol, ul의 직계자손으로 사용하는게 올바르다.
-
<dl>, <dt>, <dd>
-사전처럼 어떤것을 정의할때 쓰이는 목록
-<dl>은 definition list 목록으로 사용
-<dt>는 정의할 용어 definition term
-<dd>는 용어를 설명 definition description
-dt,dd는 dl에 직계자손으로 쓰이지만 예외적으로 div에 넣어 디자인하여 사용할 수 있다 -
<div>
-의미가없는 Tag
-디자인적으로 요소들을 묶을 때 사용
-시멘틱 테그를 사용할 수 없을 때 최후의 수단으로 사용할 것 -
<figure>, <figcaption>
-요소와 캡션을 묶어주는 요소 -
<p>
-완결된 단락을 표현할때 사용하는 태그
-<p>안에<p>를 넣어 사용하지 않음
-줄 바꿈 용도로 사용하지 않음(줄바꿈은<br>)
-
<pre>
-HTML에 작성하는 내용 그대로 화면 표현
-주로 컴퓨터 코드를 표현할 때 사용
-
<blockquote>
-인용블록
-<q>는 인용구
-<cite>는 출처를 표기할 때 사용하는 Tag
-
<main>
-문서의 주요 콘텐츠를 나타내는 블록
-핵심주제, 문서에들어가는 유일한 내용을 담음
-IE에서는 지원하지 않는 비교적 최근에 등장한 요소로 사용 시 주의
-
<hr>
-단락을 구분할 때 사용함으로<p>Tag 내 사용은 웹표준에 어긋남
-HTML Living Standard에 들어서면서 의미가 부여된 Tag -
Entity
-&로 시작하여 ; 로 끝나는 문자열들
-HTML 예약어를 대체하기 위해 사용
-ex)&= &,<= <,>= >
프론트엔드 개발자가 하는일에 관하여 :
- 크로스브라우징
- 웹 접근성
- 성능측정
- 웹렌더링
- 웹표준 준수
- 검색엔진 최적화(SEO)
- 레거시 브라우저 대응
- R&D 미래기술에 대한 대비
- 디자이너와 기획자, 백엔드개발자 사이에서 조율
등등 다양한 능력이 필요하다는걸 깨달았다!
