#8 컨테이너 그리고 전역 속성
컨데이너 태그
콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 태그이다.
ex) < div >< /div > : 블록 레벨 컨테이너, < span >< /span > : 인라인 컨테이너
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>영역을 구분해보자</title>
</head>
<body>
<h1>일단 문서를 만들자</h1>
<hr>
<div>
<h2><span>사진을</span>출력해보자</h2>
<img width="100" src="C:\Users\user\Desktop\새 폴더\HTML_기초\images\RGB.png" alt="RGB">
<p>RGB출력</p>
</div>
<div>
<h2>운동 열심히 하기</h2>
<p>건강을 위해 운동을 열심히 하자!</p>
</div>
</body>
</html>
영역이 구분되는것을 볼수있다.
전역속성
전역속성은 모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다.
대표적인 전역 속성들
- id : 요소에 고유한 이름을 부여하는 식별자 속성
- class : 요소를 그룹별로 묶을 수 있는 식별자 속성
- style : 요소에 적용할 CSS 스타일을 선언하는 속성
- title : 요소의 추가 정보를 제공하는 텍스트 속성
실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>영역을 구분해보자</title>
</head>
<body>
<h1>일단 문서를 만들자</h1>
<hr>
<div id="study">
<h2 class="title"><span>사진을</span>출력해보자</h2>
<img width="100" src="C:\Users\user\Desktop\새 폴더\HTML_기초\images\RGB.png" alt="RGB">
<p>RGB출력</p>
</div>
<div id="workout">
<h2 class="title">운동 열심히 하기</h2>
<p>건강을 위해 운동을 열심히 하자!</p>
</div>
</body>
</html>
위 코드에서 보면 div 태그에 id, h2 태그에 class를 부여했다.
#9 링크 만들기
링크
링크란 현재 문서에서 다른 문서로 이동할 수 있는 수단이다.
a태그
링크는 a 태그의 href속성을 통해 다른 페이지, 전화번호 등으로 이동할수 있는 링크를 만들수있다.
새탭에서 열기
새탭에서 열고 싶다면 target 속성을 사용하자.
target값이 _self는 현재탭에서 열기, _black는새탭에서 열기 이다.
실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<hr>
<a href="https://www.naver.com/" target="_self">
네이버로 갑시다!
</a>
<br>
<hr>
<a href="https://www.google.com/" target="_self">
구글로 갑시다!
</a>
<br>
<hr>
<a href="https://www.google.com/" target="_blank">
<img src="C:\Users\user\Desktop\새 폴더\HTML_기초\images\RGB.png" width="100" alt="RGB">
</a>
<hr>
<a href="tel:010-1234-1234">010-1234-1234</a>
<a href="mailto:example@naver.com">example@naver.com</a>
</body>
</html>
링크를 누르는 부분은 이미지도 가능하다.
'기타 > HTML, CSS 기초' 카테고리의 다른 글
| 기초 HTML(6) (1) | 2023.03.21 |
|---|---|
| 기초 HTML (5) (0) | 2023.03.21 |
| 기초 HTML (3) (0) | 2023.03.21 |
| 기초 HTML (2) (0) | 2023.03.21 |
| 기초 HTML (1) (0) | 2023.03.21 |
댓글