아래의 사진처럼 만들기. Apple Store 및 메뉴 부분까지 헤더로 만들고, 헤더를 fixed 를 통해서, 스크롤을 내려도 위에 고정되게 만듦. 양 옆에 있는 작은 이미지들 4개 도 fixed 를 통해서, 스크롤을 내려도 양 측에 고정되게 만듦. top 메뉴1 메뉴2 메뉴3 메뉴4 iPhone iPod iPad iMac

이번에는 부트스트랩 에 대해서 알아 봅시다. 부트스트랩 부트스트랩 은 이미 만들어져 있는 css 스타일을 이용하는 방법 입니다. 부트스트랩 을 사용하기 위해서는, 먼저 부트스트랩 을 다운로드 받아 줍니다. http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드 bootstrapk.com 부트스트랩 을 다운로드 받았으면, 해당 폴더를 전부 프로젝트 내로 가져 옵니다. 사용하고 싶은 곳에서 해당 파일들을 link or import 로..

이번에는 미디어 쿼리에 대해서 간단하게 알아 봅시다. 미디어 쿼리 css 를 사용해서 프론트엔드( 화면에 보여지는 부분. UI ) 를 만들면서, 인터넷 브라우저 창의 크기를 늘리기도 하고, 줄이기도 해 보셨을 겁니다. 그리고 인터넷 창을 pc 뿐 아니라 핸드폰 , 태블릿pc 를 이용해서 켜보신 적이 있을 겁니다. 각각의 기기에서 인터넷 창이 화면에 맞게 적용되게 하기 위해서 미디어 쿼리를 사용합니다. 미디어 쿼리는 안에 @media ( 화면크기 ) { 실행내용 } 을 사용 합니다. 기기가 바뀌면 화면크기 도 변하는 거겠죠? 그렇기 때문에 화면크기를 가지고 디자인을 해주면 됩니다. pc에서 간단하게 화면크기를 변화시키는 방법으로는 , F12 를 누르고 아래의 버튼을 클릭 합니다. 이렇게 하면, 휴대폰 , ..

이번에는 css 레이아웃을 만들때, 사용하는 포지션을 알아 봅시다. 포지션 포지션은 html 에서, x, y 축을 지정해서 상자 or 컨텐츠 를 배치하는 방법 입니다. 포지션에서 알아보고 갈 것은 크게 absolute, relative, fixed 가 있습니다. 포지션에서 상자 또는 컨텐츠를 이동시킬 것에 absoulte 를 , 기준이 되는 부모요소에 relative 를 넣어 줍니다. 포지션을 사용할 때는 항상 left/right , top/bottom 을 지정 해주어야 합니다. 아래와 같이, 상자들을 만들어 주었을 때, 포지션2를 움직여 볼 건데요 포지션2 인 inner2 에 absoulte 를 넣어 줍니다. 그리고, 좌표의 기준이 되어 줄 부모요소 content 에 relative 를 넣어 줍니다. ..