CSS (25) 썸네일형 리스트형 transition transition 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킵니다. div { transition: all 1s; } transition-tiing-function 전환효과의 시간당 속도를 설정합니다. linear : 전환효과가 처음부터 끝까지 일정한 속도로 진행됩니다. ease: 기본값. 전환효과가 천천히 시작되어 그다음은 빨라지고 마지막에는 느려집니다. ease-in :전환효과가 천천히 시작됩니다. ease-out : 전환효과가 천천히 끝납니다. ease-in-out : 효과가 천천히 시작되어, 천천히 끝납니다. cubic-bezier(n,n,n,n) : 전환효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.cubic-bezier. div { transition: all .. 2D Transform transform 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있습니다. translate 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킵니다. 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킵니다. div { transform : translate(100px, 50px); } rotate 해당 요소를 주어진 각도만큼 회전시킵니다. 양수이면 시계방향으로, 음수이면 반시계 방향으로 회전시킵니다. div { transform : rotate(180deg); } scale 해방 요소의 크기를 주어진 배율만큼 늘리거나 줄입니다. 주어진 배울이 1보다 크면 늘리고, 0보다 크고 1보다 작으면 크기를 줄입니다. div { transform : sca.. background background 요소의 배경을 지정하는 속성입니다. // 속기형 section { background: #000 url("../images/back-img.jpg") no-repeat 10px center; } background-color 배경의 색상을 지정합니다. 값은 color 속성의 포멧을 사용합니다. section { background-color: red; } section { background-color: #000; } section { background-color: rgba(255,99,71,); } section { background-color: rgba(255,0,0,0.3); } background-image 배경 이미지를 설정하며, 경로를 지정하는 방식으로 사용합니다. ba.. overflow overflow 요소의 내용이 요소 자체의 크기 이상일 경우 처리 방식을 결정합니다. visible : 기본값. 요소 크기 이상으로 렌더링이 됩니다. hidden : 요소보다 큰 내용을 숨김니다. scroll : 스크롤을 생성하여 내용을 볼 수 있습니다. auto : 브라우저에 따라서 상이, 자동으로 스크롤을 생성하거나 렌더링이 됩니다. .box { overflow: hidden; } opacity opacity opacity는 요소의 투병도 레벨을 결정할 수 있습니다. opacity는 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. number : 0.0 ~1.0까지의 수를 넣습니다. (숫자가 작을수록 투명해짐) initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. div { opacity: 0.7; } z-index z-index z-index는 우선순위를 매길때 사용합니다. 이 우선순위란 position이라는 css 속성을 썼을때 우선순위를 매깁니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 작을 수록 아래로 내려갑니다. auto : 기본값으로 z-index를 지정하지 않는 것과 같습니다. number: 숫자가 낮을수록 뒤로 배치가 되며, 높을 수록 위로 올라갑니다.(~999까지) initial: 기본 값으로 설정합니다. position중 하단의 속성을 적용할 경우에만 사용이 가능합니다. absolute relative fixed li { position: absolute; z-index: 1; } position position position 속성은 태그를 어떻게 위치시킬지 정의합니다. li { position: absolute; top : 0; left : 50%; } static: 기본값. 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다. absolute: 부모요소(태그) 위치의 상대값에 따라 배치됩니다. absolute 사용할 경우 부모 요소에 항상 relative를 부여합니다. 상대값에 따라 배치되기 때문에 기준점을 부여하면 사용하기 편하기 때문입니다. relative: 원래 있던 위치를 기준(자기 자신 기준)으로 좌표를 지정합니다. fixed: 스크롤과 상관없이 항상 문서 최 좌측 상단을 기준으로 좌표를 고정합니다. 방향 left: 왼쪽 right: 오른쪽 top: 위.. css 선택자(selector) 선택자(selector) css 선택자(selector) 전체 선택자 전체 선택자는 HTML페이지 내부의 모든 요소(태그)에 같은 CSS속성을 적용합니다. 보통 기본적으로 사용할때 각 태그들이 가지고 있는 속성값들을 초기화 시킬때 사용합니다. * { margin: 0; text-decoration: none; } 태그 선택자 태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자입니다. p { color: #000; } 클래스 선택자 클래스 선택자는 주어진 값을 class속성값으로 가진 HTML요소를 찾아 선택합니다. 이때 선택하려는 속성값 앞에 마치표를 추가해서 작성하며, class가 같은 경우 같은 스타일 적용되기 때문에 사용시 주의 .title { color: #fff; } ID 선택자 id.. 이전 1 2 3 4 다음
