다시 시작하는 HTML😂
웹 페이지의 모든 것의 시작은 HTML에서 비롯된다.
웹 페이지에 보이는 모든 것들은 기승전 HTML 태그의 결과물이다.
웹 브라우저 환경의 베이스가 되는 HTML
문서의 구조와 정보 위계가 명확하게 보이는 아름다운 HTML 코드를 작성하자!
의미와 구조에 맞게 잘 작성함으로써(Semantic Markup) 검색 엔진 최적화(Search Engine Optimization: 브라우저가 콘텐츠 내의 정보의 중요도를 파악)를 높일 수 있다.
HTML을 Semantic하게 작성하기
-
div 태그를 남용하지 말 것
Division의 약자로 분할, 분배, 구획이란 뜻을 가진 div 태그 -
nav 태그는 보통 한 페이지 당 1개 사용
다른 페이지로 이동할 수 있는 링크를 모아둔 네비게이션 메뉴에만 제한해서 사용 -
브라우저는 정보의 위계질서(중요도)를 파악할 때 html을 markup 한대로 중요도를 알 수 있으며, 이 중요도가 검색 엔진에 반영된다.
의미있게 작성하기 위해 의식의 흐름이 아닌 ✨【내가 왜 이것을 사용해야하는지】사고와 논리 를 담은 코드를 작성하자.
가장 기초이자 본질인 HTML을 "의미있게" 작성해야 좋은 협업이 가능하다.
『신성한 HTML을 스타일로 더럽히는 나쁜 습관은 뿌리채 뽑아버리자』
태그
꺽쇠(<)에서 시작해서 꺽쇠(>)에서 끝나는 <태그>
태그의 추가적인 정보를 제공할 때 태그의 속성(attribute) 을 사용한다.
태그들 중 속성을 항상 명시해야 하는 특정 태그가 있다.(문법적인 규칙)
다양한 태그와 웹 표준에 맞는 올바른 사용법 익히기!
<p attr="value"></p>
<p lang="ko">
안녕하세요, 반갑습니다.
</p>제목(Heading)& 문단(Paragraph)
h1 태그는 콘텐츠의 핵심이 되는 내용(제목)에 대해서 사용한다.
<h1>제목</h1>
<p>문단</p>강조(Emphasis)
em과 strong 중 사용하고 싶은 것 사용해도 된다.
css를 이용해서 글자를 bold 처리가 가능하지만 html에서 강조 태그를 사용함으로써 브라우저에게 해당 내용을 강조하고 싶다는 메시지를 주는 것이다.
<em>강조</em>
<strong>강조</strong>
+ <br/> // 문단 줄바꿈 기능링크(Anchor)
현재 위치에서 다른 위치로 이동할 때 사용한다.
링크 태그는 반드시 명시해야할 속성(href; 어느 곳으로 이동할지 이동할 주소)이 있다.
<a href="주소" target="_blank">링크</a>href: hypertext(html문서, 웹페이지) reference(주소값)
target="_blank": 현재 창이 아니라 새로운 탭이 열려 이동하고 싶을 때 사용하는 속성
<href 주소값 표기 방법>
1) 웹 URL
2) 페이지 내 이동
3) 메일작성
<a href="mailto:메일주소"></a>4) 전화발신(모바일 사용 시)
<a href="tel:전화번호"></a>이미지(image)
<img src="이미지 파일 경로" alt="" />이미지 태그는 반드시 사용해야 할 속성(src, alt)이 있다.
src: source (경로 미지정인 경우 속성값으로 #을 넣음)
이미지 파일 경로는 직접 경로(ex. https://bit.ly/2mv)와 상대 경로(ex: ./images/cat.jpg ;workspace 안에 있는 이미지 경로) 모두 가능하다.
alt: alternative text(네트워크 속도가 느려 이미지가 보이지 않는 경우, 시각 장애인들이 사용하는 스크린리더를 통해 이미지를 설명할 대체 텍스트를 넣어 사용자 경험(UX) 개선)
리스트(List)
<ul>
<li>항목</li>
<a href=""></a>
<li>항목</li>
</ul>ul : unordered list(순서가 중요하지 않은 목록)
ol : ordered list(순서가 중요한 목록)
li : list item(항목)
ul과 ol의 직계 자식요소는 무조건! li만 가능하다.
링크 태그를 추가하고 싶다면 ul과 ol의 직계 자식이 아닌 li 태그의 자식요소로 작성해야 한다.
정의 리스트(Description List)
1) 용어를 정의할 때 사용(like 사전)
2) key-value로 정보를 제공할 때 사용({key: value} 형태)
↪ 'key는 value다' 형태의 정보를 전달(span 태그, div 태그 보다 풍부한 의미 전달)
<dl>
<dt>
<dfn>development</dfn>
</dt>
<dd>1. [U] 발달, 성장</dd>
<dd>2. [U, C] (신제품의) 개발, 신개발품</dd>
</dl>
<dl>
<div>
<dt>사과</dt>
<dd>빨가면 사과</dd>
</div>
<div>
<dt>바나나</dt>
<dd>바나나는 길어</dd>
</div>
</dl>dl : description list
dt : description term (용어)
dd : description data (dt에 대한 설명)
dfn : definition (용어, dl 태그 없이 용어 정의 가능)
div : division (dt와 dd를 하나로 묶어서 스타일링 해야할 때 그룹핑)
dl 태그의 자식요소는 오직 div, dt, dd 태그만 가능하다.
dt와 dd는 단독 사용이 불가하며 반드시 dl의 자식요소로 존재해야 한다.
dt와 dd는 두 개 이상 사용 가능하다.
dt를 사용해 용어를 정의했다면 그에 대한 설명 dd가 반드시 필요하다.
div 없이 dt, dd, dt, dd 나열하는 방식으로 작성 가능하다.
인용(Quotations)
브라우저에게 해당 인용글이 어디에서 온 내용인지 출처를 밝혀주는, 오로지 시맨틱을 위해서만 존재(cite 속성의 경우 사용자에게 보이지 않음)
blockquote : 문단이나 내용 전체가 인용문일 때 사용(q 태그보다 많이 사용/들여쓰기 효과)
q : 문장(문단) 내에 인용문이 일부 들어가는 경우 사용(쌍따옴표로 감싸지는 효과)
cite : 인용문의 출처
↪ 태그로 사용되는 경우 blockquote 태그나 q 태그 안에 존재해야 함
↪ 인용문이 있다면 cite 속성 사용하는 것을 권장한다고 함
// cite 속성(attribute)
<blockquote cite="출처 주소(url)">인용 내용
// cite 태그(blockquote 태그 안에 존재해야 함)
<cite>(text형태)인용 출처(저자)</cite>
</blockquote>div & span
아무런 의미가 없으나 CSS를 이용해 스타일링하는 경우 요소(element)를 묶어야 할 때 사용
