[코드라이언] CSS 단위와 Font , 배경(background) -Day9-

CSS에서 사용되는 여러 단위

 

css에서 사용되는 단위는 절대 길이 단위 / 상대 길이 단위가 있다.

 

• 절대 길이 단위
  cm, mm, px 등
  pixel (picture + element)는 '화소'를 나타내는 단위로 이미지를 표현하는 가장 작은 단위이자 CSS에서 가장 많이 쓰이는 단위이다.

 

• 상대 길이 단위

출처 : 코드라이언 프론트엔드 스쿨 교안

em은 부모의 font-size가 기준점이다. 즉 em=1 은 100%를 의미하여 부모의 font-size가 24px이면 em=1=24px이 된다. 만약 자식의 font-size를 0.5em 으로 설정하면 24 * 0.5 = 12 즉, 자식의  font-size는 12px이 된다.

 

부모 폰트의 px크기 * 자식 폰트의 em 값 = 자식 폰트의 px값

 

%(퍼센트)는 말 그대로 크기의 비율을 나타낸다. 기본 설정은 16px(기본 폰트 크기)이므로 

폰트 크기를 75%로 정하면 16 * 0.75 = 12px이 된다.

 

 

Vmin / Vmax는 화면 가로/세로 중 어느 쪽이 더 짧냐, 기냐에 따라 기준이 달라진다.

예를 들어, 브라우저 창의 가로가 1200px 세로가 800px인 상태라고 치면

div{
	width: 50vmin;
	height: 50vmin;
}

 

위 코드를 구현 했을 때, vmin은 창의 넓이와 높이중 작은 값을 기준으로 가지기 때문에

50vmin은 800 * 0.5의 값으로 나타난다.

 

 

 

Overflow

overflow 속성은 요소의 컨텐츠가 너무 커서 부모 요소의 레이아웃이나 다른 요소를 방해할 경우 어떻게 처리할지를 지정할 수 있게 해준다.

기본 값은 overflow: visible; 콘텐츠를 잘라내지 않는다.

 

• overflow: hidden;
  콘텐츠를 요소의 크기만큼 잘라낸다. 스크롤바 제공 X
  overflow: hidden;은 스크린 리더에서 읽히기 때문에 display:none; 또는 visibility: hidden;보다 접근성이 더 좋다고 볼 수 있음.

 

• overflow: scroll;
  잘린 콘텐츠를 스크롤로 확인할 수 있게 해주는 기능.

 

• overflow-x, overflow-y
  x축, y축에 값을 주어서 사용할 수 있다. 첫번째 값은 X, 두번째 값은 Y. 값을 하나만 입력하면 X,Y축 둘다에 적용된다.

 

 

Daum과 Naver에서 사용 예시 (Image Replace 기법)

   
        /* naver 스타일 */
        .blind {
            position: absolute;
            clip: rect(0 0 0 0);
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
        }

        /* daum 스타일 */
        .screen_out {
            overflow: hidden;
            position: absolute;
            width: 0;
            height: 0;
            line-height: 0;
            text-indent: -9999px;
        }

 

 

background-image

url을 이용하여 이미지 주소를 불러 올 수 있다.

 

background 속성 중에 사이즈를 지정하는 background-size가 있다.

• background-size: cover;
  이미지를 높이와 넓이에 맞춰 잘라낸다. 사진의 일부만 보일수도 있다. 이미지의 비율은 유지된다.
• background-size: contain;
  넓이와 높이에 맞춰 이미지를 확대 혹은 축소 시켜 이미지가 전체로 보이게 한다. 

원본 이미지

width: 200px

height: 130px의 크기인 div 박스에 배경으로 위 이미지를 넣어 준 후, background-size: cover;와  background-size: contain;의 차이를 보자.

 

 

background-size: cover일 때. 비율을 유지하며 배경을 빈틈없이 메꿨지만 사진은 잘렸다.

background-position: center 값을 주면 div 박스 중앙을 기준으로 배경 이미지를 보여준다.

 

background-size: contain일 때. div안 배경은 다 채우진 못했지만 사진 전체를 볼 수 있다.

위 상태에서 background-position: center를 주면 이미지가 div 박스 중앙으로 이동한다.

 

 

보통 CSS를 사용 할때 background-size: cover;을 사용한 경우가 많았는데, 웹 페이지를 만들다가 브라우저 창 폭이 좁아지면 이미지 밑으로 공간이 생기는 현상이 있었다.

브라우저 창 넓이 크기를 줄일때 마다 커져가는 흰 여백....

 

이는 갓종찬님이 답을 해주셔서 해결했다. 아래는그 해결책 코드.

그리고 background image에 대해 좀 더 깊게 이해할 수 있는 갓종찬님의 참고영상.

https://www.youtube.com/watch?v=H7teKNwV-Bk 

body{
    padding:0;
    margin:0;
    background-img: url(background.png);
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    background-size: cover;
}

영상을 보면 알 수 있듯이 body태그에 background-image를 준다고 사실상 웹브라우저 화면 전체에 채워지는 것은 아니다. 사실상 body의 영역은 안의 요소들의 크기이기 때문에.

(html에 background-color 값을 주면 바로 알 수 있다. 그렇다고 html에는 background-color를 쓸수 있는건 아님...)

 

위 코드 외에도 background-attachment: fixed; 로도 배경 이미지 밑에 남는 여백을 없애 줄 수 있다.

background-attachment: fixed;가 되면 background image가 채워지는 기준이 body가 아니게 되기 때문이다.

기준은 뷰포트가 된다.

 

다시 말하면, 내가 넣은 background-image는 실제로는 전체 화면에 적용되는게 아닌데다가 background-size:cover; 속성으로 인해 이미지 비율을 유지하기 위해 브라우저 창 폭이 줄어들면 높이는 끝까지 다 채워지지 않은 것 같다. (가로로 긴 사진이다.)

웹 개발자 도구로 확인하면 body 태그의 영역이 저렇게 나온다

 

그래서 첫번째 방법대로 height값을 100vh로 주어 body태그 영역을 브라우저 창에서 보이는 높이 영역 전체 즉 뷰포트로 잡으면 해결이 되고, 두번째 방법 background-attachment: fixed;로 background image가 채워지는 기준을 뷰포트로 잡으면 해결되는 것이다.

 

 

Font

 

font에 관련된 여러 속성

 

• text-transform
  upper case는 대문자, lowercase는 소문자, capitalize는 각 단어의 첫 문자를 대문자로 지정.

 

• font-style
  텍스트 기울기 조정 normal은 기본(일반 스타일), italic은 필기체, oblique는 기울임체

 

• font-size
  px이외에도 여러가지 value를 정할 수 있다.
  medium - 브라우저에서 정한 기본 글자 크기(보통 16px)
  xx-small, x-small, small, large, x-large, xx-large - 기본 글자 크기 기준으로 작은 값 부터 큰 값
  smaller, larger - 부모 font-size 기준으로 더 작게, 더 크게 지정
  initial - 기본 값으로 설정(16px)
  inherit - 부모 요소의 속성을 상속받는다.

 

font를 적용 시키기 위해서는 @import를 사용하거나 아래처럼 link를 사용한다.

<head>
    <link href = 'http://fonts.googleapis.com/css?family=Open+Sans:400.300' rel='stylesheet' type='text/css'>
    <style type = "text/css"> h1 {font-family: 'Open Sans', sans-serif;}</style>
</head>

하지만 이런 방법으로 항상 font를 보이게 할 수 있는 것은 아니다. @import나 link로 웹 폰트를 사용할 경우 사용자의 웹사이트 방문으로 폰트가 임시로 다운된 상태여야 한다. 

 

 

• @font-face

사용자의 브라우저에 특정 폰트가 설치되어 있지 않더라도, 폰트를 설치하게 하여 사용할 수 있게 한다.

 

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

@font-face를 사용할 경우 서버에 폰트를 업로드 해놓고 사용하는게 되기 때문에 페이지 로딩이 느려진다는 단점이 있다. (IE8 이하 버전에서는 @font-face를 사용할 때 .eot 파일만 인식한다)

 

폰트를 사용할 때는 브라우저 호환에 유의하여야 한다.

 

출처 : 코드라이언 프론트엔드스쿨 교안