이번에는, css를 하면서 마지막 정리를 해 봅시다. 1. block vs Inline css를 하면서, blcok 요소와 Inline 요소의 차이점을 알아 두어야 합니다. block는, 공간(박스)이 생긴다고 생각을 하시면 될 거 같아요. block 안에는 block , Inline 둘 다 올 수 있습니다. block은 크기를 가질 수 있습니다. Inline은, 공간 없이, 그냥 어떤 스타일을 나타 냅니다. ex) ..... inline 안에는 inline 만 올 수 있습니다. 크기를 가질 수 없습니다. 2. font-size, font-weight, 웹폰트 font의 크기와, 사이즈 를 조절할 수 있고, 웹폰트를 가져다가 쓰는 방법도 있죠. 웹폰트는 @import 또는 link 를 통해서 가져올 수 ..

학원에서 css 를 배우고, 디자인실습을 한지 4일차가 되었습니다. 그 동안, 그리고 오늘까지 한 걸 한번 알아야 할 것들만 한번 추려서 정리해 보겠습니다. 1. 부트스트랩 의 스타일을 가져와서, 속성을 변경 및 지정하는 것으로 쉽게 디자인 가능 부트스트랩에서 만들어져 있는 스타일을 이용할 때, 변경하고 싶은 것이 있다면, 해당 태그 또는 class 이름을 이용해서, 속성을 변경 및 지정 할 수 있음. 2.. textarea 의 resize vertical. textarea 를 만들게 되면, 사용자가 임의로 외곽을 드래그 하면, 크기를 조절할 수 있습니다. 이를 방지하려면, resize 속성을 사용하면 됩니다. none -> 금지. vertical -> 세로크기만 조절 가능. 정도 알면 될 것 같습니다...

이번에는 css의 transition 에 대해서 알아 봅시다. transition transition 은 변하도록 해주는 속성 인데요, 예를 들어서, 마우스를 가져다 대면, 그래프가 바뀐다 거나, 특정 입력란에 포커스를 하면, 그 입력란의 크기가 변한다거나 하는 .... transition : css속성, 시간, 딜레이 라고 생각을 하시면 되겠습니다. 예제. 위와 같이, 이러한 텍스트 에리어 가 있을 때, 아래와 같이 css 스타일을 적용해 주면 됩니다. .replay-content > .form-text { resize: vertical; width: 100%; min-height: 100px; transition: min-height 2s ease-in-out; } .replay-content > ...

오늘도 역시나 디자인실습을 계속 이어갔습니다. 오늘은 디자인실습 을 진행하면서, opacity 라는 걸 배웠는데요 opacity opacity 는, 투명도 라고 생각을 하시면 됩니다. 0 ~ 1 까지의 값이 있습니다. 예를 들어서, 특정 부분을 숨겨두었다가, hover 등을 했을 때, 투명도를 없애서 보여주게 하는 겁니다. 위의 코드는, 해당 이미지에 마우스를 올렸을 때, ">" 가 파란색 "상세보기>" 로 바뀌도록 한 것 입니다. 이 외의 디자인 실습 한 코드는 아래에 올림. - 화면에 보여지는 html 파일 - 메인 예약 QNA 회원메뉴 Sign Up Login Previous Next 오늘의 발견 쿠팡이 엄선한 가장 핫한 상품! 상세보기 상세보기 상세보기 상세보기 상세보기 상세보기 상세보기 상세보기..

약 4~5일 동안 디자인실습 을 하기로 했습니다. 디자인실습은 딱히 직접 해보거나 그런건 아니고, 선생님이 디자인을 어떻게 하는지 같이 해보고, 나중에 참조해서 직접 해보라고 하셨는데요. 0부터 시작하기에는 디자인 하는데 시간이 오래 걸리니, 특정 홈페이지를 클론으로 만들기로 했습니다. ( 기능구현 x ) 그 중에서 여러가지 배울 점 들이 있어서, 한번 포스팅 해보겠습니다. 1. 특정 페이지의 헤더 , 본문 , 푸터 를 나누어서 생각을 해라. 예를 들어서, ncs.go.kr 의 디자인 클론을 만든다고 가정을 하면, 아래의 빨간색 박스가 헤더 겠죠? 그리고, 이러한 헤더는 어떤 홈페이지 에서는 fixed 로 되어 있어서 스크롤을 내려서 따라 오기도 하구요. 어디까지가 헤더인지 감이 안올 때는, f12(개발..

이번에는 부트스트랩의 폼과 모달을 알아 봅시다. 폼 부트스트랩 에서 제공하는 style 들은, 전부 w3schools.com 에서 확인 할 수 있습니다. 그 중에서, 폼을 한번 알아보도록 하겠습니다. 폼의 기능은 html 에서 사용하는 태그고, 부트스트랩은 해당 폼에 디자인을 입히는 건데요 w3schools.com 에 들어가서, 원하는 형태를 골라서 Example 를 복사해서 가져오면 됩니다. ※아래의 초록색 박스에 있는 "Try it Yourself" 를 클릭해서, 어떻게 작용하는지도 바로 알 수 있습니다. 모달 모달창은 화면에 창을 숨겨두고, 버튼클릭시 숨겨진 창을 보여주는 형태로 동작 합니다. 모달창 같이 동적인 기능을 사용하라면 jquery라이브러리 참조가 필요 합니다. 저는 부트스트랩 을 다운로..