#8 컨테이너 그리고 전역 속성
💻 코드
🔎 결과
영역을 구분해보자
컨테이너 태그
- 컨테이너 : 콘텐츠나 레이아웃에 아무런 영향을 주지 않고 여러 요소를 묶어 관리가 편하게 하는 역할
콘텐츠 내용 구분, 공통 스타일 지정등에 사용
▶ 컨테이너 역할 담당 태그
<div></div> : 블록 레벨 컨테이너
<span></span> : 인라인 컨테이너▷ 보기에는 달라진게 없어 보여도 개발자 도구에서 확인 가능
▷ 토글 선택 시 영역 지정
전역 속성
- 전역 속성 : 모든 HTML 태그에서 공통으로 사용할 수 있는 속성
▷ 속성 : 태그의 부가적인 기능을 정의하는 것, 시작 태그의 내부에 정의
▷ 속성의 개수에는 제한 X
▶ 속성 추가 방법 : <태그명 속성명="속성값" 속성명="속성값">콘텐츠</태그명>
▶ 대표적인 전역 속성들
- id : 요소에 고유한 이름을 부여 - 식별자 역할 속성(중복 불가능)
- class : 요소를 그룹 별로 묶기 - 식별자 역할 속성(다중 지정 및 중복 가능)
- style : 요소에 적용할 CSS 스타일을 선언
- title : 요소의 추가 정보를 제공하는 텍스트 속성 - 사용자에게 툴팁 제공
📝 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTP-8">
<title>영역을 구분해보자</title>
</head>
<body>
<h1>일단 문서를 만들자</h1>
<hr><!--이는 표면적으로는 구분 but 코드적 구분은 X-->
<!--공부 관련-->
<div id="study"><!--표면적 구분 가능-->
<h2 class="title"><span>공부</span> 다짐하기</h2>
<img src="images/study.jpg"
wight="100" title="자까의 다짐!"
alt="자까" />
<p>자까는 공부를 해보고자 한다! !</p>
</div>
<hr>
<!--운동 관련-->
<div id="workout">
<h2 class="title"><span>운동</span> 열심히 하기</h2>
<p>건강을 위해 운동을 열심히 하자 ! !</p>
</div>
</body>
</html>#9 링크 만들기
💻 코드
🔎 결과
링크
링크 : 현재 문서에서 다른 문서로 이동할 수 있는 수단
- a(anchor) 태그 사용 : href 속성을 통해 다른 url로 연결할 수 있는 링크 생성
- 인라인 요소
▶ 기본적으로 현재 탭에서 열기
▶ a 태그의 target 속성을 "self" "blank"로 변경시 새 탭에서 열기 가능
▶ tel 또는 mailto를 통해 전화, 메일 보내기 가능
📝 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTP-8">
<title>링크 만들기</title>
</head>
<body>
<!--현재 페이지로 열기-->
<a href="https://www.naver.com/" targer="_self">
네이버로 갑시다!
</a>
<br>
<!--다른 페이지로 열기-->
<a href="https://www.google.com/" target="_blank">
구글로 갑시다!
</a>
<br><br>
<!--전화 걸기, 메일 보내기-->
<a href="tel:010-1234-5678">010-1234-5678</a>
<br>
<a href="mailto:ghdtj00@korea.ac.kr">
ghdtj00@korea.ac.kr
</a>
</body>
</html>
안녕하세용