Record

fixed 레이아웃 자주 쓰는 레이아웃이며 header가 고정이 되어 따라오는 형태를 띄는 레이아웃이다. 2가지 형태의 레이아웃을 실습한다. 1. 상단이 고정되어있고 컨텐츠 길이가 늘어나면 푸터도 밀려나는 형태 2. 상단 하단이 모두 고정되어있고 컨텐츠 길이가 늘어나면 스크롤이 생기는 형태 예제코드를 살펴보자 html / 1번,2번 공통사용 header content footer css / 1번 적용 , 2번 주석 풀기 @charset "utf-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1..

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..

* 이 글은 부스트코스 웹 UI제작에 있는 강의 내용을 토대로 정리/분석한 글입니다. 레이아웃 레이아웃은 책이나 신문, 잡지 등의 출판물에서 글이나 그림을 효과적으로 정리하고 배치하는 일을 뜻하는 출판용어 이와같이 웹사이트를 제작할때 메뉴, 컨텐츠, 부가정보 등과 같은 구성요소들을 필요한 곳에 위치하여 사용자가 효과적으로 웹사이트를 이용할 수 있게 배치하는 작업 종류 1. 1단 레이아웃 가장 기본이 되는 레이아웃 헤더/콘텐츠/푸터 영역이 직렬로 연결된 형태를 가지고 있다. 2. 다단 레이아웃 3. 고정 레이아웃 4. 그 외 다양한 레이아웃 1단 레이아웃 부터 실습해보자 . html 헤더 콘텐츠 푸터 전체를 감싸는 wrap 와 각 header , content, footer이 들어가는 공간을 만들었다. c..

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..