멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 6 (하이퍼링크, 섹션 관련 요소, 컨테이너 요소)

 

목차

하이퍼 링크
목록
섹션과 메인 요소
컨테이너 요소
오늘 하루를 돌아보며

 

 

하이퍼링크

하이퍼링크는 <a>(anchor) 태그를 사용한다. 페이지 내에서 이동하거나 다른 페이지로 이동할 수 있다. a 태그로 텍스트를 감싸면 텍스트에 링크를 달고, 이미지를 감싸면 이미지에 링크를 단다.

href 속성을 사용해서 링크의 목적지를 설정한다.

<!-- 텍스트 링크 -->
<a href="링크/경로">링크 텍스트</a>

<!-- 이미지 링크 -->
<a href="링크/경로">
  <img src="경로" alt="" />
</a>

 

href 속성에 넣을 수 있는 경로들은 다음과 같다.

• http(s) = Hyper Text Transfer Protocol (Security). 외부 서비스로 연결할 때는 http(s)를 사용하고, 내부 서비스로 연결할 때는 상대경로를 사용한다.
• /... = 절대 경로
• (./)... = 상대 경로
• mailto:email@mail.com = 메일 클라이언트(Outlook/mail)를 구동하고 받는 사람 입력창에 이메일이 자동 입력되어 있다. 하지만 국내에서는 메일 클라이언트를 잘 사용하지 않아서 mailto를 사용하지 않는다. 이메일 주소 뒤에 '?subject=텍스트'를 입력하면 이메일 제목을 미리 설정할 수 있다.
• tel:+ = 전화를 걸 수 있는 앱을 구동한다.
• *.pdf = 웹 브라우저가 뷰어 역할을 담당한다면 파일이 웹 브라우저에 바로 열린다. 그렇지 않다면 다운로드한다. download 속성에 값을 주지 않고 사용하면 링크로 이동하는 대신 다운로드할지 물어본다. 속성에 값을 명시하면 해당 이름으로 다운로드한다.
• #top = 맨 위로 올라가는 링크를 만든다.
• #<id> = id는 전역 속성으로, 테그의 id(주민번호)를 할당하는 속성이다. href에서 id를 할당한 속성으로 바로 이동할 수 있는 하이퍼링크를 만든다.

id와 class는 전역 속성(모든 요소에서 사용할 수 있는 속성)이다. id는 주민등록번호처럼 하나의 html 페이지에 한 번만 사용할 수 있고, class는 이름(동명이인)처럼 여러 요소에 여러 번 사용할 수 있다.

 

 

target 속성은 특정 탭에 링크를 열어준다. 기본값은 현재 탭이다. target 속성으로 명시한 탭이 존재하지 않으면, 새로운 탭에 열면서 탭 이름을 명시한 대로 만든다. 예를 들어, "_blank"가 아닌 "blank"로 명시하면 탭의 이름을 'blank'로 할당한다. 다음에 또 "blank"로 쓰면 이미 열려있는 'blank' 창에 링크를 연다.

target 속성이 가질 수 있는 값은 다음과 같다.

• _blank: 새탭
• _self: 현재탭. 기본값
• _parent, _top

rel = "noopenner noreferrer" 보안 관련 속성이다.

name 속성은 a 태그에서만 사용할 수 있고, id와 같은 역할을 수행한다.

title 속성은 전역 속성이다. 커서를 올렸을 때 툴팁을 보여준다. 주로 a 태그에서 목적지에 대한 설명을 위해 사용한다.

 

목록

목록은 순차 목록과 비순차 목록이 있다. 순차 목록은 ul(unordered list) 요소를 사용하고, 비순차 목록은 ol(ordered list) 요소를 사용한다. 목록들은 li(list item) 요소로 나열한다. ul과 ol의 자식 요소로는 li만 허용한다.

type 속성을 사용하면 목록을 나열할 때 앞에 붙는 기호를 변경할 수 있다.

<!-- 비순차 목록 -->
<!-- 순서가 상관 없는 독립된 아이템을 포함한다. -->
<ul type="circle">
  <li>아이템1</li>
  <li>아이템2</li>
  <li>아이템3</li>
</ul>

<!-- 가로줄을 만드는 태그 -->
<hr />

<!-- 순차 목록 -->
<!-- 순서가 중요한 독립된 아이템을 포함한다. -->
<ol>
  <li>첫 번째 목록</li>
  <li>두 번째 목록</li>
  <li>세 번째 목록</li>
</ol>

 

 

정의형 목록은 dl(definition list) 요소를 사용한다. 용어는 dt(definition term) 요소를, 설명은 dd(definition description) 요소를 사용하며 dt와 dd가 쌍으로 자식 요소로 들어와 있어야 한다.

 

섹션과 메인 요소

문서나 사이트, 애플리케이션의 각 섹션과 메인 영역을 구조화하기 위한 요소다.

• header - 머릿말. 페이지 상단에 있다. 로고, 메뉴바(nav), 로그인 정보 등이 들어갈 수 있다.
• nav - navigation. header 안에 포함시키기도 한다. 메뉴 링크
• main - 주요 콘텐츠 블록. html 문서에서 1번 밖에 못 쓴다.
  • section - 안 써도 된다. 1장 1절, 2절 등 장이나 절로 구분할 수 있는 정보
    • header - section 안에 header나 footer가 들어갈 수 있다.
    • footer
  • article - 안 써도 된다. RSS 피드. 독립된 완결된 정보를 명시할 때 사용한다.
    • header - article 안에 header나 footer가 들어갈 수 있다.
    • footer
• aside - 부가 정보 콘텐츠. 사이드바.
• footer - 바닥글. 페이지 최하단에 있다. 사이트를 마무리하는 정보(copyright 관련, 회사 정보 등)가 들어갈 수 있다.

 

위 태그들을 사용하지 않고 div를 사용해도 보기에는 똑같다. 만들기 편해서 div를 많이 사용하지만, 나중에 어디가 어딘지 모르는 기술 부채가 생길 수 있다.

 

컨테이너 요소 / 그룹화 요소

의미 없는 요소로 묶어만 놓으려고 사용한다.

 

컨테이너 요소는 div와 span이 있다. div는 block 레벨이고, span은 inline 레벨이다. block 레벨은 한 줄을 통째로 차지하고, inline 레벨은 줄 안에 흐름처럼 이어진다.

예를 들어, Google 로고에 글자별로 색깔을 넣으려면 글자를 하나씩 나눠야 한다. 글자 하나에 특별한 의미가 없으므로 div와 span을 사용할 수 있다.

<div>
  <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</div>

 

이때 span 사이에 엔터를 눌러도 한 줄로 출력된다. 하지만 엔터를 누르면 공백 문자가 들어가서 G o o g l e 이렇게 출력된다. 줄바꿈을 하면 anonimus inline 상자가 생기니 주의하자.

 

오늘 하루를 돌아보며

오늘 가장 기억에 남는 것은 시맨틱 마크업이다.

시맨틱 마크업은 인간도 기계도 의미를 이해할 수 있는 마크업이다. 텍스트 덩어리가 어떤 의미를 갖고 있는지 고민해서 의미에 맞게 마크업해야 한다. div 요소를 의미 없이 나열하기보다 구조적으로 유지보수가 쉽도록, 접근하기 쉽도록 어떤 요소를 사용할지 고민하고 사용해야 한다. 눈에 보이는 결과만이 아니라 다양한 환경을 고려하는 시맨틱 마크업이 중요하다.