Reload0213 devNote

포트폴리오를 만드는 중 유튜브 동영상을 삽입하려하니 자꾸 반정도만 보이게 잘려나온다던지 조절이 안되게 삽입되는 경우가 자꾸 발생하여 검색 및 복습을 통해 깔끔하게 삽입하는 방법을 정리해 놓는다. 이는 position의 absoulute속성이 가지고 있는 바로 위의 reletive속성을 가진 부모를 찾아가는 점을 이용한 것으로 먼저 비디오(iframe)에게 position: absolute; top: 0; left: 0; width: 100%; height: 100%;를 준다. 그리고 비디오의 바로 위 부모에게 position: relative; width: 100%; heigth: auto; padding-top: 50%를 주고, 적당히 액자형식의 디자인을 조금 해주면 간단히 완성된다. HTML 샘플코드..

제일 처음 HTML과 CSS를 배우기 시작하고, 클론코딩을 시도하려 했을때 가장 애를 먹었던 부분이 컨텐츠들을 정렬하고 위치를 내가 원하는 대로 두는것이 어렵게 다가왔습니다. 지금도 다른 영역을 배우다가 다시 앞에 보여지는 부분들 즉 이러한 컨텐츠들을 구성하려니 또 다시 처음하는 것처럼 가물가물하여 블로그에 정리해봅니다. 여러방법이 있으나 absolute를 이용한 방식은 개인적으로 별로인 것 같아 다른 2가지 정도씩으로 정리해보겠습니다. div 가운데 정렬 하는 방법 div 영역을 중앙에 배치하는 방향에 따라 다양한 방법이 존재합니다. 다음과 같이 정렬 방향에 따라 케이스를 나눠서 방법을 소개해드리도록 하겠습니다. 정렬 방향 div의 가로만 정렬 div의 세로만 정렬 div의 가로와 세로 모두 정렬 di..

position-fixed의 특징 CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있게 됩니다. 뿐만 아니라, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때문에, 다른 엘리먼트들이 상하좌우로 움직일 때, position 속성이 fixed로 설정되어 있는 엘리먼트는 그 자리에서 움직이지 않습니다. 상단에 고정되어 있는 메뉴바/네비게이션을 만드는 방법에 대해서 알아보겠습니다. - 우선 상단 메뉴영역과 메인영역을 Html을 통해 간단히 작성해준 후 메뉴바를 ..