HTML5와 시맨틱 태그 2

HTML5와 시맨틱 태그 2

1. <iframe> 태그 - 외부 문서 삽입하기

• 웹 문서 안에 다른 웹 문서를 가져와 표시하는 것을 인라인 프레임(inline frame)이라고 하고 인라인 프레임을 삽입하는 태그가 <iframe> 태그입니다.

 

기본형 : <ifrmae src="삽입할 문서 주소" [속성="속성 값]"> </iframe>

 

<iframe> 태그에서 사용할 수 있는 주요 속성

속 성	설 명
width	인라인 프레임의 너비입니다. 픽셀이나 백분율 값으로 표시합니다.
height	인라인 프레임의 높이입니다. 픽셀이나 백분율 값으로 표시합니다.
name	인라인 프레임의 이름입니다.
src	프레임에 표시할 문서의 주소를 지정합니다.
seamless	프레임의 테두리를 없애 마치 본문의 일부처럼 보이도록 만들며 속성 값 없이 seamless라고 쓰면 됩니다.

 

<div class="exam1">
    <iframe src="https://mine002.tistory.com/" width="100%" height="500"></iframe>
</div>

2. <address> 태그 - 사이트 제작자 정보, 연락처 정보 나타내기

• <address> 태그는 주로 <footer> 태그 안에 사용되는데 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는데 사용됩니다.
• 웹 사이트와 관련된 우편 주소도 <address> 태그 안에 포함시킵니다. 하지만 단순히 우편 주소를 표기할 용도라면 <address> 태그가 아닌 <p> 태그를 이용해 표시합니다.

 

서울시 강남구 서초동 00번지 xx 컴퍼니

xxcompany@naver.com

Copyright 2020. xxCompany All rights reserved.

 

<div class="exam2" style="width: 500px; height: 150px; border: 2px solid pink; padding: 20px;">
    <footer>
        <address style="font-style: normal;">
            <p>서울시 강남구 서초동 00번지 xx 컴퍼니</p>
            <p>xxcompany@naver.com</p>
        </address>
        <p>Copyright 2020. xxCompany All rights reserved.</p>
    </footer>
</div>

 

3. <div> 태그는 언제 사용할까요?

• HTML5에서도 <div>태그는 중요하게 사용됩니다.
• HTML5에서는 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉 콘텐츠에 CSS를 적용할 때 <div> 태그를 사용합니다.

 

참고 : HTML5 + CSS3 웹 표준의 정석