컨테이너 요소 & 전역 속성

컨테이너 태그

콘텐츠나 레이아웃에 영향을 주지 않고 여러 요소를 관리하기 쉽게 묶는 것

컨테이너 사용하는 경우

콘텐츠의 내용을 구분할 때
공통적인 스타일을 적용할 때

형태

<div></div> : 블록 레벨 컨테이너
<span></span> : 인라인 컨테이너

주제별로 나눠주기 단순 구분짓기로만 나누는 것이 아니다.


이렇게 블록이 나눠지는 것을 볼 수 있다.
근데 이미지가 왜 안 뜨는 걸까..코드를 잘못 기억하고 있는 건가

span도 사용해보았다

전역 속성

모든 HTML태그에서 공통으로 사용할 수 있는 속성

속성 추가하는 법

<태그명 속성명="속성값" 속성명="속성값">콘텐츠</태그명>

대표적 전역 속성

id : 요소에 고유한 이름 부여하는 식별자 역할 속성
class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성

식별자란 예를 들어 사람에게 이름이 있지만 구분하기 위한 주민등록번호도 있다. 이 주민등록번호를 식별자라고 한다.
태그명이 같은 요소들을 식별하기 위해 사용된다.

id와 class의 차이점
id는 태그당 하나씩 지정
class는 다중 지정, 중복 가능(모든 태그의 공통적으로 들어갈 수 있는 속성이고 id가 겹칠 수 있다.)

style : 요소에 적용할 CSS 스타일을 선언하는 속성
title : 요소의 추가 정보를 제공하는 텍스트 속성, 사용자에게 툴팁 제공

툴팁이란, 마우스 커서를 올렸을 때 나타나는 작은 말풍선

링크 표시하기

링크

anchor (a 태그)

인라인 요소
href 속성을 통해 다른 url로 연결할 수 있는 링크를 만든다.

target

링크를 열 때, 현재 탭에서 열리는 경우와 새 탭으로 열리는 경우가 있다. 이때 target 속성을 이용하자

현재 탭으로 열기

<a href = "링크" target = "_self"></a>

새 탭에서 열기

<a href = "링크" target = "_blank"></a>

언더바는 꼭 써줘야한다.
링크를 이동할 뿐만이 아니라 전화 걸기, 메일 보내기 등 여러 가지 가능하다.

텍스트뿐만 아니라 이미지 태그를 이용해서 이미지를 클릭해 탭을 열 수 있다.

target 속성을 추가해보자

유튜브는 현재 탭에서 열리고 티빙은 새 탭에서 열린 것을 볼 수 있다.

이동 외의 기능을 넣을 때는 전화는 tel / 메일은 mailto 를 이용하면 된다.