CSS 속성
css속성은 inline-> id -> class -> tag순으로 적용된다.
css는 html의 디자인이라고 생각하면 된다.
만약 css가 적용이 안되면 html은 단순히 글자만 나열되는 브라우저가 된다.
font-size
폰트사이즈를 나타내는 단위는 3가지가 있다.
em : 부모속성에 영향을 받는다. 즉 부모의 font-size가 16px이면 1em은 16px로 변한다.
rem : html의 font-size에 영향을 받는다.
px : 절대값으로 어떠한것에도 영향을 받지 않는다.
가상 클래스
실제로 존재하는 요소를 클래스를 부여하여 제어하는것
:link = 사용자가 해당 a tag로 사이트를 아직 안가봤을 경우 css속성이 나타나는 가상선택자
:visited = 사용자가 해당 a tag로 사이트를 가봤을 경우 css속성이 나타나는 가상선택자
:not(x) = 앞에 붙는 tag중에 not()안에 오는 class나 id에 해당이 안되는 태그를 선택할때 사용하는 가상선택자
:nth-child(x) = 앞에 붙는 tag의 x번째를 선택할때 사용하는 가상선택자
:nth-of-type(x) = 앞에 tag가 아닌 class속성을 사용하고 싶은 경우에 사용하는 가상선택자
:first-child = 해당 컨텐츠의 첫번째
:last-child = 해당 컨텐츠의 마지막
:last-of-type = 해당 컨텐츠들의 마지막으로 다중으로 선택할때 사용
:first-of-type = 해당 컨텐츠들의 첫번째로 다중으로 선택할때 사용
가상 요소
실제로 존재하지 않은 요소를 만들어서 스타일 주는것
::first-letter = p태그 나 h태그 같은 텍스트 컨텐츠에만 쓸수있으며 텍스트의 첫번째 줄을 선택한다.
::first-line = p태그 나 h태그 같은 텍스트 컨텐츠에만 쓸수있으며 텍스트의 첫번째 글자를 선택한다.
::after = 태그의 뒷쪽 부분에 가상요소를 만든다.
::before = 태그의 앞쪽 부분에 가상요소를 만든다.
media-query
반응형 웹디자인할때 사용하는 css속성으로 사용자가 보는 브라우저의 크기에 따라 ui의 배치를 다르게 할수있다.
max-width : px = 사용자가 보는 화면이 입력한 숫자 이하가 되면 css속성을 바꾼다.
min-width : px = 사용자가 보는 화면이 입력한 숫자 이상이 되면 css속성을 바꾼다.
예시@media screen and (max-width: 1260px){ .box{ background-color: red; } }위에는 사용자가 보는 화면이 1260px이하면 class box의 background색상이 red로 바뀌는것이다.
@media screen and (min-width: 768px){ .box{ background-color: blue; } }위에는 사용자가 보는 화면이 768px이상이면 class box의 background색상이 blue로 바뀌는것이다.
trasition속성
해당 css속성이 적용된 tag가 움직일경우 뒤에 오는 숫자만큼
움직인다.
예시
div{transiton: all 2s;}이 경우 div태그가 움직임이 생기면 2초동안 그 움직임을 제어한다.
transform속성
rotate : 해당 컨텐츠를 돌릴때 사용하는 속성이다.
밑에 코드는 컨텐츠를 180도 돌리는 코드이다..box{ transform: rotate(180deg); }translateX : 콘텐츠를 위아래로 움직일때
translateY : 콘텐츠를 좌우로 움직일때
translate(X,Y) : translateX와translateY가 합쳐진 css이다.
밑에 코드는 X축으로 20px Y축으로는 30px로 콘텐츠를 움직이는 코드이다..box{ transform : translate(20px,30px); }scale(X,Y): 해당 컨텐츠의 크기를 키우거나 작게 할때 사용하는 css속성
밑에 코드는 class가 box인 컨텐츠를 2배 키우는 코드이다..box{ transform:scale(2); }
