일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 일본
- 파이썬문자열
- hover style
- 혼자여행
- 나라여행
- 일본여행
- 혼자공부하는파이썬
- input style
- #파이썬
- 파이썬
- 나라 사슴
- 비쥬얼스튜디오코드
- 혼공파선택미션
- input
- Python
- 파이썬혼공
- 파이썬공부
- 조건문
- 혼공파
- 일본 사슴
- 파이썬혼자공부하기
- 혼공단
- 호버스타일
- 일본나라여행
- 일본 관광
- 한빛미디어
- 파이썬조건문
- 혼공파미션
- 비쥬얼스튜디오코드설치
- 일본 나라
- Today
- Total
목록HTML&CSS (22)
Eveningstar
HTML Language Code Reference . . . lang 속성 - 웹문서의 전체 혹은 일부에 언어를 지정하는 속성 - ISO language code 정의에 따라 구분짓는다. 관련 문서 -> https://www.w3schools.com/tags/ref_language_codes.asp ISO codecountry language ko korea 한국어 en US/USA english ar Arab Arabic as Assamese bg Bulgaria Bulgarian cs Czech Czech da Denmark Danish de Germany German el Greece Greek es Spain Spanish et Estonia Estonian fa Iran Persian (Far..
참고 _ 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 효..
박스영역에 선 그리기*프리밴더를 배제하고 작성하였으니 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..
크롬에서는 부모값의 border-radius와 overflow:hidden이 잘 먹힌다...그런데 사파리에서는 자식이 부모 바깥으로 삐져나오고 있었다! 이런 식으로 자식 태그가 부모 태그를 뚫고 나와버리는,,,,, 서툰 영어로 구글신께 도움받음... https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b 부모태그에아래css를 추가해주었더니 오버히든 속성이 잘 먹는다^^! -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0);