본문 바로가기
퍼블리싱 & 프론트엔드/html & CSS

코드잇 학습일기 Day15. 아이프레임(iframe)

by ♥︎해이나♥︎ 2023. 4. 22.
반응형

원래 코딩강의는 되도록 평일에 듣고, 주말에는 휴식에만 집중하는 편인데... 이번 주에는 정신이 없어서 학습일기를 한개밖에 쓰지 못했다. 학습일기 챌린지가 주 2회인데, 주말에 1개를 쓰지 않으면 4월 챌린지를 실패하는 상황이라서, 주말이지만 코딩강의를 듣기로 했다. 

 

아이프레임

아이프레임(iframe)

유튜브에서 공유하기(동영상 퍼가기) 기능을 이용할 때 iframe 으로 시작하는 태그를 확인할 수 있다. 

 

유튜브의 아이프레임 태그

 

아이프레임은 inline frame 이라는 의미이다. 간단하게 설명하자면 html 문서 안에서 또 다른 html 문서를 보여주는 역할을 한다. 개발자 도구를 열어서 보면 <iframe> 태그 안에는 <html>, <head>, <body> 태그가 모두 들어있는 것을 확인할 수 있다. 

 

개발자 도구로 확인한 아이프레임 구조

 

이것을 응용하여, 만약 어떤 html 화면에서 다른 html 화면을 불러오고 싶은 상황이라면 <iframe> 태그를 이용할 수 있다.

 

<iframe src="파일명.html" width="너비값(숫자)" height="높이값(숫자)"><iframe>

 

아이프레임(iframe)도 이미지, 비디오 등과 마찬가지로 사이즈를 지정할 수 있으며, 단위 없이 숫자만 사용한다. 그리고 이 태그는 보통 지도를 삽입하거나 온라인 쇼핑의 결제창을 띄울 때에 활용한다. 


강의를 듣고 나서 이어지는 커리큘럼으로 실습을 해 보았다. 셀프 채점을 하고 나면 "정답입니다!" 하는 팝업이 뜨는데, 강의 내용을 제대로 이해했다는 생각이 들어 기분이 좋다. 왠지... 학교 다닐 때 선생님한테 칭찬 받은 기분?ㅋㅋㅋ

 

코드잇 실습 채점 후 나오는 팝업

 

오늘은 강의를 3개 들었다. 주말이라 쉬고 싶은 생각도 있었는데, 강의 길이가 짧기도 했고 아직까지 배운 내용을 정리하고 실습을 하는 커리큘럼이어서 그리 오래 걸리진 않았다. 

 

코드잇 오늘 공부

 

코드잇 오늘 공부 인증을 끝으로 이번 주 코딩공부 끝! 담주에는 정신차리고 빠릿빠릿하게 강의를 들어야겠다.

반응형

댓글