Record

메뉴 / navigation / 내비게이션 메뉴는 콘텐츠를 분리하고 체계화시킨 후 이를 연결시켜서 방문자들이 웹사이트를 이용할 수 있도록 하는 체계이다. 홈페이지에서 제일 중요하고 은근히 어려운 메뉴 부분이다. 종류도 다양하다. 1단 메뉴 2단메뉴 전체 슬라이드 다운 메뉴 메가 메뉴 메뉴 자체의 종류도 있고, 배치가 어디되는지에 따라 좌측 메뉴 우측 메뉴 상단 메뉴로 나뉘고 이미지 메뉴 플래시 메뉴 텍스트 메뉴 정말 다양하고 그만큼 방법도 무궁무진하다. 이번에는 간단하지만(?) 은근히 어려운 메뉴바를 만들 것이며 처음으로 1단 메뉴바를 만든다. html 메일 카페 소프트웨어 지식백과 영화 html은 간단한 편이다. 전체를 감싸는 div를 선언하고 그 안에 ul / li로 메뉴를 작성하였다. 가끔 ul 안..

2단 레이아웃은 header 과 footer를 제외하고 content 부분에 우측 부분에 aside를 두어서 두개로 나누어진 레이아웃이다. 구현은 float를 사용하는 방법과 table / table-cell을 사용하는 방법 2가지가 있다. ====== float 사용 ====== html header content aside footer container이라는 section으로 하나로 묶어주고 그 안에 컨텐츠영역과 aside영역을 구분해 놓았다. css @charset "utf-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet..

reset.css 란 어떤 브라우져 등 똑같이 나오게 하는 기법 브라우저 리셋을 먼저해야한다. 브라우저 마다 기본적으로 제공되는 CSS가 존재한다. 크로스브라우징을 위해서는 모든 css를 동일하게 맞춰줄 필요가 있기 때문에 모든 css를 초기화 하는 값이 필요하다. 그 값을 가진 것이 reset.css 라고 한다. https://cssreset.com/ 을 활용해도 되며 그 외에 것을 사용하여도 된다. 아래는 직접 만들어본 reset.css 이다. 상황과 프로젝트에 따라 달라질 수 있는 부분이다. body, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, p, fieldset, legend { margin: 0; padding: 0; } body, input, textarea, s..

출처 : 유튜브 DarkCode - Button With Awesome Hover Effects Using HTML & CSS https://www.youtube.com/watch?v=SP0wAmjbaQ4 Hover시 움직이는 효과를 가진 버튼입니다. html Hover Me css @charset "utf-8"; *{ margin: 0; padding: 0; } body{ background: #353b48; height: 100vh; display: flex; align-items: center; justify-content: center; } .btn{ width: 200px; height: 60px; background: none; border: 4px solid; color: #3498db; f..

1Day - 1Commit : 1차 목표 클론코딩 및 코드분석 출처 : 유튜브 DarkCode - Amazing Loading Animation Using Only HTML & CSS https://www.youtube.com/watch?v=QLiZ5VrhA98 Html Code Loading... Css Code 및 분석 @charset "utf-8"; body{ /* 초기화 영역 */ margin: 0; padding: 0; /* 배경 지정 */ background: #34495e; /* vh 높이 지정 : vh는 Viewport Height의 약자로 1vh는 Viewport 높이의 1%와 같다 예를들어 가로 1200px 세로 1000px의 경우 100vh는 10px이다(100분의 1) */ heig..