CSS3 (18) 썸네일형 리스트형 content 부분의 width 설정(100%) top left content bottom Media Query CSS3에서부터 지원되는 Media Query 적용 예 참고: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 반응형 웹(Responsive Web)이라고 불리는 기능은 웹페이지에 접근하는 클라이언트 기기의 스크린 폭에 따라서 웹페이지 레이아웃의 폭과 크기가 자동으로 변경되도록 하여 이용자로 하여금 웹페이지를 쉽게 읽을 수 있도록 하는 것을 말한다.그러므로 모든 반응형 웹은 접속하는 클라이언트 기기의 스크린 크기에 따라 적용하는 스타일을 달리하기 때문에 필수적으로 조건부 스타일시트를 선언하는 특징을 가진다. 조건부 스타일시트를 정의하는 방법은 몇가지가 있지만 스타일시트 파일이나 스타일 태그 내에서 Media Query 를 이용하여.. CSS의 가상 클래스 CSS에서 식별자로 id와 class를 사용하지만, 명시적으로 정의 하지 않아도 가상으로 설정한 것처럼 동작하는 클래스가 있습니다. 이것이 '가상클래스'입니다. 이 중에서 하이퍼링크와 관련된 클래스는 다음와 같습니다. 종류 설명 :link 하이퍼링크(a의 href가 정의된 상태) 상태를 나타냄:visited 하이퍼링크의 방문여부를 나타냄 :hover 마우스 오버를 나타냄. :active 마우스로 클릭한 상태를 나타냄 :focus 포커스된 상태를 나타냄(input, a, area 등) 사용법은 간단합니다. 그냥 뒤에 붙여주면 됩니다. ex)a.banner {opacity: 1; //투명도가 1인 상태} a.banner:hover {opacity: 0.5; //마우스 오버 시 투명도를 0.5로만듬} background background : background-color : background-image : url(); background-repeat : - repeat ; - repeat-x ; - repeat-y ; - no-repeat ; background-position : - background-position : 30px 20px; - background-position :center bottom; ( top, left, center, right) (top, middle, bottom) background-attachment : - scroll // 스크롤에 따라 이동 - fixed // 스크롤되지 않음 background-size : - auto - contain - cover - 300px, 300% .. font, text font-family :font-size :font-style :font-variant :font-weight : text-align :text-shadow : h-shadow v-shadow blur color;text-decoration : none, underline, overline, line-throughtext-indent : 10px; // 문장의 첫 글자를 들여쓰기할 때 line-height : 1.5; list-style-type : (순서 없는 목록) - disc- circle- square- none list-style-type : (순서 목록) - decimal : 1로 시작하는 십진수- decimar-leading-zero : 01로 시작하는 십진수- lower-roman : 소문.. ul, li nav ul{list-style: none;margin: 0 auto;} nav ul li{float: left;display: inline;} a {text-decoration: none} a: link, a: visited{ }a: hover, active{ } blank 이전 1 2 3 다음