전체 글(295)
-
Day65 - [css]부트스트랩.폼 , 모달, Carousel
이번에는 부트스트랩의 폼과 모달을 알아 봅시다. 폼 부트스트랩 에서 제공하는 style 들은, 전부 w3schools.com 에서 확인 할 수 있습니다. 그 중에서, 폼을 한번 알아보도록 하겠습니다. 폼의 기능은 html 에서 사용하는 태그고, 부트스트랩은 해당 폼에 디자인을 입히는 건데요 w3schools.com 에 들어가서, 원하는 형태를 골라서 Example 를 복사해서 가져오면 됩니다. ※아래의 초록색 박스에 있는 "Try it Yourself" 를 클릭해서, 어떻게 작용하는지도 바로 알 수 있습니다. 모달 모달창은 화면에 창을 숨겨두고, 버튼클릭시 숨겨진 창을 보여주는 형태로 동작 합니다. 모달창 같이 동적인 기능을 사용하라면 jquery라이브러리 참조가 필요 합니다. 저는 부트스트랩 을 다운로..
2021.05.19 -
Day64 - Quiz ( 레이아웃 )
아래의 사진처럼 만들기. Apple Store 및 메뉴 부분까지 헤더로 만들고, 헤더를 fixed 를 통해서, 스크롤을 내려도 위에 고정되게 만듦. 양 옆에 있는 작은 이미지들 4개 도 fixed 를 통해서, 스크롤을 내려도 양 측에 고정되게 만듦. top 메뉴1 메뉴2 메뉴3 메뉴4 iPhone iPod iPad iMac
2021.05.18 -
Day64 - [css]부트스트랩 . 그리드
이번에는 부트스트랩 에 대해서 알아 봅시다. 부트스트랩 부트스트랩 은 이미 만들어져 있는 css 스타일을 이용하는 방법 입니다. 부트스트랩 을 사용하기 위해서는, 먼저 부트스트랩 을 다운로드 받아 줍니다. http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드 bootstrapk.com 부트스트랩 을 다운로드 받았으면, 해당 폴더를 전부 프로젝트 내로 가져 옵니다. 사용하고 싶은 곳에서 해당 파일들을 link or import 로..
2021.05.18 -
Day64 - [css] 미디어쿼리
이번에는 미디어 쿼리에 대해서 간단하게 알아 봅시다. 미디어 쿼리 css 를 사용해서 프론트엔드( 화면에 보여지는 부분. UI ) 를 만들면서, 인터넷 브라우저 창의 크기를 늘리기도 하고, 줄이기도 해 보셨을 겁니다. 그리고 인터넷 창을 pc 뿐 아니라 핸드폰 , 태블릿pc 를 이용해서 켜보신 적이 있을 겁니다. 각각의 기기에서 인터넷 창이 화면에 맞게 적용되게 하기 위해서 미디어 쿼리를 사용합니다. 미디어 쿼리는 안에 @media ( 화면크기 ) { 실행내용 } 을 사용 합니다. 기기가 바뀌면 화면크기 도 변하는 거겠죠? 그렇기 때문에 화면크기를 가지고 디자인을 해주면 됩니다. pc에서 간단하게 화면크기를 변화시키는 방법으로는 , F12 를 누르고 아래의 버튼을 클릭 합니다. 이렇게 하면, 휴대폰 , ..
2021.05.18 -
Day64 - [css]레이아웃(포지션)
이번에는 css 레이아웃을 만들때, 사용하는 포지션을 알아 봅시다. 포지션 포지션은 html 에서, x, y 축을 지정해서 상자 or 컨텐츠 를 배치하는 방법 입니다. 포지션에서 알아보고 갈 것은 크게 absolute, relative, fixed 가 있습니다. 포지션에서 상자 또는 컨텐츠를 이동시킬 것에 absoulte 를 , 기준이 되는 부모요소에 relative 를 넣어 줍니다. 포지션을 사용할 때는 항상 left/right , top/bottom 을 지정 해주어야 합니다. 아래와 같이, 상자들을 만들어 주었을 때, 포지션2를 움직여 볼 건데요 포지션2 인 inner2 에 absoulte 를 넣어 줍니다. 그리고, 좌표의 기준이 되어 줄 부모요소 content 에 relative 를 넣어 줍니다. ..
2021.05.18 -
Day63 -[css]플롯 퀴즈
아래의 사진 처럼 만들 것. 아래의 사진 처럼 만들 것. 위의 사진을 만들기 위해서는 블럭을 몇개 만들어야 하는지 개념이 필요함. 아래의 블럭 참조. 아래의 사진 처럼 만들 것. 1개만 만들면, 복붙 이기 때문에, 1개의 코드만 올림.
2021.05.16