아래의 사진처럼 만들기. 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 를 넣어 줍니다. ..

아래의 사진 처럼 만들 것. 아래의 사진 처럼 만들 것. 위의 사진을 만들기 위해서는 블럭을 몇개 만들어야 하는지 개념이 필요함. 아래의 블럭 참조. 아래의 사진 처럼 만들 것. 1개만 만들면, 복붙 이기 때문에, 1개의 코드만 올림.

이번에는 css 플롯에 대해서 알아 봅시다. 플롯 float 는 띄우다 라는 뜻을 가지고 있습니다. float 는 보통 이미지 or 텍스트 를 정렬하기 위해서 사용합니다. 예를 들어서, 왼쪽으로 정렬하거나 오른쪽으로 정렬할 때 사용하는데, 띄워서 정렬 합니다. 즉. 블럭요소 or 인라인요소 를 같은 줄에 배치할 수 있도록 합니다. 박스를 10개 만들어 봅시다. 이렇게 세로로 쌓여진, 박스를 float 를 사용하면 아래처럼 됩니다. 그런데, 부모요소 인 boxList 를 16.6666% 로 나누면 6 입니다. 즉 박스가 6개씩 정렬되어야 하는데 5개만 쌓였죠? 그 이유는, border 도 박스의 크기에 포함이 되기 때문 입니다. 이를 해결하기 위해서, 부모요소에는 overflow : hidden 속성을, ..