CSS/기본 이론 (15) 썸네일형 리스트형 [CSS] Chapter 15. Animation 1. 개요 Animation은 CSS3에 추가된 기능으로 오브젝트의 모양을 동적으로 변화시키는 '기능'을 한다. 본래 JavaScript를 통해 구현하던 동적인 움직임을 CSS에서 부여할 수 있다는 강점이 있으나 CSS3에서 지원하는 기능이므로 호환 브라우저가 상대적으로 적다. 물론 HTML5를 지원하는 브라우저라면 해당 기능을 대부분 지원하고 있으며, 지속적으로 브라우저가 발전하면 범용성 있게 사용할 수 있는 기술이므로 익혀두는 것을 권장한다. 2. 애니매이션을 적용하는 방법 CSS 애니매이션은 여느 스타일과 같이 특정 속성을 부터하는 것으로 진행한다. 사용하는 속성은 animation 속성이며 animation에 대한 자세한 값을 할당하여 동적인 움직임을 부여한다. 다만 animation은 상태의 변.. [CSS] Chapter 14. transform 의 사용 1. 모양을 변화시키는 transform transform은 html에서 보이는 화면에 적용한 객체를 변화시키는 역할을 한다. CSS3 이전에는 JavaScript를 이용하여 동적 움직임을 부여했지만 CSS3가 나온 이후로 CSS 명령어를 통해 객체의 움직임을 변화시키거나 애니메이션 효과를 줄 수 있다. transform은 객체의 모양을 자신이 원하는 대로 변화시킬 수 있고, 변화하는 시간을 설정하여 애니메이션 효과를 줄 수 있다. 하지만, 실제 디자이너가 이러한 동적 움직임을 직접 부여하거나 영상을 삽입하는 것이 더욱 쉬운 것이 사실이며, 애니메이션 특성상 반응에 따라 하나하나 변화하는 것을 관찰하는사용자가 있을리 만무하므로 ‘기능’ 정도만 인식하도록 하자. (YouTube에서 5초 광고 나오는 것도 .. [CSS] Chapter 13. HTML에 동적 움직임을 부여하기 1. :hover{} CSS에서 hover는 특정 id나 class, 태그 뒤에 붙여 마우스 커서가 위치했을 때의 모양을 변경하는 기능이다. 객체:hover{적용할 스타일} 마우스 커서의 위치에 따라 사진이 조금 커지는 등의 동작을 설정할 수 있다. NAVER 등에서 자주 사용되는 모양을 확인할 수 있으니 참고하자. 2. JavaScript: DOM 구조를 이용하여 태그의 style을 설정하기 CSS는 style에서 지정하는 모양에 따라 태그의 표현 방식을 조정하는 기법이다. 이러한 조정 과정에서 DOM 구조를 이용하면 특정 태그나 id, class의 모양을 변경할 수 있다. 객체.style.backgroundRepeat="no-repeat"; 위와 같이 style의 모양을 변경할 수 있는데, Css에서.. [CSS] Chapter 12. 배경 꾸미기 *{} #wrap{ width:600px; height: 600px; padding: 10px; border: 10px dotted black; margin: 0 auto; background-image: url("p2.jpg"); /*반복 여부는 기본 값이 모두 반복이다. no-repeat: 반복 안함 repeat-x: 가로로만 반복 repeat-y: 세로로만 반복 repeat: 가로세로 꽉차게 반복 */ background-repeat: repeat; background-position: center top; /* background-position: 가로 세로; 배경 위치 지정은 키워드로 가능하다. 가로: left right center; 세로: top bottom center; */ /*backg.. [CSS] Chapter 11. 레이아웃(Layout) 구성: CSS 위치속성 1. 개요 웹 사이트는 컴퓨터의 발전과 모니터 해상도의 변화로 발전해왔다. 과거 인터넷은 정보 교환을 목적으로 하였고, 모니터의 해상도도 높지 않아 정보 전달만으로 기능이 충분하였다. 하지만 기술의 발전에 따라 사용자의 편의성과 화면분할의 중요성이 대두되었다. 사용자는 인터페이스와 레이아웃에 따라 심미적으로 충족하는 상품에 소비하는 경향을 보인다. 이런 디자인 요소가 소비에 영향을 미치는 것은 많은 연구와 통계로 증명된 사항이다. 즉, 웹 사이트 또한 기술의 발전과 함께 소비 시장에서 살아남기 위해 자연스럽게 레이아웃, 디자인 요소가 발전한 것이다. 이러한 레이아웃 요소를 만들고 구성하는 기능이 바로 플로팅이다. 다만 플로팅은 사용이 어렵고 여러 이슈가 있어 능숙하게 사용하기가 어렵다. 2. 레이아웃 화.. [CSS] Chapter 10. border의 속성과 사용 1. 개요 border는 Box 모델에서 해당 태그가 가지고 있는 테두리로 태그가 가진 모양 요소 중 하나이다. border에 부여되는 선이나 모양에 따라 화면 구성이 바뀌며, 일반적으로 화면 구성 요소가 올바르게 적용되었는지 확인하기 위해 직선을 부여하여 배치를 확인한다. 2. Mark-up 확인 후 border에 입력한 속성의 초기화 border를 사용하여 마크업 상태를 파악하는 경우, 반드시 border에 입력한 px 값을 화면 구성에서 고려해야 한다. 일반적으로 border가 0px로 사용되어야 하는 화면이라면 border 속성 1px은 화면 구성 자체에 중대한 문제점을 야기할 수 있다. 이는 html의 요소가 box 구성으로 적용되고, 각 요소가 border을 가지기 때문이다. 쉽게 말해 콘텐츠.. [CSS] Chapter 09. block과 Inline 1. 개요 블록(block)은 웹페이지 화면에서 가로 영역 전체를 차지하는 태그를 말한다. 대표적인 태그로는 , ,이 있다. 해당 태그의 가장 주요한 특징은 데이터를 표시할 때, 반드시 ‘개행(줄바꿈)’을 진행한다. 때문에 다른 요소가 자신의 옆에 표시되는 것을 거부하는 특징을 가지고 있다. 위의 태그를 이용하여 모양을 구성한다면, display 값을 inline으로 구성하거나 span 태그를 사용할 필요가 있다. 2. 기본 형태 시간이란... 내일 죽을 것처럼오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라. 위의 3가지의 태그는 확인할 수 있듯이 Contents보다 큰 영역을 차지한다. 때문에 다른 데이터와 병합되거나 나란히 존재하기 어려우며, 만약 이를 지정하고 싶다면 해당 태그의 표현방식을 지정할 필.. [CSS] Chapter 08. BOX 모델 1. 개요 BOX 모델은 html 문서에서 구현되는 정보의 기본 형태를 정의하는 것으로, 가시적으로 구현되는 태그는 모두 BOX 모델을 기준으로 모양이 구성된다. content는 해당 태그에 담기는 데이터를 말하며 실제 눈으로 구현되는 정보이다. padding은 데이터와 테두리 사이의 여백을 말한다. border는 해당 태그가 가지는 테두리를 말한다. margin 은 태그끼리의 거리를 말한다. 2. BOX 모델의 중요성 BOX모델의 중요한 점은 태그가 가진 영역의 간격과 정보를 각각 조정할 수 있다는 것이다. Style을 통해 id, class, tag 등 원하는 항목에 BOX 모델의 영역을 지정할 수 있다. 때문에 기본적으로 가지고 있는 영역값을 각각 지정하여 모양을 구현할 수 있고, p 태그가 아닌 .. 이전 1 2 다음
