css: size, text, font, list, cursor, background, 선택자, 가상선택자pseudo

 

size

<meta name="viewport" content="width=device-width">

vw: viewport width 보는 기기의 너비가 기준

vh: viewport height 보는 기기의 높이가 기준

vmin: vw와 vh 중 작은 값 기준

vmax: vw와 vh 중 큰 값 기준

 

 

text

 

font-size: px,em,%,vw,vh,vmin,vmax

text-align: left,right,center,justify(양쪽맞춤)

font-weight : bold,bolder,lighter,100~900 , 기본 400

font-style: italic(글자 기울기), normal(기본상태)

letter-spacing

line-height: 줄간격, 단위를 생략하면 배수 단위가 된다.

text-decoration: underline, (line-through)중간줄,(overline)윗줄,(none)줄없음

text-indent: 들여쓰기 +(생략가능) , 내어쓰기 -

text-transform :대소문자 변경 uppercase, lowercase, capitalize(첫글자만 대문자로)

font-family: 최소 2개 이상, 맨마지막에는 시스템폰트를 쓴다

    문법: "한글폰트", dotum, sans_serif;

* 시스템 폰트 :serif(궁서),sans-serif(돋움),monospace,cursive(필기체)

 font : font 대표속성

word-spacing: 단어 사이즈 간격

font-variant : small-caps, large-caps, normal

vertical-align: 위아래 가운데,위, 아래 

  * img,table 태그만 가능

 

* 최근 글씨 크기 추세는 13 or 14 px

* 글씨 크기는 항상 기본조건을 주고 거기서 em 으로 조절하는 것을 추천

* 명령값이 겹칠 경우 마지막 명령값이 적용됨

 

웹폰트

"폰트명 구글 웹폰트" 검색

ex) 나눔고딕

https://fonts.google.com/specimen/Nanum+Gothic?sidebar.open=true&selection.family=Nanum+Gothic

Google Fonts

list

-style 대표속성

-style-type 모양 설정, 기본 disc

-style-position 위치 설정, 기본 outside

-style-image 개인 이미지 사용

 

cursor

 

background

-color

-image.url(파일명)

-repeat : repeat-x 가로로만 반복, repeat-y 세로로만 반복

-position x축 y축 (px,%,left,top ...)

-attachment : scroll, fixed

↓css3 추가

멀티배경: 여러 이미지를 줄 수 있음

-size : 너비값 높이값

   너비 100% 경우, 높이는 비율로 조절

   contain : 전체 이미지가 부모 요소 안으로 들어감 (이미지가 잘리지 않음)

        부모요소의 너비가 이미지의 크기보다 큰경우
        - 이미지가 잘리지 않도록 이미지를 채우고(비율유지),

        부모요소가 너비가 이미지 보다 작은 경우
        - 이미지의 너비를 실제 너비로 채움 (비율유지)        
    cover : 이미지가 부모 요소 사이즈 만큼만 보임 (이미지 잘림)
        부모요소의 너비가 이미지 보다 큰경우
        - 이미지의 너비값이 100%로 채워지고

        부모요소의 너비가 이미지 보다 작은 높이가 너비보다 큰 경우
        -이미지의 높이값이 100%로 채워진다.

-blend : 두 배경이미지의 색상모드를 이용하여 합성해주는것

    color : 아래 그림의 명도, 위쪽 그림은 색상, 채도가 합쳐지는것

    color burn : 위쪽 그림이 흰색이면 투명하게 보이고, 위쪽 그림의 색상이 어두우면 아래그림과 강한 대비를 보여주는것

    color Dodge : color burn과 반대로, 위쪽 그림이 검정이면 투명, 위쪽 그림의 흰색부분이 아래쪽 그림과 강하게 대비되어 밝게

    darken : 위쪽 그림이 색상이 아래보다 밝으면 투명, 어두우면 더 어둡게 나타난다.

    difference : 위쪽 그림의 밝은 부분은 아래 그림의 색상에 반전되며, 아래 그림의 어두운 부분은 위쪽 그림에 그대로 나타난다.

    exclusion : diffrerence와 비슷하나, 좀더 밝고 부드럽게 나타난다.

    hard light : 두 그림의 색이 혼합되어서 나타나는데, 강한 조명을 비춘것 처럼 나타난다.

    hue : 아래 그림의 채도가 위쪽 그림에 합쳐져서 나타난다.

    lighten : 두 그림의 어두운 부분은 투명하고, 밝은 색 이미지가 우선적으로 나타난다.

    luminosity : 아래 그림의 색상,채도와 위쪽 그림의 명도가 합쳐져서 나타난다.

    multiply :  위 그림에 흰색은 투명해지고, 어두운 부분만 아래 그림과 합성된다.

    screen : multiply의 반대 개념으로 위 그림의 색상이 검은색이면 투명, 밝으면 아래 그림과 합성된다.

    overlay : multiply과 screen을 합친 효과, 밝은 색은 더 밝게, 어두운 색은 더 어둡게

    saturation : 아래그림의 색상과 채도가 위쪽 그림에 합쳐지는것

    soft light : 중간색을 중심으로 밝은 부분은 더 밝게, 어두운 부분은 더 어둡게 부드럽게 합성되는것

 

 

https://jigsaw.w3.org/css-validator/

W3C CSS 검사 서비스

 

 

가상선택자

a:link

a:hover

a:visited

a:active 꾹 눌렀을 때

 

* a대표속성으로 기본을 지정하고, a:hover일때만 따로 설정

 

 

* display: block 인라인 요소를 블락으로 

* text-indent: -99999px; 마크업 시 글자 생략보다 작성 후 css로 안보이게

* 공통사항으로 세부속성 준 경우, 아래에서 대표속성 쓰면 상위 공통사항이 적용되지 않음

ex)

.sns>li>a{
    display: block;
    width:50px;
    height:50px;
    background-position: -50px 0;
    background-repeat: no-repeat;
}
.sns>.insta>a{
    /*background: url(../images/icon_sns_instar.png);  이 경우 적용되지 않음*/
    background-image: url(../images/icon_sns_instar.png); /*맞게 작성*/
    }