webplacidcy

특정 요소에 하나의 요소를 추가한다 1. ::first-line : 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일을 입혀준다. 문장의 첫 줄은 상위 요소의 크기나 브라우저의 크기에 따라 달라질 수 있다 p::first-line { color: #ff0000; font-variant: small-caps; } 2. ::first-letter : 텍스트의 첫 문자에 특정 스타일을 입혀준다. p::first-letter { color: #ff0000; font-size: xx-large; 3. ::before / ::after 요소의 내용에 추가된다 보통 이미지나 글자, 그라데이션 등을 추가할때 사용한다 h1::before { content: 'hello'; } h1::after { content: u..

앵커 가상 클래스 앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다. 앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄 없이 보라색으로 표현할 수 있다. a:link { color: blue; } a:visited { color:purple; text-decoration: none; } 몇가지 앵커 가상 클래스는 사용자의 행동에 영향을 받는다. a:hover { color: red; } a:active { color: gray; } a:focus { color: yellow; } :hover : 사용자가 해당 ..

해당 요소의 3D 좌표상에서의 원근법을 설정하기 위한 기능으로 기본적으로 해당 요소의 부모 요소에 transform-style / perspective 속성을 추가한다 perspective에 대입하는 값은 관찰자가 z축을 기준으로 설정된 거리만큼 떨어져 있다고 가정한 값이다 ex) perspective: 300px일때 -> 관잘차는 요소에 300px만큼 떨어진 거리에서 보고 있다고 가정 또는 특정 요소에만 원근법 속성을 적용시키려면 transform: perspective(300px); 위에 처럼 transform 속성에 perspective 속성을 대입한다

요소 안의 내용이 최대 크기를 벗어날때 어떻게 보여질지를 설정한다 1. visible : 내용이 최대 크기 범위에서 벗어날경우 그대로 보여지게 한다 2. hidden : 벗어난 내용은 보여지지 않는다 3. scroll : 스크롤바를 추가해 범위에서 벗어난 내용들을 스크롤을 이용해서 보여지게 한다 4. auto : 내용에 따라서 자동으로 결정된다

글의 들여쓰기 / 내어쓰기를 지정한다 값이 양수이면 들여쓰기, 음수이면 내어쓰기로 설정된다

1. letter-spacing : 글자 사이의 간격을 설정한다 2. word-spacing : 단어 사이의 간격을 설정한다

요소의 투명도를 설정한다 0 ~ 1 사이의 값을 설정할 수 있고 값이 0일때 완전 투명 1일때 불투명으로 설정된다

해당 요소가 웹페이지에서 보여질지 숨겨질지를 설정한다 보이지 않게 설정하더라도 웹페이지 내에서 레이아웃상에서는 사라지지 않는다 1. visiable : 해당 요소가 웹페이지에서 보여진다 2. hidden : 웹페이지에서 보여지지 않지만 레이아웃상에서는 사라지지 않는다 3. collapse: 동적인 테이블에서만 적용되며 테두리의 한줄만 보여진다