Web Study

뷰포트란 웹 페이지가 브라우저 화면상에서 실제로 표시되는 영역 예시 뷰포트 요소로서 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 제공 initial-scale=1.0 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 레벨을 설정 user-scalable=no 사용자가 크기를 조절하지 못하도록 설정 maximum-scale=1 사용자가 극단적으로 크기를 확대하지 못하도록 방지함 width=device-width 페이지의 너비를 설정하여 기기의 화면 너비를 따르도록 함 뷰포트를 사용하기 위한 CSS 단위 vh (Viewport Height) 1vh는 뷰포트의 높이의 1%와 같다. vw (Viewport Width) 1vw는 뷰포트의 너비의 1%와 같다. vmin (Viewport Minimu..

1. 탑바 광고 배너를 이미지로 넣어줬더니 앱솔루트 한 부분이랑 겹치는데, background-image로 깔아주니 겹침 현상이 없어졌다. min-width 때문인 것 같은데, 일단 해결은 됐지만 다시 한 번 확인을 해봐야겠다. 2. 자바스크립트 사용시 같은 명령어를 여기저기 동시에 넣어줬는데 (ex.스크롤 할 때 배너 광고 없어지기 + 클릭했을 때 없어지기) 클릭했을 때 영원히 닫히지가 않는다. 그래서 이름만 바꿔서 다른 명령어를 넣어주니 잘 된다. 컴퓨터도 이럴땐 혼동이 되는건가. 아무튼 css한 줄 더 쓰더라도 좀 더 구체적인걸 요구하는 것 같다. 3. 배너 이미지, 체크박스, span 요소를 동일 선상에 정렬하는데 시간이 생각보다 많이 걸렸다. span태그가 inline요소라서 정렬 상태가 애매해..

position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성. 용어 정리 1. fixed 박스: position: fixed 속성을 적용한 박스. 2. sticky 박스: position: sticky 속성을 적용한 박스. 3. scroll 박스: overflow: auto 또는 overflow: scroll 속성을 적용한 가장 가까운 조상 박스. sticky 박스의 특징 1. sticky 박스는 top, right, bottom, left 속성이 필수. 2. fixed 박스는 뷰포트에 고정하지만 sticky 박스는 scrol..

고정 너비가 있는 적응형 사이트 1.로고가 가운데 박혀 있는 예제. 특이한게 메뉴와 메뉴 사이에 있네? 일단 메뉴 아이템의 일부로 로고를 넣어주고 작업을 했고 여기까지는 순탄하게 됐던 것 같다. 그런데 로고에 마우스 오버시에는 서브 메뉴 오픈이 안되게 되어 있다. 여기서 당황을 한 것 같다. 일단 hover로 최대한 어떻게 해봤는데 메뉴 아이템에 호버 했을시 서브 메뉴가 나오다가 끊겨 버린다던지, 상위 클래스에 호버를 걸어주면 이게 로고가 선택 되어 버리는 문제가 생긴다. 여기서 자바스크립트를 써야 겠다고 생각하고 사용 했는데, 뭔가 또 잘 안된다. 그냥 단순히 로고가 선택이 안되게끔 스크립트를 걸어주면 되는 거였는데, 너무 복잡하게 생각한 것 같다. 어쨌든 문제는 간단하게 해결 됐다. 2. 본아이에프 ..

이번 경우에는 작업을 두 번 나눠서 진행 하였다. 크게 다를 건 없지만 처음에는 유지, 보수 후 버전으로 작업을 시작해서 그대로 마무리 짓고 싶었고 그 이전에 사이트 형태도 한 번 다뤄보고 싶어서 html은 공유를 하고 나머지를 수정 하였다. 생각보다 왜 오래 걸렸는지 잘 모르겠다...ㅠ 일단 작업하면서 뭔가 계속 문제가 생기고 할게 많아지고 이런 부분은 애초가 뭔가를 잘 못 해서 그런 것 같다는 생각이다. 1. 일단 배경을 분리 한다는건 딱히 차이점이 별로 없는 작업인 반면에 배너 광고 하나 넣어주는 것은 생각보다 손이 많이 가는 작업인 것 같다. 배너 광고를 닫았을 때 다른 부분은 어떻게 되며, 스크롤이 되었을 때 바뀌는 점, 또 스크롤을 다시 다시 올렸을 때 바뀌는 부분 등을 고려를 해야한다. 2...