교육이야기 썸네일형 리스트형 웹개발 웹언어 CSS 웹꾸미기 디바이스모드, 미디어 쿼리 디바이스 모드를 통해 각종 기기의 웹 사이즈를 제공 받을 수 있습니다. 설명에 앞서 알아두면 유용한 사이트를 소개해 드리겠습니다. 1. 네이버 디벨로퍼스 https://developers.naver.com/main/ NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 위처럼 개발자 도구 창을 여는 방법은 F12를 해당 홈페이지에서 누르면 위 사진의 오른쪽과 같은 창이 열리는 것을 확인 할 수 있습니다. Responsive 탭을 클릭하면 여러 기기들이 확인 됩니다. 항목을 클릭하면 사이즈.. 더보기 웹개발 웹언어 CSS 웹꾸미기 반응하는 웹, 반응형 웹 디자인, 오픈소스 사이트 공유 반응형 웹 디자인 개요 PC, 노트북, 스마트폰 등에서 최적화하여 웹 사이트를 개별로 만들기에는 많은 시간과 노력이 소모되기 때문에 브라우저 환경이 다양하게 바뀜에도 웹사이트의 내용을 다양한 화면 크게에 맞도록 표시할 수 있도록 구현하는 것이 반응형 웹 디자인 입니다. ! 알아두세요 ! 반응형 웹은 CSS3을 지원하는 최신형 브라우저에서만 사용할 수 있습니다. 반응형 웹 디자인을 위해서는 선행으로 다양한 브라우저 환경에서 알맞게 내용을 표시할 수 있어야 하는 조건을 갖추어야 합니다. 이를 위해 알아 두어야 하는 것이 뷰포트! 기기별 뷰포트의 영역이 다 다르기 때문에 뷰포트에 대해 잠시 알아보도록 하겠습니다. 기기 타입 범위 스마트폰 small to large handset 1904px 뷰포트를 지정하는 .. 더보기 웹개발 웹언어 CSS 웹꾸미기 스타일 변형 - 애니메이션 애니메이션 속성 애니메이션 속성을 이용 - CSS3의 애니메이션 속성을 사용하면 자바스크립트를 사용하지 않아도 웹 요소에 애니메이션을 추가할 수 있습니다. 비주얼 스튜디오에서 애니메이션 관련 하여 요소를 입력하려면 위와 같이 다양한 항목이 존재합니다. 각 항목별 요소와 해석에 대해 알아보겠습니다. 요소 해석 animation-delay 로드된 후 애니메이션이 시작될 때 까지의 시간 animation-direction 애니메이션 움직임 방향 설정 animation-duration 움직임 시간설정 animation-name @Keyframes로 설정한 중간 상태를 지정 animation-timing-function 움직임의 속도 설정 animation-fill-mode 애니메이션이 끝난 후의 상태를 설정 a.. 더보기 웹개발 웹언어 CSS 웹꾸미기 스타일 변형 트랜지션 트랜지션이란? 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것. 종류 해석 transition-property 트랜지션의 대상을 지정 transition-duration 실행할 시간 지정 transition-time-function 실행 형태 지정 transition-delay 지연 시간 지정 위와 같은 요소를 사용하여 여러 출력물을 얻을 수 있습니다. 예시) 트랜지션 세부항목 transition-property: all; all 값, 혹은 생략할 경우 모든 속성이 대상이 됩니다. transition-property: background-color; 해당요소의 배경색에 트랜지션 적용 transition-property: width, height; 해당 요소의 너비와 높이에 트랜지션 적용 tran.. 더보기 웹개발 웹언어 CSS 웹꾸미기 가상 클래스 요소 적용하기(선택자) 선택자 적용 방법 예시) section 안의 p 요소를 모두 포함하여 출력물을 얻을 수 있습니다. 자식요소에만 적용 하려면 section > p { } 형제요소에 스타일을 적용하려면 아래의 방법을 이용합니다. p요소중 첫 번째 p요소에만 선택하려면 h1 + p { } 모든 p 요소에 적용하려면 h1 ~ p { } 특정 속성이 있는 요소 선택 방법 종류 해석 [속성] 예시) a[href] { } a 요소중 href 속성값이 있는 요소만 적용 [속성 = 값] 예시) a[target = _blank] { } a 요소중 target 속성값이 _blank 인 것만 선택 적용 [속성 ~= 값] 예시) [class ~= botton] { } 여러 속성값 중에서 botton 값이 포함된 요소 선택 [속성 |= 값] 예.. 더보기 웹개발 웹언어 CSS 웹꾸미기 그라데이션 효과 그라데이션 효과 주기 그라데이션을 위한 코드 linear-gradient 예시) 블랙의 배경화면에서 그라데이션의 방향을 임의로 정해주고 그라데이션의 색상을 블랙에서 화이트로 변경을 주도록 해보겠습니다. 방법은 두가지 입니다. 위의 첫번째 이미지에서 background 영역에 linear-gradient 속성값으로 0deg, black, white 0deg = 각도를 기준으로 속성값을 입력한 내용입니다. 위의 두번째 이미지에서 background 영역에 Linear-gradient 속성값으로 to top, black, white to top = to (그라데이션을 줄 위치) 에 속성값을 입력한 내용입니다. 각도는 표현하기가 어렵지 않습니다만 직접 to 에 입력해야 하는 경우에는 이야기가 다릅니다. left.. 더보기 웹개발 웹언어 CSS 웹꾸미기 배경 화면 배경 이미지 배치 배경 이미지 주소 연결 예시) backgroud-image: url('이미지파일 경로') 사용 예시를 보면 배치할 곳이 body 라면 아래와 같이 입력한 뒤 body 칸을 작성해 주시면 됩니다. 배경 이미지를 지정한 뒤 다양한 효과를 줄 수 있습니다. background-position, background repeat 속성을 이용하여 위치와 배경을 반복적으로 부과하여 배경을 전체적으로 화면에 채울 수 있습니다. 각각 속성을 입력할 때 선택할 수 있는 항목이 다양하게 보입니다. 배경을 부과할 이미지를 생각하고 지정하면 이미지를 배경화면에 알맞게 배치할 수 있습니다. 배경 이미지를 어디까지 적용할 지 범위를 조절 할 수 있습니다. background-origin 속성을 이용합니다. con.. 더보기 웹개발 웹언어 CSS 웹꾸미기 디자인 입히기 레이아웃, 위치지정 Margin, Border, Padding 웹 페이지의 F12를 눌러 보면 웹페이지를 어떻게 나누어 보고 있는지 확인 할 수 있습니다. 위에서부터 margin 영역으로 해당하는 속성 내용에 대하여 알아보도록 하겠습니다. 일단 위 그림에서 보는 것과 같이 모은 영역에는 top, right, bottom, left 즉 위치가 존재합니다. 기본속성인 margin을 입력 방식은 아래와 같습니다. 1) margin: 20px; 2) margin: 50%; 위와 같은 방식으로 입력하게 되면 1)의 방식처럼 고정형 2)의 방식처럼 창크기에 따라 %로 출력이 가능하게 됩니다. margin, padding, border 의 기본형태는 위와 동일합니다. 각 속성별 세부사항 margin: 10px 20px 30px 40px.. 더보기 이전 1 2 3 다음
