분류 전체보기 (29) 썸네일형 리스트형 window.open 중앙 정렬 및 오른쪽 정렬 안녕하세요 오늘은 window open 중앙정렬 및 오른쪽 정렬에 대해 알아보겠습니다. 일단 window open의 옵션은 - channelmode=yes|no|1|0 : 전체화면으로 창이 열립니다. ( IE에서만 동작) - directories=yes|no|1|0 : 사용 X - fullscreen=yes|no|1|0 : 전체화면 모드( IE에서만 동작) - height=pixels : 창의 높이 지정 - width=pixels : 창의 넓이 지정 - left=pixels : 창의 화면 왼쪽에서의 위치 지정( 음수 사용 불가 ) - top=pixels : 창의 화면 위쪽에서의 위치 지정( 음수 사용 불가 ) - location=yes|no|1|0 : 주소 표시줄 사용여부 지정( opera에서만 동작 ).. 모바일 viewport 설정 안녕하세요. 오늘은 모바일 viewport 설정을 알아보겠습니다. viewport 설정 viewport 설정이 필요한 이유는 모바일 브라우저에서 웹 페이지를 브라우징 할 때는 데스크탑 환경처럼 웹페이지 전체를 자연스럽게 브라우징 할 수 있도록 풀브라우징을 지원합니다. 그렇기 때문에 웹페이지를 모바일에서 보면 전체적인 페이지가 축소되어 보여 가독성이 떨어지게 됩니다. 웹페이지를 모바일로 보게 되면 기본 viewport는 980px이어서 이로인해 작게 보입니다. 그래서 viewport를 설정하게 되면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율에 맞게 볼 수 있습니다. 사용방법 head 태그 사이에 다음과 같이 코드를 입력합니다. -width=device-width: 페이지의 너비를 기기의 스크린 너.. CSS animation - Keyframes 안녕하세요. 오늘은 CSS animation Keyframes을 알아보겠습니다. CSS transition으로도 애니메이션을 구현할 수 있지만 Keyframes은 애니메이션이 동작하는 중간에도 변화를 줄 수 있다는 차이점이 있습니다. 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 부릅니다. @keyframes - 애니메이션 지점 설정하기 @keyframes 이름 { 선택자 { 스타일 } } animation-name - 애니메이션 이름 정하기 위에 keyframes 속성에서 지은 이름을 입력합니다. div{ animation-name: circle; } animation-duration - 애니메이션 실행 시간 설정하기 얼마동안 재생할 것인지 설정합니다. 초(s)나 밀리초(ms.. CSS3 Transition 안녕하세요. 오늘은 CSS Transition에 대해 알아보겠습니다. CSS Transition 은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 속성입니다. CSS transitions는 여러분이 어떤 속성을 움직이게 할지, 언제 애니메이션이 시작할지, 트랜지션을 얼마나 지속할지, 그리고어떻게 트랜지션을 실행하는지 결정하게 합니다. transition-property 트랜지션을 적용해야 하는 CSS 이름을 명시합니다. 쉼표(,)로 구분하여 여러개의 속성을 동시에 지정할 수 있습니다. transition-duration 트랜지션이 일어나는 지속 시간을 명시합니다. 기본값은 0이기 때문에 이 값을 표시해 줘야 부드러운 변화를 볼 수 있습니다. 음수값을 지정하게 되면 0으로 인식됩니다. div{ tra.. 외곽선 그리는 애니메이션 안녕하세요. 오늘은 CSS3 transition 으로 외곽선을 그리는 다양한 애니메이션 효과를 구현해 볼 예정입니다. CSS3 transition 속성은 CSS 속성을 변경할 때 애니메이션 속도를 조절할 수 있습니다. 먼저 outline이라는 클래스를 갖는 div를 하나 만듭니다. 그안에 빈 span 태그 4개를 넣어줍니다. 각각의 span 태그 하나 하나가 상 하 좌 우 외곽선이 됩니다. div 에 width 랑 height를 부여하고 margin auto를 줘서 가운데 정렬해웁니다. .outline{position: relative; width: 150px; height: 150px; margin: 50px auto; border: 1px solid #ccc;} 그 안에 span 태그들은 positi.. 이전 1 2 3 4 다음
