가장 기본적인 형태인 아래와 같은 레이아웃을 잡아 보겠습니다.상단에 Header, 왼쪽에 위치할 Left Content, 오른쪽의 Right Contnet, 하단의 Footer 입니다. 레이아웃을 잡는 방법에는 크게 세 가지가 있습니다.정확하게 말하자면 가운에 Left Content와 Right Content를 수평으로 위치 시키는 방법이 세 가지 있다고 볼 수 있습니다. 먼저 전체 레이아웃을 감쌀 wrapper 요소를 만들고 그 안에 header, footer, content 영역을 만듭니다. wrapper의 역할은 전체 레이아웃을 화면의 가운데 위치 시키며, 그 안의 컨텐츠가 위치할 좌표의 기준을 만들어주는데 있습니다. .wrapper{ margin: 0 auto; width:1200px; }marg..

보통 레이아웃을 짤 때 왼쪽은 고정이고 오른쪽 영역이 가변인 경우가 많다.대부분 좌측에 LNB가 위치하고 우측에 컨텐츠 영역이 위치하기 때문이다. 하지만 가끔 반대의 경우로써 왼쪽이 가변이고 오른쪽이 고정영역인 경우가 생긴다.예를들면 사이드 바를 오른족에 위치시키는 경우가 그렇다. 필자의 경우 Input 태그 옆에 아이콘이 따라 붙는 경우가 필요했기 때문에 이와 같은 구현을 시도했다.이런경우 보통 absolute로 아이콘을 띄우면 되지만, 상황이 꼭 그렇게 깔끔하게 되지 않기 때문에 다른 방법이 필요했다. 일단 만들고자 하는 레이아웃은 아래와 같다. 이미지는 경로가 맞지 않아 저렇게 보이는 것이며 중요하진 않다.여기서 주목해야 할 것은 아이콘 영역(우측)은 23px의 고정 너비를 갖고, 왼쪽 input태..

Example : Square body { margin : 0; padding: 0; background: #d35400; } .sk-cube-grid { width: 100px; height: 100px; margin: 400px auto; } .sk-cube-grid .sk-cube { width: 33%; height: 33%; background-color: #ddd; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } .sk-cube-grid .sk-cube1 { -webkit-animation..

연습을 위해, 네이버까페 홈화면의 레이아웃을 잡아봤다. 아직 미숙하지만 일단 겉모양이라도 만들어보려고 했다..개념이 덜잡힌 상태라 여러가지 의문점이 생각났는데, 이는 다음과 같다. - semantic을 위해 , 와 같은 HTML5 태그들을 굳이 사용해야 하는가? DIV로 대체하면 안되는가?-> 시맨틱 웹을 구현하기 위해서는 가능한 의미적인 마크업을 사용하는 것이 좋다. 물론 div를 쓰나 section을 쓰나 구현은 가능하다. 하지만 시맨틱을 어디까지 신경쓸 것인지에 대한 개인의 선택에 따라 사용하면 된다.- 브라우저를 확대/축소할 경우 레이아웃이 깨지는데 inline-block이 아닌 다른 방법을 사용해야 하는가? -> inline-block으로 레이아웃을 잡을 수 있다. 하지만 브라우저의 크기에 따라..