이번에는 엘리먼트 속성 및 css 속성을 변경하는 방법을 알아 봅시다. 엘리먼트 속성 변경 엘리먼트는 다른 말로 태그 라고도 할 수 있겠습니다. 위와 같이 태그가 있을 때, 하위 속성(id, readonly 등등)을 얻어오려면 어떻게 해야 할까요? 바로 attr 함수를 사용하면 됩니다. 이 attr 함수는 두번째 매개변수로 값을 주면, 첫번째로 준 속성이 두번째로 준 값으로 변경 됩니다. 또한, 여러 속성들을 한번에 변경할 수도 있습니다. 아래처럼요 {} 를 이용하면 됩니다 ! css 속성 변경 기존에 java script 에서는 css에 접근하려면 .style 을 써서 접근을 했었습니다. 제이쿼리 에서는 css 함수를 사용합니다. css 함수도 위의 attr 함수처럼, 첫번째 매개변수만 전달하면, 해당..

이번에는, 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(개발..