일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 로딩
- 애니메이션
- 자바스크립트
- 아이폰
- apple
- 배경화면 모음
- 에어팟 짝퉁
- 기초
- Tag
- 갤러리
- 노래 넣기
- acro i8
- css
- 에어팟
- 연산자
- animation
- java
- 웹페이지
- 핸드폰 배경화면
- 짱구 배경화면 모음
- html
- 백그라운드 재생
- 배경화면
- 헤이 시리
- Loading
- JavaScript
- 에어팟 2
- 애플
- keyframes
- Today
- Total
IT 블로그
CSS Flip 애니메이션 - 2 마우스 오버시 아래와 같이 뒤집어져 뒷면에 있는 콘텐츠가 보이는 애니메이션을 css로 만들어 보았다. 엄청 간단하게 구현 가능하다. 앞면 뒷면 구현하기 먼저 아래와 같이 기본 레이아웃을 잡아주자 뒤집을 요소와 그 요소를 감싸는 부모 요소가 있어야한다. 뒤집을 요소안에 앞,뒷면을 나누고 그 안에 원하는 콘텐츠를 넣으면 된다. 123456 앞면 뒷면 이제 스타일을 지정해주자. flip-box의 css는 다음과 같다. 가로 세로 사이즈는 원하는대로 지정하면 된다. 여기서 투영점 perspective는 3D를 위한 속성이다. 쉽게말해 원근감이라고 생각하고 적당히 조절해보자 12345.flip-box { width: 300px; height: 400px; perspective: ..
CSS Hover 애니메이션 - 1 css 호버효과, 가상요소 ::before, ::after를 활용하여 아래와 같은 호버효과를 css로 만들어 보았다. 만들어보자 이제 직접 만들어 보자 엄청 간단하다. 먼저 호버할 상자를 아래와 같이 만들어주자 123 그리고 상자에 원하는 css를 적용시켜 보자 자식 요소인 검정색 커버 위치조정을 absolute로 해야하기 때문에 position: relative를 써주자 12345678.image-box { width: 200px; height: 200px; padding: 20px; background: skyblue; box-sizing: border-box; position: relative;} image-box에 ::after를 이용하여 검정색 커버를 씌워고 ..
Form 태그 form 태그는 사용자가 입력한 정보등을 서버나 다른 페이지로 전송하는 역할을한다. 전송을 위해서는 action지정과 submit버튼이 필요하며 기본적으로 전송방식에는 get, post가 있다. 속성 - method : 전송방식(get, post) - action : 전송할 주소 사용법 1234 전송 버튼타입을 지정하지 않아도 자동으로 submit로 지정된다. Get, Post 사용 get · 보안에 취약 · 데이터 크기 제약 post · get에비해 보안 좋음 · 데이터 크기 제약 x 로그인을 한다고 예시를 들어보자 https://wmsttks.tistory.com/id=user1&pw=1234 get방식은 위와같이 아이디와 비밀번호가 url상에서 노출된다. 하지만 post방식은 url에..
Input 태그 - 사용자에게 정보를 입력받을 수 있게 해주는 태그 속성 - type : 입력할 타입 ex) text, number, hidden, radio, checkbox - name : form 전송시 넘겨줄 이름 - required : form 전송시 빈칸 방지 - readonly : 입력하지 못하게 막아줌 - hidden : 보이지 않게해줌 사용법 1 select 태그 - 미리 정해둔 여러 옵션을 선택할 수 있게 하는 태그 속성 (select태그는 주로 아래 두 속성만 사용) - name : form 전송시 넘겨줄 이름 - required : form 전송시 미선택 방지 사용법 1234 남성 여성 textarea 태그 - 줄바꿈이 불가능한 input 태그와달리 줄바꿈 가능하고 텍스트 입력이 보..
Inline - inline : 자신의 가로 크기만큼 가로 영역을 차지함 (줄바꿈 효과 x)- 종류 : span, b, i, code, em, strong, a, img, button 등이 있다. Block - block : inline 태그와 달리 가로 전체 영역을 차지함 (줄바꿈 효과)- 종류 : div, p, h1~6, footer, from, ul, ol, table, video 등이 있다. * block 태그 안에는 inilne 요소가 올 수 있음* inline 태그 안에는 block 요소가 올 수 없음
1. title 1사이트 제목 2. link 1 3. header 1해당 태그 안의 부분의 본문의 간판이라는 것을 의미 4. article 1태그 안의 부분이 본문이라는 것을 기계에게 명시해준다. 5. span 1inlin 태그로 레이아웃을 설정할 때 쓰임 6. p 1block태그로 주로 글 본문에서 줄바꿈 을 할때 사용 7. div 1block 태그로 레이아웃 설정할때 8. pre 1안에 있는 글은 사용자가 설정한 줄바꿈 등이 그대로 9. h1 ~ 6 1본문의 제목을 나타냄 10. a 1페이지 이동시 11. form 1태그 안에 등으로 정보를 보낼때 사용 12. nav 1사이트 네비게이션 역할을 한다 13. footer 1웹 문서 맨 아래쪽에 있으며 저작권, 연락처등으로 구성된 영역이다