컨테이너 태그
- 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그
- 콘텐츠 내용 구분 / 공통적인 스타일 적용 등에 사용
- <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 src="images/WIN_20220602_22_40_53_Pro.jpg"
width="300"
alt="공부 중" />
<p>공부를 열심히 하기로 했다!</p>
</div>
<hr>
<div>
<h2><span>운동</span> 열심히 하기</h2>
<p>건강을 위해 운동을 열심히 하자!</p>
</div>
</body>
</html>- 콘텐츠 내용이 크게 2종류로 구분됨 → 컨테이너 태그를 통해 분류
- 모두 블록 레벨로 작성되어 있으므로 (<h2>, <p>) <div>태그 사용
- 브라우저에는 변동사항이 없지만 개발자 도구에서 표시됨
- 커서를 갖다 대면 나누어진 블록 확인 가능
- <span> 태그 사용
- 콘텐츠에 사용하면 그 글씨만 따로 표시됨 (개발자 도구에서 확인)
전역 속성
- 모든 html 태그에서 공통으로 사용할 수 있는 속성
- 태그의 부가적인 기능 정의
- 시작 태그의 내부에 정의
- 속성의 개수는 제한 x
- <태그명 속성명="속성값" 속성명="속성값">콘텐츠</태그명>
대표적인 전역 속성
- 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 src="images/WIN_20220602_22_40_53_Pro.jpg"
width="300" title="공부 중!"
alt="공부 중" />
<p>공부를 열심히 하기로 했다!</p>
</div>
<hr>
<div id="workout">
<h2 class="title"><span>운동</span> 열심히 하기</h2>
<p>건강을 위해 운동을 열심히 하자!</p>
</div>
</body>
</html>- 각각의 div(콘테이너)에 id 지정
- id 지정하지 않았을 때는 div라고 하면 둘 다 해당되었지만
- id가 study인 div / id가 workout인 div로 구별 가능
- 제목 h 태그에 class 지정
- 같은 그룹으로 묶음
- class가 title인 것! → h2 라인 두 개 해당
- img 태그에 title 속성 지정
- 이미지에 커서를 갖다 대면 "공부 중!"이라는 툴팁이 보여짐
≫ 속성에 지정하는 값들은 프로그래머가 직접 알맞게 설정하는 것
'front-end' 카테고리의 다른 글
| [HTML] 목록 표시하기 (0) | 2024.12.01 |
|---|---|
| [HTML] 링크 만들기 (0) | 2024.12.01 |
| [HTML] 이미지 표시하기 (0) | 2024.12.01 |
| [HTML] 블록 태그와 인라인 태그 (0) | 2024.12.01 |
| [HTML] 코드 기초 문법 / 텍스트 태그 (0) | 2024.12.01 |