[TIL] css

이지예·2022년 5월 31일

CSS

목록 보기

5/9

`em`

선언한 폰트의 대문자 M의 너비를 기준으로 하는 상대적인 단위이다.
1em은 현재 지정된 폰트 크기와 같고, 2em은 현재 폰트 크기의 두 배, 즉 200%를 의미한다.
em의 경우 <div>가 16px이고 폰트 사이즈는 상속이 된다.
폰트 사이즈를 기준으로 1em으로 설정해놓으면 상위요소의 1배 값인 1px로 선언된다.
2em으로 바꾸면 200%한 것과 동일한 크기인 32px로 computed된다.
만약 class가 em인 글자를 20px만큼 키워서 보고 싶다면
20/16=1.25em을 적으면 된다.
em은 소수점 3자리까지 선언 가능하다.

rem

root의 font-size를 기준으로 값을 환산한다.

vw

viewport의 width값을 기준으로 1%의 값으로 계산된다.

CSS 속성 - 색상

속성명 : COLOR

선언하는 법이 다양하다. 아래는 모두 같은색을 다르게 표현해서 나타낸 것이다.

body{color:black}/*1. By color names*/
body{color:#000000}/*2. Hexadecimal colors*/
body{color:#000}/*3. Hexadecimal colors*/
body{color:rgb(0,0,0)}/*4. As RGB values (red, green, blue/0~255)*/
body{color:rgba(0,0,0,1)}/*5. (red, green, blue, alpha/0~255, 0 or 1)*/

body의 컬러 값에 색상명 black으로 선언한 코드이다.
컬러 값을 16진수로 적용했을 때의 코드이다.
각 자리마다 16진수로 표현되고, 0에 가까울수록 검정색을, #ffffff 이렇게 f에 가까워질 수록 하얀색을 나타낸다.
두자리씩 r, g, b를 나타낸다고 볼 수 있다.

예제 코드는 깃허브에 작성.

16진수는 기본을 여섯 자리로 표기하지만, 같은 수가 두 개씩이면 축약하여 세 자리로도 표현 가능하다.
그래서 2번과 3번은 같은 값이라고 볼 수 있다.
각 RGB 값을 숫자로 표기한다. 세 자리 모두 0에 가까울수록 검은색, 세 자리 모두 255에 가까울수록 하얀색으로 표현된다.
a는 알파(alpha) 값을 뜻하며, 값의 투명도를 설정할 수 있다.
알파값이 0일 때는 투명한 색상을, 1일때는 완전한 색상을 보여준다. 소수점으로 적용 가능하다.
rgba로 적용할 때 a의 값을 설정해주지 않으면 color가 아예 적용되지 않는다.

CSS 속성 - 배경

속성명 BACKGROUND

요소의 배경을 컬러나 이미지로 적용할 때 사용한다.

/*속성*/
background-color:green;
background-image:url("img_tree.gif");
background-repeat:no-repeat;
background-position:top center;
background-attachment:scroll;

/*축약형*/
background:green url("img_tree.gif") no-repeat fixed center;

예제)

<div>배경에 대해 알아보자</div>
<span>배경에 대해 알아보자</span>

div{background-color:pink}
span{background-color:pink}

div는 블록 요소이기 때문에 텍스트를 포함한 전체 콘텐츠 영역 만큼 배경을 차지한다.
span의 경우 인라인 요소이기 때문에 텍스트의 길이만큼 배경이 적용된다.

예제)

div{height:500px
    background-color:pink
    background-image:url(https://www.w3schools.com/sccref/img_tree.gif);}

<div>배경에 대해 알아보자</div>

사진이 투명한 배경이기 때문에 background-color로 설정해놓은 색상이 뒤에 보여진다.
높이 500px, 너비는 화면 전체인데, 이미지의 크기가 이보다 작다면 이미지가 반복적으로 노출된다.

예제)

div{height:500px
    background-color:pink
    background-image:url(https://www.w3schools.com/sccref/img_tree.gif);
    background-repeat : repeat-x}

<div>배경에 대해 알아보자</div>

background-repeat의 디폴트 값은 repeat이다.
repeat-x : x축으로만 이미지가 반복적으로 노출된다.
repeat-y: y축으로만 이미지가 반복적으로 노출된다.
no-repeat : 원하는 이미지를 딱 한 개만 노출하고 싶을 때 사용한다.

예제)

body{
    background-color:pink;
    background-image:url(https://www.w3schools.com/sccref/img_tree.gif);
    background-repeat : repeat-x;
    background-position:center top;}

<div>배경에 대해 알아보자</div>

position 속성의 Default value는 0%이다.
속성의 syntax(문법)을 확인해보면 left top, left center, left bottom, right top 등의 속성 값들이 있다.
이 속성 값들은 x축 위치를 먼저 언급하고, y축 위치를 뒤에 언급한다.
center center 를 하게 될 경우 가운데 정렬 되고, 50% 50%도 같은 효과를 낸다.
픽셀로도 적용 가능한데, 픽셀은 이미지의 상단의 왼쪽과 left top 값이 기준점이 된다.
left top을 했을 때의 이미지 상단 왼쪽지점이 0px 0px이고, 50px 50px로 설정하면 이미지의 왼쪽 상단이 50px 50px에 위치하게 된다.

예제)

div{
    background-image:url(https://www.w3schools.com/sccref/img_tree.gif);
    background-repeat : no-repeat;
    background-position:center top;
    background-attachment : fixed;}

<div>배경에 대해 알아보자</div>

attachment는 vaule값이 scroll, fixed, local, initial, inherit을 갖고,
scroll은 배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤 되지 않는다.
fixed
배경 이미지는 요소의 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않는다.
local
배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤된다.
브라우저 성능에 영향을 미치기 때문에 많이 사용되진 않는다.

CSS의 BOX MODEL

HTML의 모든 요소는 사각형의 박스로 만들어진다.
이 박스는 총 4가지 영역으로 구성되어 있다.
각 요소의 특징에 따라서 다양한 스타일을 적용할 수 있다.

div{
    margin:50px;
    border:10px solid #000;
    padding:30px;
}

<div>Box Model을 알아볼까요?</div><!--content-->

Content

요소의 실제 내용을 포함하는 영역이다.
크기는 내용의 너비 및 높이를 나타낸다.

Padding

content와 테두리 선 사이의 여백이다.
content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미친다.
padding을 content의 연장으로 볼 수도 있다.
기본 값은 0으로, px나 em같은 고정값으로 지정 가능하고, percent와 같이 상대적인 크기를
길이의 단위로 선언할 수 있고, initial, inherit으로 선언할 수 있다.
양수만 가능하고 음수는 불가능 하다

div{padding-top:0;
    padding-right:10px;
    padding-bottom:20px;
    padding-left:30px;
    border 10px solid #000;}
/*축약형
div {padding: 0 10px 20px 30px;}
위, 오른쪽, 아래, 왼쪽의 시계방향 순으로 축약형을 설정한다.*/

왼쪽, 오른쪽이 같은 값을 가질 때는

div {padding:0 30px 20px;}

세 개만 선언하면 된다.

위 아래도 같은 값을 가질 때는

div {padding: 0 30px;}

위, 아래는 padding이 0으로 같고, 좌, 우는 30px로 같은 경우이다.

상하좌우 모두 같은 값일 경우에는 하나의 값만 적어주면 된다.

<div>Box Model을 알아보자</div>

border과 요소 사이로 여백이 생성된 것을 알 수 있다.

Border

Contents 영역을 감싸는 테두리 선을 Border라고 한다.

/*속성*/
border-width:thin/*두께. border-length로도 선언 가능 thin, medium, thick*/
/*사방의 선을 다른 border-width로도 적용할 수 있다.*/
border-width:2px 10px 4px 20px;

border-style:solid;/*종류 none, hidden, dotted, dashed, solid(실선), double, groove...*/
/*사방의 선에 다른 border-style을 적용할 수도 있다. */
border-style:dotted dashed solid double;

border-color:#000;
/*마찬가지로 사방을 다르게 선언할 수도 있다.*/
border-color: red green blue yellow;

/*축약형*/
border : border-width border-style border-color

Margin

Border 바깥 쪽의 여백이다.
border영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역이다.
주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있다.
padding과 마찬가지로 여백 값을 길이로 선언할 수 있고, 축약형의 형태로 선언할 수 있다.
양수 음수 모두 표현 가능하다.

padding과 달리 auto라는 값을 선언할 수 있고, auto로 선언하게 되는 경우 브라우저가 여백을 계산하여 적용해준다.
f12-elements-computed에 들어가보면 자동으로 설정된 margin값을 볼 수 있다.

margin은 정렬을 할 때 주로 사용하는데, 이 때 필요한 게 width라는 값이다.
width는 contents의 가로 값을 적용할 때 사용하는데,
300px라고 적용 했다면 content가 300만큼의 너비를 가지고, margin은 가운데 정렬이 된다.

margin-left:auto;

왼쪽을 기준으로 auto값이 적용돼서 오른쪽 끝으로 정렬된 것을 볼 수 있다.

margin은 가로축을 기준으로 정렬하기 때문에 상하는 auto를 사용하면 변화가 없다.
블록요소를 가운데 정렬 할 때는, width를 가지고 있는 요소에만 좌우 정렬 할 수 있다.

margin collapse

top값과 bottom 값이 겹치게 되면 조금 더 큰 값이 상위를 차지하게 돼서 큰 값으로 적용이 된다.

padding과 margin의 차이점

margin은 양수, 음수 모두 가능한데, padding은 양수만 가능하다.

div{margin:0 -50px;}
    border:10px solid #000;}

<div>Box Model을 알아보자.</div>

양 옆으로 50만큼 당겨져서 보이게 된다.

div{border:10px solid #000;}

<div>Box Model을 알아보자.</div>
<div style="margin-top:-50px;">Box Model을 알아보자.</div>

margin은 요소 간의 여백을 선언할 때 사용한다. 음수 값을 넣게 되면 아래의 div가 위로 50만큼 당겨져서 겹쳐보이게 된다.

padding값을 음수로 설정한 경우에는
개발자도구에 느낌표 아이콘과 취소선이 생긴다.
오타나 지원하지 않는 값이 있는 경우에 생기는 현상이다.

content를 뼈, padding을 지방, border를 피부, margin을 사람과 사람간의 거리라고 생각하면 쉽다.
content, padding, border는 양수만 가능하고, margin은 양수, 음수 모두 가능하다.

padding은 auto값을 선언할 수 없고, margin은 선언 가능하다.

%퍼센트

div{padding-left:50%;
    border:10px solid #000;}

<div>Box Model을 알아보자</div>

현재 body가 div의 부모요소이기 때문에 body가 차지하는 콘텐츠 영역을 기준으로 padding이
contents가 width의 왼쪽부터 시작해서 50%만큼 위치에 있는것을 알 수 있다.

padidng-top:20%라면
%의 경우 가로축 기준이기 때문에 화면을 가로로 늘리면 padding-top의 20%가 점점 커지는 것을 확인할 수 있다.

div{margin-left:50%;
    margin-top:10%;
    border: 10px solid #000;}

<div>Box Model을 알아보자</div>

padding과 마찬가지로 왼쪽 50% 여백이 생겼고,
브라우저를 가로로 늘리면 margin-top 값이 늘어나는 것을 알 수 있다.

width

요소의 가로 값을 결정하는 속성이다.
auto, value, initial, inherit등의 값을 선언할 수 있다.
기본값이 auto이기 때문에 width를 선언하지 않았다면 그 값은 기본으로 auto가 선언되어 있어서
브라우저를 리사이징 했을 때 width값이 바뀐다.

.parent{border:10px solid blue;}
.child{width:300px;
    border:10px solid red;}

<div class="parent">
    <div class="child">
        Box Model을 알아볼까요?
    </div>
</div>

width를 300으로 설정했을때 박스는 320의 가로값을 갖는다.
width를 선언한다는 것은 contents 내용에 width값을 선언한다는 것을 알 수 있다.
border를 10px로 상하좌우에 선언했기 때문에
width 300에 padding값과 border값을 다 더한 값이 박스의 사이징이 된다.

고정된 값이 아닌 %를 넣게 되면 어떻게 될까

width:50%;

화면에 보이는 전체 박스의 크기가 714라고 치면
parent의 border인 20px을 빼주면
694px이 child의 크기이다.
여기서 width는 50%이므로 347px이 content의 크기이다.
자식요소의 퍼센트 값은 부모 요소의 contents 영역에 영향을 받는다는 것을 알 수 있다.

HEIGHT

요소의 높이 값을 결정하는 속성으로 width와 마찬가지로 기본값을 auto로 갖고 있다.
px나 %등의 lenght인 길이 단위로 선언할 수 있다.

width와 마찬가지로 contents요소의 내용에 높이 값을 선언할 때 사용하는 속성이다.
(content가 아닌 padding, border, margin은 따로 속성이랑 속성 값을 선언하면 되니까.)

박스사이징도 width와 마찬가지로 height로 선언한 content요소의 높이, padding, border의 높이를 모두 더해서 계산한다.

고정 값이 아닌 %를 적용했을 때?
child의 height를 50%로 설정하면 변화가 없다.
%는 parent와 child 사이에 박스 영역이 있는데, child가 차지할 수 있는 박스영역(공간)인 containing block의 퍼센트를 높이 값으로 정의한다.
child를 height의 높이 값 50%로 하기 위해서는 parent의 고정 높이 값이 필요하다.
parent의 height를 100px로 설정한다면 child는 50px이 적용되게 된다.

CSS 속성 - 폰트

폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 한다.
모든 폰트는 em박스를 가지고 있다.
em 박스는 폰트의 전체 높이를 의미한다.
소문자 x를 기준으로 x의 높이만큼의 영역을 ex(x-height)라고 한다.
Baseline : 소문자 x를 기준으로 하단의 라인을 의미한다.
Descender : 소문자에서 baseline 아래로 쳐지는 영역을 의미한다.
Ascender : 소문자 x의 상단 라인 위로 넘어가는 영역을 의미한다.

FONT-FAMILY

글꼴을 지정하는 속성이다.
font-family를 선언할 때는 font-family name과 generic-family name을 보통 같이 선언한다.
family-name은 지정순서로 폰트의 우선순위 결정
generic-family는 family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을 시 적절한 폰트를 선택할 수 있도록 한다.

font-family:Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

Helvetica라는 폰트를 가장 먼저 우선순위로 선언해서, Helvetica에 맞는 글꼴이 PC에서 지원을 하고 있다면 Helvetica를 먼저 지원하고,
없다면 그다음 우선순위로 적힌 돋움을 지원한다. 이때 한글로만 선언하면 한글 글꼴을 인식하지 못할 수 있기 때문에 영문자를 같이 선언해줘야 한다.
font-family의 가장 마지막 값에는 generic-family를 선언해준다.
삐침이 있는 글씨체를 원한다면 serif, 삐침이 없는 폰트는 sans-serif라고 적어준다.

LINE-HEIGHT

줄 간격을 의미한다. 이 줄 간격은 폰트와 여백을 포함한 줄끼리의 간격을 말한다.
기본값은 normal이다.
행간은 단위 없이 숫자만 입력도 가능하다. 이 경우는 폰트 사이즈에 상속돼서 배수로 보이게 된다.
글자가 잘려서 나온다면 그 행간은 픽셀로 되어있을 가능성이 높다.

FONT-SIZE

디폴트 값이 medium이다.
브라우저마다 사이즈가 다르게 정의되어 있기 때문에 절대적인 사이즈는 잘 쓰지 않는다.

FONT-WEIGHT

글꼴의 굵기를 지정할 때 사용하는 속성이다.
기본값은 normal이다.
normal과 bold를 가장 많이 쓴다.
숫자로도 굵기를 표현할 수 있다. normal은 400, bold는 700과 같다.
굵기의 수치는 100부터 900까지 있다.
굵기 자체를 폰트 패밀리 네임으로 가지고 있는 경우도 있다.

FONT-STYLE

글꼴 스타일을 지정할 때 사용하는 속성이다.
예를들어 <em>태그는 강조하고 싶을 때 사용하는 태그로 기본체가 이탤릭체로 나온다.
이 <em>태그를 사용하면서 폰트는 normal로 표현하고 싶을 때 폰트 스타일을 normal로 선언할 수 있다.

FONT-VARIANT

글꼴 변환을 하는 속성으로, 소문자를 작은 대문자 형태로 표현한다.

font-variant:normal/*기본*/
font-variant:small-caps;/*소문자를 작은 대문자로 변환*/

FONT

글꼴 속성의 축약형을 뜻한다.
각 속성마다 선언 순서를 지켜야 하는 제약이 있어서 폰트 축약형을 지양하는 편이다.
font-size와 font-family는 반드시 선언해야하는 필수 속성이다.

웹 폰트(@FONT-FACE)

실무에서 쓰이는 폰트의 명칭으로

시스템 폰트 : font-family로 선언한 글꼴이 선택되는 경우 시스템 상에서 제공되는 값을 그대로 바꿀 수 있는 폰트를 시스템 폰트라고 부른다.
이미지 폰트 : 이미지를 잘라서 제공하는 폰트
웹 폰트 : 아예 다른 글꼴을 서버에 저장해서 제공하거나 웹 경로를 가지고 와서 import해서 제공하는 폰트. 혹은 사용자의 로컬 환경에 글꼴을 다운로드 받아 적용하는 것. 설치형 폰트와 비슷하다.
웹 폰트는 폰트 파일 자체를 웹에서 제공해주는 것이기 때문에 여러 브라우저에서 나올 수 있도록 타입별로 여러가지 파일을 제공해주어야 한다.
폰트 패밀리 자체도 @font-face라고 따로 지정한다.

VERTICAL-ALIGN

수직 정렬을 할 때 사용하는 속성이다.
기본값이 baseline으로, 소문자 x를 기준으로 그 밑으로 위치한 값을 베이스 라인이라고 한다.
버티컬 얼라인을 선언할 때 가장 주의할 점은 인라인 레벨에만 선언할 수 있기 때문에 인라인 요소 또는 테이블 셀 상자의 수직 정렬을 지정할 때 사용한다.
<div>에 선언했을 때 디스플레이 블록 그대로 갖고 있는 경우에는 아무런 영향이 없다.
대부분 부모요소에 상대적으로 정렬된다.

CSS 속성 - TEXT와 WORD

TEXT-ALIGN

텍스트를 정렬할 때 사용하는 속성이다.
기본값이 direction이 ltr로 되어있기 때문에 left로 보면된다.
아랍어같은 경우에는 rtr 즉 right로 볼 수 있다.
center는 가운데 정렬, justify는 양 끝 정렬(한 줄이 조금 늘어날 수 있음.)

TEXT-ALIGH과 DISPLAY의 관계

선언은 블록 레벨에 하고 있지만 텍스트 얼라인은 인라인 레벨에 적용이 된다.
블록 레벨은 텍스트 얼라인으로 정렬할 수 없다.

<div>box</div>

div{
    width:100px;
    height:100px;
    background:red;
    text-align:center;}

div 자체가 전체 화면에서 가운데 정렬로 오는 것이 아니라 div요소 안에 있는 인라인 레벨의 텍스트에 적용돼서 가운데 정렬이 된다.
div 자체를 가운데 정렬 하고 싶다면 margin: 0 auto를 주게 되면 가운데 정렬된다.

TEXT-INDENT

텍스트를 들여쓰기 할 때 사용하는 속성으로, 값으로는 length를 선언할 수 있고, value 문단의 첫 줄 들여쓰기를 사용할 수 있고, 음수도 사용 가능하다.
음수를 사용하면 들여쓰기가 아니라 반대로 튀어나오게 된다.
default값은 0이다.
상속이 되기 때문에 자식요소들이 상속되는 것에 주의하면서 사용해야 한다.

TEXT-DECORATION

텍스트의 장식을 선언할 때 사용하는 속성으로, 기본값은 none이 있고, overline(위쪽 선), underline, line-through(중앙 선)의 값들이 있다.
두 개 이상의 값을 동시에 선언 가능하다.
color는 기본값이 solid(실선)이다.
주의할 점은 선이 텍스트에 의존적이기 때문에 선을 올리거나 내리는 등의 픽셀 값은 이 속성값으로는 조정이 불가능하다.

단어 관련 속성

white-space

공백 관련 제어 가능한 속성으로 기본값은 normal이다.
실무에서 많이 사용되는 값은 nowrap으로, normal인 경우에는 div 요소안에 있는 텍스트들이 자동으로 영역 안에서 줄바꿈이 된다.
그런데 white-space:nowrap을 선언하는 경우에는 공백이 무시되면서 한 줄로 적히는 것을 볼 수 있다.
그 외에도 pre, pre-line, pre-wrap 등의 속성값들이 있는데, pre는 코드를 그대로 화면에 보여줄 때 사용하는 속성이다.

letter-spacing

자간을 의미한다.
기본값은 normal이지만, 픽셀 단위나 다른 단위로도 length 값으로 선언할 수 있다. 음수로 글자 압축도 가능하며, 너무 압축 시키면 겹쳐 보이는 경우도 있다.
normal일 때와 0일 때 거의 비슷하다고 볼 수 있다.
상속이 되기 때문에 선언 시 주의 해야 한다.

word-spacing

단어 간의 간격을 조정한다.
기본값은 normal이고, 속성 값을 늘리면 단어 간의 띄어쓰기가 커지게 된다. 음수도 가능하다.

word-break

단어를 어디서 자를지에 대한 속성이다.
상속이 되며, 텍스트나 폰트 관련된 속성들이 그 값을 상속하는 경우가 많다.

word-wrap

영역 바깥으로 넘어가는 텍스트를 어디서 자를지, 감싸줄지에 대한 속성이다.

word-wrap:break-word;

로 사용하면 텍스트를 중간에 잘라준다.
word-break과 같이 조합해서 사용하기도 한다.
기본값은 normal이다.

이지예

이전 포스트

[TIL] CSS 속성의 정의 및 syntax 확인 법, 속성의 단위

다음 포스트