## 컨테이너 태그 - 한 줄 요약 : 코드 상에서 그룹으로 묶어준다.
-컨텐츠나 레이아웃에 아무런 형향을 주지않고 다른 요소 여럿을 묶어
관리하기 편하게 만드는 역할을 하는 태그를 컨테이너 태그라고 한다.
-컨텐츠를 구분하거나 공통적인 스타일을 적용하고자 할때 개발자는 컨테이너를 사용한다.
-블럭 레벨(block-level) 요소
: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
-인라인 레벨(inline-level) 요소
: 자기에게 필요한 만큼의 공간만 차지한다.
-<div></div> : 블럭 레벨 컨테이너
-<span></span> : 인라인 레벨 컨테이너
-<div></div> : 블럭 레벨 컨테이너 사용
<!DOCTYPE html>
<html>
<head><meta charset="UTF=8"></head>
<body>
<div>
<h1>HTML을 공부합니다.</h1>
<p>오늘은 HTML을 공부하는 첫날입니다.</p>
<img src="/image/kakao.png" alt="카카오톡 사진" width="200" height="200">
</div>
<div>
<h1>오늘 저녁은 뭘먹나?</h1>
<p>오늘은 열심히 공부했으니 맛집에가서 저녁을 먹읍시다.</p>
<p>나는 맛집을 모르니 친구한테 물어봐야겠다.</p>
</div>
</body>
</html>
하나의 그룹으로 묶여있는 것을 볼 수 있다.
div로 똑같은 이름으로 묶어놓으면, 그룹째로 속성을 넣어줄 때 전부다 속성이 들어가버린다.
그래서 div는 따로 이름을 정해준다.
-<span></span> : 인라인 레벨 컨테이너
<p>누구든지 체포 또는 구속을 당한 때에는 <span>적부의 심사를 법원에 청구할 권리를 가진다.
</span>국가는 전통문화의 계승·발전과 민족문화의 창달에 노력하여야 한다.</p>
## 전역 속성(Global attributes)
-전역속성은 모든 HTML 태그에서 공통을 사용하는 태그이다.
-속성이란 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.
-속성은 시작 태그의 내부에 정의한다.
-속성의 개수에는 제한이 없다.
<태그명 property="value" property="value">컨텐츠</태그명>
-대표적인 전역 속성
# id : 요소에 고유한 이름을 부여하는 식별자 역할 속성
-각 요소를 구분하는 식별자 역할을 해준다.(id의 값은 중복될 수 없다)
-CSS에서 식별자를 지정한 후에, 특정 식별자에게만 값을 지정해줄 수 있다.
-id와 변수명은 내가 잘 알아볼 수 있도록 해당 항목에 알맞게 구분지어서 정하자.
<div id="study">
<h1>HTML을 공부합니다.</h1>
<p>오늘은 HTML을 공부하는 첫날입니다.</p>
</div>
# class : 요소를 그룹별로 묶을수 있는 식별자 역할 속성
-div를 다른 div와 묶을 수 있으며, class는 중복이 가능하다.
<div id="study" class="blog">
<h1>HTML을 공부합니다.</h1>
<p>오늘은 HTML을 공부하는 첫날입니다.</p>
</div>
<div id="eat" class="blog">
<h1>오늘 저녁은 뭘먹나?</h1>
</div> # style : 요소에 적용할 CSS 스타일을 선언하는 속성
-지금은 pass
# title : 요소의 추가 정보를 제공하는 텍스트 속성 (사용자에게 툴팁-마우스에 이미지를 올려놓으면 뜨는 텍스트을 제공)
-head에 들어가는 <title> 태그와는 상관이 없다. (제목 만드는 태그랑은 상관 없음)
-텍스트의 속성을 의미한다.
<img src="/image/kakao.png" alt="카카오톡 사진" width="200" height="200" title="카카오톡"/>
<p>나는 <strong title="맛집이란 맛있는 밥집을 의미한다.">맛집</strong>을 모르니 친구한테 물어봐야겠다.</p>
'HTML↗' 카테고리의 다른 글
| HTML 목록 표시하기 (1) | 2024.04.05 |
|---|---|
| HTML 링크(link) <a>태그 (0) | 2024.04.05 |
| HTML 이미지 표시하기 (0) | 2024.04.04 |
| HTML 텍스트 표시 방법 (+한 줄 정리) (1) | 2024.04.04 |
| HTML 기본 구조 (0) | 2024.04.04 |