웹언어 썸네일형 리스트형 웹개발 웹언어 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 웹꾸미기 그라데이션 효과 그라데이션 효과 주기 그라데이션을 위한 코드 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 웹꾸미기 디자인 입히기 텍스트편 #2 텍스트 스타일 속성 정리 1. 텍스트에 색입히기 텍스트에 색을 입히는 방법은 앞에서도 설명한 바가 있습니다만 정리를 위해 한번 더 설명드리도록 하겠습니다. 아래와 같이 스타일 적용부분에 색을 입력 후 마우스를 해당 색상에 두고기다리시면 색상을 직접 골라 적용할 수 있으니 참고하시면 되겠습니다. 2. 텍스트 정렬하기 텍스트를 정렬하는 방법으로 태그 안에 .입력 내용 { text-align을 입력하고 정렬할 내용으로 속성을 입력합니다. } 참고로 * { 속성값 } 으로 입력하면 전체 적용입니다. body 부분에서 개별로 입력할 경우 class="입력 내용" 으로 적용하여 개별 출력 가능합니다. 예시) 왼쪽정렬 속성별 해석내용입니다. center 가운데 정렬 end 줄끝 정렬 justify 양쪽 정렬 left.. 더보기 웹개발 웹언어 CSS 웹꾸미기 스타일 디자인 다양한 방법으로 비주얼 스튜디오에서 HTML양식으로 문서를 작성했다면 이제 HTML 양식에 CSS 를 더해 웹문서의 스타일을 변경하고 디자인을 입혀 다양한 시각으로 사용자를 안내하는 웹페이지의 역할을 할 수 있도록 해보겠습니다. 먼저 구글의 Web Developer 확장 기능을 설치하여 봅시다. 이 기능을 활용하면 디자인과 스타일을 입히기 전의 HTML양식과 Google웹페이지에서 기본으로 제공하는 스타일의 원초적인 언어만으로 구성된 페이지의 모습을 확인할 수가 있습니다. 구글에서 Web Developer 확장기능을 검색하시고 원래 하단에 Chrome 추가라고 나옵니다. 저는 설치를 완료했기에 삭제로 나오니 추가 버튼을 누르시면 되겠습니다. 추가 버튼을 누르면 아래와 같이 원형 톱니바퀴 모양이 확인이 되.. 더보기 웹개발의 기본 언어 HTML 멀티미디어 오디오 비디오 파일 태그 1. 오디오 파일 오디오 파일을 삽입하기 위해서 이용하는 태그는 입니다. 이미지 태그를 사용했을 때와 마찬가지로 src를 이용하여 경로를 알려주면 간단히 삽입이 가능합니다. 우선 실습을 위해 오디오 파일을 다운 받아주시거나 핸드폰에 녹음을 통한 오디오 파일을 받아주시면 실습 준비가 완료 됩니다. HTML 파일을 저장한 곳에 함께 두시면 번거롭게 모든 경로를 쓰지 않고 오디오 파일 이름만 경로에 기입하면 되기에 HTML파일과 같은 저장 위치에 오디오 파일을 두고 진행해 보도록 하겠습니다. controls를 사용하는 이유는 사용자가 재생버튼을 눌러야만 오디오를 재생할 수 있도록 하기 위함입니다. 만약 자동으로 오디오를 실행하려면 autoplay를 입력하면 됩니다. 하지만 현재 사용할 수 있는 대부분의 웹브라.. 더보기 이전 1 다음
