codingfarm

태그가 화면에 보이는 방식을 지정하는 속성이다. html5 시대가 되면서 다양한 display속성이 존재하게 되었다. 하지만 모든 display속성을 제대로 지원하는 웹브라우저는 없다. 따라서 예제 코드와 함께 제일 중요한 속성 몇가지만 정리한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 CSS3 Style Property Basic Dummy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dummy Colored by Color Scripter cs none 화면상에서 해당태그를 사라지게 만든다. 1 2 3 4 5 #box{ display : none; } cs 이는 태그의 존재를 지워버리는것이므로 레이아웃 자체를 변경시킬수도 있..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 #a{color : rgb(82,124,180)} #b{color : #32F6A4} AAA BBB Colored by Color Scripter cs

font-size 기능을 이용하여 문자의 크기를 조정가능하다. 이때 단위는 크게 px와 rem 2가지로 나뉜다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #px{font-size:16px;} #rem{font-size:1rem;} PX REM cs 이제 웹브라우저의 설정창에서 글꼴의 크기를 줄여보겠다. 기존의 16으로 설정된 크기를 9로 줄여본다. 단위를 px로 설정한 문자PX는 그대로지만 rem으로 설정한 REM은 작아젔다. 즉, 사용자에게 글자 크기의 조절을 위한 권리를 주고싶다면 rem단위로 설정하는것이 유용하다.

각 element의 상태에 따라 여러가지 특수한 선택들을 가능케 하는 선택자이다. 클래스 선택자처럼 행동하지만 클래스 선택자는 아니다. 1234567891011121314151617181920212223242526272829303132333435363738394041 a:link{ /*방문 안한곳일 경우 글자색 변화*/ color : black; } a:visited{ /*이미 방문한 링크일 경우 글자색 변화*/ color:red; } a:hover{ /*마우스를 올릴경우 글자색 변화*/ color:yellow; } a:active{ /*좌클릭 중일 경우 글자색 변화 좌클릭할경우 hover와 active가 동시에 활성화 되며 나중에 있는것이 최종적으로 덧씌워지기 때문에 active를 hover보다 뒤로 ..