목록전체 글 (116)

Eveningstar

1.필수요소

https://kr.vuejs.org/v2/guide/(공식 vue 가이드) 템플릿 구문을 사용.- 선언적으로 dom에 데이터를 렌더링 {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) 안녕하세요 Vue! id app 안에 {{ message }} 를 삽입 + 응용 내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다! var app2 = new Vue({ el: '#app-2', data: { message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다' } })v- bind 속성으로 특수한 동작을 추가. v-bind 속성은 디렉티브(v- 접두사가 붙어있으면 특..
vue.js 2019. 2. 2. 16:51
[DAY1]일본 나라 -3. 요시키엔 정원(사진용량주의)

day1 이동경로 [인천국제공항 -> 간사이국제공항 -> jr나라역 -> 나라 컴포트 호텔 -> 가스가타이샤 -> 이월당&삼월당 -> 쥬에누 -> 요시키엔 정원 ] [ 요시키엔 정원 ] 주소: 60-1 Noboriojicho, Nara, Nara Prefecture 630-8213 일본 운영시간 : 9:00 ~ 4:30 나라현청 소유의 정원 *외국인은 간단한 설문지 작성과 여권만 있으면 무료입장 가능! 입구 표지판이 너무 아담ㅎㅎ 요시키엔 정원은 이스이엔 정원 바로 옆에 있는데그냥 슝 지나칠뻔했다ㅎㅎ 입구 정면에 매표소가 있는데, 일어로 짧게짧게 대답했는데,,,내 일어가 맘에 안드셨는지 영어로 설명을 촤라락해주셨는데아주머니의 유창한 영어에 너무 놀랐음ㅋㅋㅋㅋ 매표소에서 오른쪽으로 돌면 바닥 곳곳에 보이는..
여행/일본 2019. 2. 2. 16:10
다양한 호버 효과들

참고 _ https://codepen.io/nxworld/pen/ZYNOBZ Html 구조 [ CSS ] 1. Zoom In 기본 a img {transform: scale(1);transition: .3s ease-in-out; } hover시 a:hover img {-webkit-transform: scale(1.3);transform: scale(1.3); } - transform: scale(값) 을 통해 zoom 효과 부여 2. Zoom In 2 기본 a img {width: 350px; //width값을 지정height: auto;transition: .3s ease-in-out; } hover시 a:hover img {width: 450px; } - width값 크기 변경을 통해 zoom 효..
HTML&CSS 2019. 1. 28. 18:19
[hover효과] draw line above box

박스영역에 선 그리기*프리밴더를 배제하고 작성하였으니 jsfiddle가서 복붙해서 쓰세여 1. 마우스 호버시 해당 이미지 zoom In효과2. 이미지 레이어위에 다른 색레이어 겹침효과3. 이미지 테두리에 띠가 둘러지는 효과 디자인 참고) cj E&M 홈페이지 호버시 1) html 구조 - module(부모)값 안에 md-cont로 한번 더 감싼뒤 a를 감싸준다.(이중포장) 2) css 2-1) hover시 zoom In 123456789.module { transition: transform 1s ease 0s; }.module:hover .md-cont > a, .module:hover .md-cont > img { animation-delay: 0!important; transform: scale(1..
HTML&CSS 2019. 1. 28. 15:47
Prev 1 ··· 6 7 8 9 10 11 12 ··· 29 Next