개발새발

좋았던 점

밤에 호준강사님의 커피챗 타임이 있었다

는 잠들어버리시는 바람에 약 20분 가량 우리들끼리 강아지 자랑하고 놀았다

오셔서는 갑자기 강의가 시작되다가..

이런저런 학습에 관한 얘기를 해주셨다

금요일 오후에 서울에서 볼 일이 있어서 미리 서울집으로 왔다

남자친구가 짐들어주러 데리러 왔다

이거가지고도 선의의 실랑이가 있었는데 개인적인거라 자세히 적지 않겠다

그래도 정말 오랜만에 멀미 안하고 왔다

 

<금요일>DOM, 서평단 선정됨

 

DOM은 자주 들어보기만 하고 뭔지 몰랐는데,

어제,그제 배운거에 비하면 할만한 내용인것 같아 살것같다

 그리고 전에 Do it! 시리즈의 지옥에서 온 문서 관리자 깃&깃허브 입문[전면 개정판] 서평단에 선정되었더라

아직도 수동으로 꾸역꾸역 올리는데, 드디어 이참에 미뤄뒀던 깃허브를..

여차하면 강의나 스터디를 열어 보고 싶은 작은 욕망이 있는데 일단 먼저 공부해봐야겠다

• 비전공자 기준 연봉테이블
• 선기수들 제주 웹 컨퍼런스 연사, 알잘딱깔센 책 집필
• 개자이너, 디발자
• 부트스트랩> 나중에 프리랜서 할 때 많이 사용
• 제이쿼리 에이작스는 간단하게
• 연봉 테이블에 따라 리액트와 바닐라JS를 쓸 수 있다
• 우리는 뾰족하게 프론트엔드를 하자
• 백엔드,디자이너가 한걸 이어주는게 프론트 엔드

• 배운걸 구현하며 복습
• 어떻게 고도화할 것인지 빨리 할 것인지

책추천
함께 자라기
구글엔지니어는 이렇게 일한다

영화추천
peaceful warrior

• 하루 30분 바깥 햇빛쐬기 운동하기

'피드백' 이 중요한게 아니고
'피드백을 주고 받는 것' = '상대방을 기분 좋게 움직이게 하느냐' 가 중요하다

팀 활동

• 각오: 내가 소중하게 여기는 사람들에게 멋있는 사람이 되자
• 목표: 수료후 2개월 이내로 사람들의 일상에 도움이 되는 회사에서 일을 하고싶습니다 현재 가고싶은 회사들(오늘의 집, 당근마켓) 기준으로 Job Description 을 확인해봤을 때, 멋사자 과정에서 접하지 못하는 Typescript가 있어 그 밖에 다니고 싶은 회사들의 JD를 확인하여 부족한 부분을 보완할 스터디를 열어 포트폴리오를 만들어 나갈 것 입니다

스타트업 투자 규모 확인/ 산업 별 기업 서칭할 수 있는 사이트

https://thevc.kr/

https://startupspace.kr/

코드 라이언 시간

헬로 월드가 식상해서 하이~헤이치~아이~ 맫~몬스터~해봤다

제코베 강의를 듣다가 emmet 문법을 알게되었다

쓰던 편집기가 아톰이라 설치해봤다

1.File
2.Settings
3.+Install
4.emmet 검색

하단으로 쭉 내리면 찐 emmet이 있다
설치하면 끝!

좋았던 점

• 컨디션 관리는 잘 하고 있는 듯? 집중도가 올라감
• 집필 회의하는게 생각보다 좋았다. 하고 나면 정리도 되고 부담감도 많이 덜어진다
• TS 덕분에 저녁먹고 시간낭비 하지않고 자리에 앉았다(저번주와 똑같아 보이는 건 기분 탓일 거다)

아쉬웠던 점

• 역시 리소스 분배. 나는 솔직히 지금 내가 맡은 소주제 하나,하나를 이해하는게 버거웠다
  하지만 이번주가 내 파트라 내용도 어느정도 써내야하고 해서 어쩔수~없네~나는~개똥벌레~
• 운동을 1도 안하고 있다 회사다닐때처럼 아침에 가려고 24시 헬스장 다시 끊을까 심히 고민 중

다음 주 계획(+이번 주말)

• 타스내용 보완
• 앞으로 자바스크립트 진도가 진짜 중요하므로 이번주 연휴까지 무조건 밀리거나 놓친부분을 다 잡아 놓는게 목표다
  할건 참 많은데, 그와중에 주말에 경조사도 챙기러 가야한다 역시 사회생활은 코딩시간에 방해가 되는군?!

<월요일> 영어, 회고조 온라인 회식

몸이 무지무지무지무지 피곤했다

비와서 그런지 줌으로 하는 영어수업이 유난히 끊겼다

끝나고 바로 친목 도모 목적의 회고조 미팅이 있었다

8시부터 거의 열시까지 했는데, 암튼 재밌었다

<화요일> JS변수

오전에 되게 졸렸다 자바스크립트 변수들을 배웠다

기억나는 건 나연의 POP... (?)

TS때문에 저번주 복습을 제대로 못해서 이날은 그냥 JS부터 복습을 했다

게더에 들어가 있다가 민정님이 뭘 물어보셨는데

나는 대충 알겠는데~?하고 넘어가는 걸 민정님은 그냥 넘어가지를 안더라 뭔가 계속 파고드는게,

문득 나는 제대로 하고 있는게 맞나 하는 생각이 들었다..!

컨디션이 안 좋아서 엄청 일찍 잤다

<수요일> JS Array, TS 공부

배열 배움. 일찍 자니까 집중이 더 잘 된다 하지만 왜 졸릴까

타입스크립트 책 초안 작성 중 시간이 너무 빠르다

생각보다 더더더더더더더더더더더ㅓ더더더어렵다

일단 처음 공부를 해가면서 다시 설명을 쓰려는 이 행위자체도 쉽지 않고,

예제 코드를 긁어 올 수는 없으니 (게다가 공식 문서 예제 코드는 어렵기도 하다)

남이 봐도 이해가 갈만한 쉬운 예제를 만들어야한다고 생각한다

그렇지만 나도 완벽하게 이해하는게 아니니 적절한 예시가 떠오르질 않거나,

이 예제가 맞는건지 모르겠다 이건 강사님이 피드백 주실 부분이라 괜찮지만

아무튼 생각보다 더 많은 리소스가 투입되고 있어 복습시간이 모자라 슬프다

<목요일> 반복_한요한, TS 회의

배열 한 번 더 정리, 조건문 반복문 아악!

9시부터 거진 11시까지 책 집필 중간 점검 회의

회의하기 전까진 회의하는 거 너무 싫었는데

막상 회의하면서 처음부터 다 같이 싹 보니까 공부 겸 정리도 되고 좋았다

돌이켜보면 '회의'라는 것 자체에 약간 거부감이 있었다

왜냐? 전 직장에서 일주일에 한 번씩 회의를 했었다

내가 하던 업무상 시간을 허투루 쓸 수가 없었는데, 똑같은 소리가 반복되는 게 너무 싫고 기본 한 시간씩 잡아먹는 게 회의 내용 대비 꽤나 시간낭비 비효율적이라고 생각됐다

<금요일> 특강 데이, TS 수정

1기 출신이자 위니브에 재직하시는 멘토 두분의 특강이 오전,오후로 이어졌다

오전엔 내 소프트스킬, 업무 프로세스, 깃 활용(짱유용)

오후엔 손이 빠르기로 익히 들어 알고있는 멘토님이라 실습은..관람했다^^..ㅎ(짱빨라b)

어제 회의한 내용에서 피드백 받은 부분들 수정하고

나는 아직 다 하지 못한 부분이 있어서 더 작성으 ㄹ해야하는데러나어루너ㅏㅀㅍ

Weniv 박누리 멘토님 특강

오늘도 개발자가 안된다고 말했다

책

• 오늘도 개발자가 안된다고 말했다
• 개발자의 글쓰기 (소프트스킬내용도 많이 나온다)
• 함께자라기

소프트스킬도 하드스킬 못지않게 중요하다

개발자는 개발만 하는게 아니니까!

프로젝트를 하면서 갈등상황은 없었나, 갈등상황이있을때 어떻게 해결하는 편인가

팀장이든 팀원이든 활발하게 지식을 공유한 것도 꾸준히 기록하기

웹에이전시의 프로세스

• 의뢰&사전미팅 : 고객의 요구사항을 정리하고 진행가능 여부를 확인
• 계약
• 기획안 작성(https://moqups.com/,PPT) : 기획자가 넘버링을해서 기획안을 짠다
• 킥오프회의 : 기획안을 토대로 회의
• 디자인 작업 (피그마,제플린) : A안 B안을 만들어 고객에게 확인받는다
• 개발(프론트&백)
• QA(품질관리) : 원래 의도한대로 잘나왔나 확인하는 과정
  QA하면서 테스트하지 못한부분이 나와서 추가하게 될 수 있으므로 이전에 의사소통하면서 확인하는 과정이 중요하다
• 오픈

말을 구체적으로! 안되는 이유를 설명을 해줘야 한다

내가 이해한대로 하지말고 돌다리도 두드리고 건너자 중간에 이상한 포인트가 있다면 물어본다

수정사항을 요청하고 확인할 때에는 보다 정확하게 정보 전달하기

적어도 수정 URL / AS-IS 내용(지금은 이러한데) / TO-BE 내용(이렇게 하면 좋겠다) 혹은 이미지 전달하기

깃헙프로젝트

장점

1. 한눈에 들어오는 진행 상황
2. 커밋 단위로 트래킹하기 편리
3. 직관적인 코드와의 연동

https://fluoridated-office-e89.notion.site/221007-GitHub-Projects-Issues-c211cf6d98a84f56afcf2f70137ea07b

+ 알잘딱깔센 GitHub

와 짱 편하다

https://gist.github.com/ihoneymon/652be052a0727ad59601

Weniv 강혜진 멘토님 특강

HTML & CSS ㄱ 나나요?

• 시안대로만??ㄴㄴ 유지보수, 재사용도 고려해보기

• 반응형에 좋은 flex

• gnb: Global Navigation Bar
• 피그마 디자인 백그라운드에 깔고 Opacity 조절하는 팁

• SEO 확인 라이트 하우스(부동산 폭락론자 유튜브 채널 이름이라 나혼자 맨날 피식함응?)

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related?hl=ko

https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe/related?hl=ko

• 여러분이 만든 웹사이트는 모두에게 친절한가요?

와 넘 빠르다

Array 한번 정리

• Array(100).fill(0).map((_, index)=>index)
  (100) [0부터 99까지 채워진 배열이 출력된다]
• (변수명Value,인덱스Index,배열Array)
  변수명이 _인 이유는 자리를 채워주는 용도이다
• Array(100).fill(0).map((_, index)=>index+1).filter(i => i % 3 === 0 || i % 5 === 0)
  (47) [3의 배수 5의 배수]
• sort는 새로운 배열을 만들기 때문에 원본이 변경되지 않는다

조건문

• if 문
• if ... else 문 (중첩문은 맨위에 둔다)
• switch 문 (잘 안쓰지만 코드 가독성이 좋다)
• 삼항연산자 (조건연산자)
  두개까지는 괜찮은데 많아지면 한줄일 때 가독성이 좋지 않다
• nullish 연산자
  요소 값이 없을 때 undefined가 출력된다
• || : 0, null, undefined
  ?? : null, undefined
  falsy하다 : 0, null, undefined, "", NaN
  nullish하다 : null, undefined

반복문

• for 문 (Airbnb 컨벤션을 많이들 쓰는데 for문을 쓰지 말라고 권고되어 있다?!)
• forin
• 29번 파일 암기할 코드 재귀함수 할 때 필요하다
  문자열 뒤집기
  시그마
  팩토리얼
• 코딩도장 레벨2 구글입사문제 정도는 풀기 (손으로 외우기)
  https://codingdojang.com/scode/393?answer_mode=hide

• while 문
  31번 파일 구구단 코드 암기
•  

회사 코딩 테스트를 볼 때

알고리즘 책을 옆에 두기 (구글 검색보다 빠르고 정확할 수 있다)

코딩 테스트 후 면접이 진행되므로 문제를 못 풀었다고 쳐져있는 것 보단

시간이 15분정도 남았을 때 이 알고리즘이 어떤걸 묻는 문제이며 어떤식으로 풀려고 했는 지 머릿속으로 정리해보자

(문제를 풀지 못했다고 탈락이 확정은 아니다!)

반응형 웹 완성

태블릿, 모바일 버전 마무리

• max-width만 주고 rem환산하여 수치입력
  (font-size에 따라 padding도 커지길 원한다면 em으로 준다.
  rem은 루트 요소의 폰트 사이즈, em은 부모 요소의 폰트 사이즈를 상속받기 때문)
• 요소선택자로 선택하는이유는 좀 더 정확하게 선택할 수 있으므로
• flex-basis는 axis 방향에 따라 flex가 column 방향일때 높이로 유연한 컨텐츠 크기 조정 가능
• 컨텐츠가 없을때 필요한 경우 높이를 지정해주기도 하긴 하지만
  안에 컨텐츠가 있는 경우는 높이값을 직접 지정해 주는 경우는 거의 없다
• 콘텐츠가 많아지면 어떤 화면이든 레이아웃이 깨지지 않게 하기는 쉽지않다
  근데 누가 화면을 늘렸다 줄였다 확인하는 경우가 개발자가 아니고서야..
  그 시간에 다른곳에 리소스를 투여하는게 효율적

https://devlog.jwgo.kr/2019/01/16/why-we-use-625p-instead-of-10px/

웹의 역사

• 최초의 컴퓨터
• 최초의 웹사이트

http://info.cern.ch/

• 닷컴 버블
• 브라우저 전쟁
  모자이크 > 넷스케이프 내비게이터 > 인터넷 익스플로러
  모질라 파이어폭스, 사파리, 오페라, 크롬
  
  

짤의 출처: https://www.youtube.com/watch?v=taJV5cigzNY 

배열

• {리터럴} [배열의 리터럴]
• 리터럴은 할당되기 전의 값이다
• 문자열의 배열 특성은 불변성이다
• mutable(가변), immutable(불변) 많이 듣게 될것
• 희소 배열
• Array.메소드
  Array.prototype.메소드
  ????
• unshift() : 맨 앞에서 요소를 추가할 때
• shift() : 맨 앞에서 요소를 제거할 때
• splice() : 요소를 위치할 인덱스(음수일땐 뒤에서부터), 제거할 요소 개수, 배열에 추가할 요소
• slice() : 잘라낼 배열의 시작 인덱스, 종료지점 인덱스(생략시 끝까지 추출된다)
• indexOf() : 찾을 요소, 탐색을 시작할 인덱스(생략가능)
  탐색되지 않았을 땐 -1이 출력된다
• join() : 요소들을 ()로 연결해 하나의 값인 문자열로 만들 때
• fill() : 똑같은 요소들로 채울때(많이쓴다?)
• flat() : 평탄화할 때 (알고리즘 문제 풀 때, 재귀적으로 평탄화 할 수 있다)
• includes() : 특정 요소가 있는지 확인할 때
• find() : 하나의 요소라도 조건을 만족하는지 확인할 때
• filter() : 모든 요소가 조건을 만족하는지 확인할 때
• map() : 함수 호출할 때
  filter는 조건 메소드가 자체적으로 있고 map은 따로 없다
  (함수자리에 조건문을 걸면 메소드처럼 쓸 수 있다) 
• forEach() : 각 요소 콜백 1회씩 실행
• sort() : 요소 정렬 (유니코드 오름차순)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#%EB%A9%94%EC%84%9C%EB%93%9C

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

좋았던 점

• 잠 일찍 자니까 컨디션 최상이었다 (그런데 어제오늘 늦게 자고있다...어쩔수가없ㄷ..)
• 배울땐 몰랐는데, 케릭터 그리기를 하면서 써보니까 재밌었다 
• TS 덕분에 저녁먹고 시간낭비 하지않고 자리에 앉았다

아쉬웠던 점

• 회고란.. 뭘까..? 잘하는 팀회고가 뭔지 어떤 방식인지 잘 모르겠다
• 다른거 제껴두고 TS파야하는 점, 호준님이 리소스 너무 투입하지 말라고 하셨었는데..
  음 나도 그러고 싶은데 다들 1회독을 해야한다해서..모르는 상태로 시작하니 어쩔수가 없는 듯하다
• 그래서 결과적으로 복습도 못했고 케릭터에 공을 들이지 못했다

다음 주 계획(+이번 주말)

• 타스만 패야 될거같다 (아니 대체 다른 사람들은 어떻게 하고있는거야;)
• 최대한 빠르게 주말내로 파트 회의 소주제 정하기
• 초안 작성
• 아 무슨 과제가 또 있었던거 같은 데

<월요일>

오전에 스프린트 회고시간이 돌아왔다

혼자 회고는 이렇게 하면 하겠는데

팀 공동의 회고 주제와 방식을 고민하는 것 자체가 아직도 어렵다

토요일 오전에 타입스크립트 책집필 스케줄이 픽스되서

영어수업을 월욜 6시30분부터 8시로 바꿨다

저녁먹을 시간이 겁나 촉박해졌다

당분간 엄마가 꼬박꼬박 밥 챙겨 주시는 본가에 붙어있어야겠다..

<화요일>

케릭터를 그리고 애니메이션 효과로 더 귀엽게 만들었다 뿌잉

아빠찬스로 구한 갤탭울트라랑 버티컬마우스랑 노트북쿨러가 왔다

한결 쾌적해져 살 것 같다

Sass를 배웠다

익숙해지면 분명 더 편할 것 같긴한데..

암온더 넥스트 레벨

광야에 온 기분이네

어제 잠을 일찍자서 (12시 20분?) 컨디션은 최상인 것 같다

<수요일> 책 집필 회의, 케릭터 대회 말하는 감자 만듬

갑자기 회의가 잡혔는데

자습시간을 다 날려서 솔직히 좀 속이 끓었다

더구나 당장 다음주가 내 파트라 갑자기 며칠안에 타입스크립트 전 내용을 1회독하고,

또 우리 파트도 따로 파서 공부해온 다음에 회의를 해야한다

이게 되는건지 모르겠는데, 난 민폐끼치기 싫어하는 성격이라

다른것보다 우선적으로 타스만 파야할 것 같다

목요일이 케릭터 대회 마감인데 자려다가 그냥 구조만 짜놔야지 하던게

그냥 몇시간동안 완성해버렸다

작업하면서도 계속 추가하고싶은 부분들이 생겼지만

여기에 쏟을 리소스가 부족해서 너무 아쉽다ㅠㅠ

더 병맛으로 할 수 있는데..!

<목요일>

부트스트랩, 테일윈드 끝(?)

생활반경이 내방에서 끽해야 동생방 (각각 끝방)이라

집안에서 걸어다니는데 다리가 약간 후들거리는거 같아

겸사겸사 타입스크립트 책 빌리러 도서관에 야간 대출 예약을 했다

7시부터 9시40분까지 이력서 특강이 있었다

내 생각엔 신입보다 이직할 사람들이 더 유용한 특강이 아니었나 싶은 데,

(안 유용했다는건 아님)

아무튼 특강 끝나고 나온게 열시

집에 돌아와서 씻고하니까 열한시

책집필 앞파트꺼 보고 피드백하고 회고조 블로그 쓰니까 벌써 두시

23일 금요일

복습하고

벤딩머신 과제

먼저 HTML마크업을 하려고했지만 뭔가 눈에 보이지 않으니 참을 수가 없다

일단 헤더 로고 부분만 이미지 따와서 배치하고

메인을 그리드로 2분할 시켰다

왼쪽 음료 선택 영역도 그리드 짜주고 음료 1개만 우선 가상요소를 사용해서 완성해봤다

24일 토요일

나머지 영역 html 마크업 완료

대략 사이즈 설정도 완료

이제 스타일만 주면 된다

폰트 적용 질답

Q ) 왜 @import 폰트코드를 CSS 맨위에 둬야 할까요?

저번에 1만시간에서는 맨밑에 @font-face 가 있어도 잘됬는데?!

A) 각각의 url을 주소창에 입력해보면

폰트 페이스는 바로 파일이 다운받아지고

임폴트는 주저리주저리 코드가 적혀있는 창이 뜹니다.

정리하면,

제공되는 웹폰트를 css파일로 준다→ @import

파일을 CDN(Content Delivery Network)으로 준다→ @font-face

CSS 실무 테크닉

browser 마다 기본 설정이 달라서 조금씩 다르게 보인다

custom input, select box

디자이너가 초보일 때 간혹 활성화된 버튼 이미지만 주는 경우가 있는데,

비활성화 된 이미지도 요청하면 된다

input checkbox custom

firefox safari 브라우저로 번걸아 보는데 정말 다르다 (사파리 못생김..)

• select,option 태그를 사용하면 커스터마이징이 어렵다
• 모바일에서는 운영체제마다 다르기 때문에 따로 커스터마이징을 하지 않는다

피그마 실습 버튼 만들기

https://www.figma.com/file/c4mPUK5xcqzzRVBadSu6BG/%EB%A9%8B%EC%82%AC_%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%8A%A4%EC%BF%A8_3%EA%B8%B0?node-id=4624%3A2536 

[깨알면접팁] 면접보는 회사가 하는 서비스를 반드시 알아야한다
ex) ...써보셨어요?
-사이트를 크롬, 사파리, 파이어폭스 등 여러 브라우저로 다 돌려봤을 때
레이아웃이 깨지는지를 확인해서 면접 때 대답한다

IR(Image Replacement)

ㅋㅋㅇ

1. image 내 의미있는 텍스트의 대체 텍스트를 제공할 때(pc)
2. image 내 의미있는 텍스트의 대체 텍스트를 제공할 때(mobile)
3. 스크린리더 X, 마크업 구조상 필요 O
4. 이미지가 로드되지 않았을 때 대체 텍스트를 나타낼 때

/*1*/
.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

/*2*/
.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능*/
}

/*3*/
.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

/*4*/
.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}

ㄴㅇㅂ

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

ㅋㅍ

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

https://mulder21c.github.io/2019/03/22/screen-hide-text/#visibility-%EC%9D%B4%EC%9A%A9

image sprite 기법

https://www.toptal.com/developers/css/sprite-generator/

• 장점 : 스크린리더가 사이트를 렌더링 할 때 더 빠르다
• 단점(면접 질문) : 용량이 너무 커 질 수 있다, 수정이 불편하다

https://www.youtube.com/watch?v=fKyLCIqWjIY

레티나 디스플레이 대응법

PPI = Pixel Per Inchi

2배의 이미지를 준비해줘야한다 (애플;)

반응형 컨텐츠 만들기

백그라운드 사이즈 속성

• background-size : contain
  컨테이너 전체를 덮되 이미지를 자르지 않게 유지
• background-size : cover
  컨테이너 전체를 완전히 덮는다

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers

video 속성

• preload =“none”, “auto”;
  페이지를 로드할때 영상을 미리 로드할지 말지 결정합니다.
• poster
  비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정합니다.
• controls
  브라우저가 재생에 핋요한 컨트롤러를 제공할지 지정합니다.
• autoplay
  파일이 다운로드가 완료되면 자동으로 재생될지 지정하는 속성입니다.
• muted
  소리를 끕니다.
• loop
  비디오가 끝나고 반복적으로 재생할지 지정합니다.

반응형 동영상 만들기

youtube video를 가져와 반응형으로 만들어야 한다면?

iframe 사용

부모 position : relative

자식 position : absolute