HTML 2

Fixed Menu, 메뉴 바 상단 고정 구현 시 content에 margin-top을 주면 위험한 이유 (feat. margin collapsing)

소개KUIT 교내 개발 동아리에서 WEB 파트장을 맡아 운영 중이다. WEB 파트 부원들에게 준 2주차 미션이 당근마켓 화면 HTML, CSS로 클론코딩하기였다.미션 결과물 코드리뷰를 하다 좋은 질문들이 많이 나와 공부가 많이 되었는데, 그 중에 fixed menu, 메뉴 바 상단 고정 구현 할 때 menu bar 아래 content에 margin-top을 주면 위험할수도 있겠다는 생각이 들었고, 그 이유에 대해서도 많이 찾아보게 되어서 글을 써보았다.질문코드와 함께 보는 것이 편할 수도 있을 것 같아 추가한 github discussion 주소이다.만들고자 하는 화면은 아래 이미지처럼 당근마켓의 한 화면을 구현하되, 스크롤을 내려도 맨 상단 바가 항상 위에 고정되도록 하는 것이었다. 일반적인 블로그나 ..

[KUIT 3기 Web] 1주차 - Web 기본 지식

Web 기본 지식들을 키워드 기반으로 정리해보았다. HTML, CSS, JS HTML : 페이지의 틀 JS : HTML element 간의 동적인 동작 CSS : 색깔, element 배치 등 디자인 요소 Web API HTML5는 2004년에 등장했고 2014년에 W3C에서 표준안을 확정했으며, 다양한 Web APIs를 제공한다. HTML Geolocation API 사용자(브라우저)의 현재 위치를 받아올 수 있다. 지도 현 위치 표시 기능에 사용한다. 단, 브라우저 차원에서 보안 문젤 https에서만 사용 가능하도록 제한이 걸린 상태이다. HTML Drag and Drop API 웹 페이지에서 JS를 이용해서 element의 드래그, 드롭, 이동, 삭제를 간편히 구현 가능하게 지원한다. HTML We..