[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 | CSS 속성

1. 서론

• CSS 속성에 대해 알아보기
• CSS Position 에 대해 알아보기
• CSS Transform에 대해 알아보기

2. 본론

1) 글자 관련 css 속성

웹 페이지에서 글꼴을 바꾸거나 글씨 크기나 색상을 바꿀 때 사용하는 css 속성을 알아보자

속성	용도
font-family	글자체(글꼴) 변경
font-size	글자크기 변경
font-weight	글자 두께(굵기) 변경
font-style	글자 스타일 변경
text-align	글자 정렬 변경
line-height	줖 높이 지정
text-decoration	글자에 라인스타일 지정
color	글자색 지정

 

font-family

웹페이지에서 글꼴(글자채)를 변경해주는 속성이다.

웹폰트를 변경하기 위해선 컴퓨터에 저장되어 있는 기본 글꼴을 사용하거나 외부에서 글꼴을 다운받아서 적용시키거나 구글 폰트나 눈누같은 사이트에서 제공해주는 폰트 소스를 적용해서 사용하는 방법이 있다.

 

※ 폰트 다운받아서 적용하는법

1. 먼저 원하는 폰트를 다운받는다.(보통 확장자가 ttf로 되어있다!)

2. 폰트 확장자를 woff 로 바꿔준다(구글에 폰트 확장자 변환을 검색해서 적절한 사이트 들어가기)

3. css에서 @font-face 명령어를 넣고 font-family 에 사용할 글꼴 이름, src : url() 괄호안에 폰트가 저장된 경로를 입력한다.

(여기서는 HS산토끼체 2.0을 사용했다 출처 : https://blog.naver.com/hp0/223429922940)

@font-face 세팅

 

4. css에서 글꼴을 바꾸고자 하는 곳에서 font-family 속성을 사용하여 글꼴을 바꿔준다.

속성값에는 내가 지정한 글꼴이름을 적으면 된다!

폰트패밀리 속성으로 적용

결과

 

구글 폰트나 눈누같은 사이트를 이용하면 저 과정을 생략하고 해당 사이트에서 제공해주는 소스를 사용하면 된다.

구글 폰트로 예를 들자면

 

1. 구글 사이트에서 원하는 폰트를 선택한다.

2. 좌측 상단에 있는 Get font 를 클릭한다.

 

3. Get embed code를 누른다.

 

4. link 방식 혹은 import 방식 중 원하는 것을 선택해서 웹문서에 복사 붙여넣기 한다.

참고로 link방식은 html 문서의 head 태그 안에 넣으면 되고

import 방식은 head의 style 태그 내에 붙여넣거나 css 파일에 붙여넣으면 된다!

 

 

5. 적용하고자 하는 요소에 font-family 속성을 이용해서 글꼴을 적용한다.

 

 

font- size

글씨의 크기를 변경해주는 속성이다.

변경하지 않았을때 기본 크기는 16px이며, px, em, rem, % 단위로 변경할 수 있다.

 

font- weight

글씨의 두께를 변경한다.

light, bold, bolder 혹은 100~900 사이의 숫자로 지정한다.(숫자가 높을수록 굵기는 굵어짐)

 

font- style

글씨의 스타일을 변경해주는 속성이다.

주로 이탤릭체로 표시할 때 사용하며, 속성값으로는 normal, italic, oblique가 있다.

 

text-align

문단의 텍스트 정렬 방법을 지정한다.

속성값으로는 left(왼쪽정렬), right(오른쪽 정렬), center(가운데 정렬), justify(양쪽정렬)이 있다.

 

line-height

줄간격을 조절한다. 이 속성을 이용해서 텍스트 세로 정렬을 가운데로 올 수 있게 해준다.

 

text-decoration

텍스트에 줄을 표시하거나 없애주며

속성값으로는 underline(밑줄), text-through(가운데줄), overline(윗줄), none(없음) 이 있다.

 

color

글자색을 지정한다. 지난번 포스팅에도 올렸는데 CSS 에서 색상을 표시하는 방법은 다음과 같다.

 

① 색상키워드

red, blue, white, black, pink 등 css 에서 기본으로 지정된 색상을 사용한다.

② 16진수 코드

0~9 , a~f를 활용한 16진수 코드를 사용한다.

#xxxxxx 처럼 #6자리숫자로 표기한다

       ex)#efefef, #ffffff, #000000
       - #ffffff : red(ff), green(ff), blue(ff)
       - #000000 : red(00), green(00), blue(00)

③ RGB코드

rgb(red, green, blue) 로 표기한다.

0~255 숫자중 사용한다.

        ex) rgb(255,255,255), rgb(0,0,0), rgb(141, 214, 36)

 

이 폰트 설정들에 대해서 각각 설정할 수도 있지만 한꺼번에 font 속성으로 한꺼번에 지정해줄 수있다.

div {
 font : 스타일 두께 크기/줄간격 글자체;
} 

div {
 font : none bold 20px/2 noto-sans;
} /* 이런식으로 한꺼번에 설정 가능 */

 

 

 

2) 크기 관련 css 속성

요소의 크기를 지정할 때 사용하는 CSS 속성들이다.

속성	용도
width	요소의 가로크기(너비) 설정
height	요소의 세로크기(높이) 설정
border	요소의 테두리 설정
padding	요소의 안쪽 여백 설정
margin	요소의 바깥 여백 설정

 

width와 height

width 와 height는 각각 가로 크기와 세로 크기를 지정해주는 속성이다.

min-width, max-height 같은 속성도 쓰이는데 요소의 최소 크기 및 최대 크기를 지정해준다.

이 속성은 요소를 무한정으로 작게 해주거나 크게 하는 것을 방지하도록 제한을 걸어주는 속성이며 반응형 웹 제작시  주로 사용한다.

 

개발자도구를 열고 스타일 쪽을 보면 이런 것이 있다.

 

각각이 의미하는 바를 알아보자

 

border

border는 테두리를 의미한다.

하위 속성으로는 테두리 스타일을 설정하는 border-style, 테두리 두께는 정하는 border-witdth, 테두리 색상을 설정하는 border-color가 있다.

div {
 border-style : solid;
 border-width : 1px;
 border-color : black;
}

위와 같이 border의 속성을 하나하나 주는 방법도 있지만 한꺼번에 하는 방법도 있다.

요소 { border : 두께 스타일 색상} 으로 설정한다.

div {
 border : 1px solid black; 
}

  또한 border는 상, 하, 좌, 우 각각의 방향의 스타일을 다르게 설정할 수 있다.

border-top, border-bottom, border-left, border-right 를 속성으로 주고 속성값을 설정하면 된다.

또 border-radius로 모서리를 둥글게 만들 수도 있다.

<div class="round-border"></div>

.round-border {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 40px;
}

 

위의 예시와 같이 설정한 값만큼 모서리가 둥글어 진다. 만약 원형으로 만들고 싶다면 50%를 주면 원형이 된다.

 

margin과 padding

marigin과 padding은 요소의 여백을 말한다. margin은 요소의 바깥쪽 여백 padding은 요소의 안쪽여백이다.

CSS 박스모델 이미지 출처 : mdn

margin과 padding 은 상, 우, 하, 좌 방향으로 속성값을 부여할 수 있다.

margin은 아래 코드와 같이 방향을 지정해서 적용할 수 있으며 padding도 같은 원리로 적용된다.

div {
 margin : 값; /* 4방향 모두 적용 */
 margin : 값 값; /* 상하, 좌우 적용 */
 margin : 값 값 값; /* 상 좌우 하 적용 */
 margin : 값 값 값 값; /* 상 우 하 좌(시계방향) 적용 */
 
}

위 방법 외에 margin-top, margin-bottom, margin-left, margin-right 등으로 각각 여백 크기를 정해줄 수 있다.(padding도 마찬가지)

 

box-sizing 속성

box-sizing 속성은 박스 모델의 크기를 계산하는 속성이다.

content-box와 border-box가 있다.

content-box는 콘텐츠를 기준으로 크기를 정한다. 

border-box는 테두리 기준으로 크기를 정한다.(content + padding + border)

예시를 들어보자

css 속성을 다음과 같이 설정하고 두 박스모델을 만들어서

하나는 box-sizing속성을 content-box로 다른 하나는 .border-box로 설정했다.

.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border : 10px solid black;
    background-color: pink;
}

위와 같이 둘다 가로 크기와 세로 크기는 동일한데 어떤 것을 기준으로 박스 크기를 정하느냐에 따라서 최종 크기가 달라졌다.

이 box-sizing 속성이 크기를 보여주는 크기를 좌우하므로 협업할 때 통일시켜서 설정해주는 것이 좋다.

보편적으로는 border-box를 많이 쓴다.

 

3) 배경 관련 css 속성

css로 배경을 설정할 때 색상을 사용하거나 이미지를 사용할 수 있다.

속성	용도
background-color	배경색 설정
background-image	배경 이미지 설정
background-repeat	배경 이미지 반복여부 설정
background-attachment	배경 이미지 고정여부 설정
background-position	배경 이미지 위치 설정
background-size	배경 이미지 크기 설정

 

background-color 

배경색을 설정해주는 css 속성이다.

color와 마찬가지로 색상 이름이나 16진수, rgb값을 이용해서 설정해주면 된다.

 

background-image

웹 문서에 배경 이미지를 넣을 때 사용하는 속성이다.

본 블로그의 좌측 화면을 보면 보이는 이미지 배경도 해당 속성을 사용해서 설정한 것으로 보인다.

 

개발자 도구에서 볼 수 있는 background-image 속성

 

url에 이미지 파일 경로를 넣어서 사용한다.

background-repeat

웹 문서에 배경 이미지의 반복 여부를 설정할 수 있는 속성이다.

기본값은 repeat로 되어 있다. no-repeat로 반복하지 않게 설정할 수 있다.

repeat-x 는 브라우저 화면 너비에 가득 찰 떄가지 가로로 반복한다.

repeat-y는 브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다.

 

background-attachment 

배경 이미지를 고정하는 속성이다 

속성값으로는 scroll과 fixed가 있다.

scroll로 기본값이 되어있으며, 화면을 스크롤하면 배경 이미지도 스크롤이 된다.

fixed는 화면을 스크롤 하면 배경 이미지가 고정되고 내용만 스크롤이 된다.

 

background-position

웹 문서에 배경 이미지의 위치를 조절할 수 있다.

div {
 background-position : 수평위치 수직위치;
}

위치는 픽셀, %등의 단위를 사용할 수도 있고 center, top, bottom, left, right같은 키워드를 사용할 수도 있다.

(수평위치에 left, right 사용, 수직위치에 top, bottom 사용)

또한 background-position-x나 background-position-y를 이용해서 각각 위치를 조절할 수 있다.

 

background-size 

배경 이미지의 크기를 조절한다. auto가 기본값이며 원래 배경 이미지 크기만큼 표시한다.

또한 픽셀이나 %등의 사이즈 단위를 사용할 수 있다.

contain이나 cover를 사용할 수 있다.

contain은 요소 안에 배경이미지가 다 들어오도록 이미지를 확대/축소 한다.

cover는 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소 한다.

contain 속성값을 사용한 배경이미지

 

cover 속성값을 사용한 배경이미지

 

배경이미지 설정은 background라는 속성을 이용해서 한꺼번에 속성값을 줄 수 있다.

div {
 background : 색 이미지 반복 고정 위치/크기; 
}

div {
 background : url(경로) no-repeat fixed center/cover; 
} /* 색상 속성값은 생략 가능하다. */

 

 ※ 배경을 그라데이션 효과 주기

background 에 linear-gradient 혹은 radial-gradient로 그라데이션 효과를 줄 수 있다.

 

div {
    background: linear-gradient(lightpink, lightgreen);
} /* 선형 그라데이션 */

div {
    background: radial-gradient(lightpink, lightgreen);
} /* 원형 그라데이션 */

이 그라데이션 속성은 background-image 속성을 사용하는 것이다. 

그래서 background-color 에 linear-gradient를 주면 결과가 나오지 않는다.

또한 배경이미지와 그라데이션 효과를 한꺼번에 줄 수 없다.

배경이미지와 그라대이션 효과를 같이 준 것처럼 보이게 하려면 html내에서 태그 구조를 바꿔서 하는 방법이 있다.

 

위의 그림과 같이 테두리에 그라데이션이 있는거처럼 하려고 background에 그라데이션과 이미지를 같이 넣었더니 둘은 중복된 속성이라서 같이 적용이 되지 않았다.

그래서 먼저 그라데이션을 넣을 박스하나를 만들고 배경 이미지를 넣을 박스 하나를 만들었다.

 

그런다음 바깥박스에 그라데이션을 넣고 안쪽박스에 배경이미지를 넣는 방식으로 했다.

 

border 자체에 그라데이션을 넣는 속성도 있다고 한다.

border-image : linear-gradient()를 쓰면 된다고 하는데 이 속성이 border-radius와 호환이 되지 않아서

결국 쓸 수 없는 방법이기에 박스를 두개 만드는 방법을 택했다.

 

linear-gradient 내에서 속성값을 변경해서 그라데이션의 방향과 각도를 변경할 수 있다. 또 2가지 색뿐만 아니라 여러가지 색을 넣어서 그라데이션을 넣는 방법도 있다.

이런식으로 여러가지색을 넣어서 무지개를 만드는것도 가능하다!

방향을 바꾸거나 각도를 넣으려면 linear-gradient 앞에 속성값을 하나 더 넣어주면 된다.

div {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue,navy, purple);
} /* 그라데이션 방향 변경 */

.grad1 {
    background-image: linear-gradient(45deg, red, green, blue);
} /* 그라데이션 각도 변경 */

 

4) CSS Position

CSS의 Position 속성은 웹문서에서 요소의 위치를 효과적으로 배치해주는 속성이다. 

position 속성을 사용하면 요소에 위치값을 지정해서 자유자재로 요소를 배치할 수 있다.

위치값은 top, bottom, left, right 속성으로 설정해줄 수 있다.

 

position 속성에는 static, relative, absolute, fixed 가 있다. (sticky 도 있는데 여기;서는 다루지 않았다.)

 

static

static은 position을 따로 설정하지 않아도 기본값으로 설정되어 있는 값이다.

문서의 흐름에 맞게 블록요소는 위에서 아래로, 인라인 요소는 왼쪽에서 오른쪽 방향으로 배치된다.

(static 요소의 위치를 변경하려면 margin을 이용하면 된다! 그런데 margin을 이용하면 다른 요소의 위치에도 영향을 줄 수 있다.)

 

relative

위치 이동 속성이 적용된다. 위치값을 주지않으면 static 처럼 문서흐름에 맞게 배치된다.

그래서 위치 이동 속성을 주면 원래 있어야 할 자리에서 주어진 값만큼 이동한다.

relative는 이런 특징 때문에 뒤에 설명할 absolute의 부모로 많이 쓰인다.

 

absolute

부모를 기준으로 위치를 이동하는 포지션이다.

부모가 될 수 있는 포지션은 static을 제외한 포지션이다 (relative, fixed, absolute 일반적으로 relative를 부모로 많이 쓴다.)

부모요소와 조상요소 중 어느 요소에도 포지션이 없으면 뷰포트를 기준으로 이동한다.

fixed

보이는 화면(뷰포트)을 기준으로 이동하는 포지션이다.

스크롤이 되어도 자리가 고정되서 해당 특성을 사용하여 주로 브라우저의 header나 footer에 많이 쓰인다.

또한 스크롤이 되어도 계속 화면에 보여야 하는 아이콘에도 많이 사용한다.

스타벅스 홈페이지에서 찾아볼 수 있는 fixed 포지션 header에 쓰임

 

스타벅스 홈페이지에서 찾아볼 수 있는 fixed 포지션 / 배지 아이콘에 쓰임

 

z-index

겹치는 요소들에 대한 순서를 결정해주는 속성이다

absolute와 fixed 등을 사용해서 위치를 정할 때 서로 겹칠 수도 있다.

이때 어떤 것을 앞에 두고 어떤 것을 뒤에 둘지 정할 때 사용하는 속성이다.

숫자 값이 클수록 더 위에 쌓인다.

 

5) CSS Transform

요소에 이동(trenslate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하는 함수를 제공하는 속성이다.

trasnform : 함수 

방법으로 사용한다.

div {
 trasnform : translate(120px); 
}

 

종류	설명	예시
translate()	지정한 크기만큼 이동한다.	trasnlate(120px, 50px) : x축으로 120px, y축으로 50px 이동 translateX(50px) : x축으로 50px 이동 translateY(80px) : y축으로 80px 이동
scale()	지정한 크기만큼 확대/축소한다	scale(2) :  2배 확대 scale(0.5) : 0.5배 확대(2배 축소)
rotate()	지정한 각도만큼 회전한다.	rotate(30deg) : 30도 회전 rotateX(120deg) : x축으로 120도 회전 rotateY(180deg) : y축으로 180도 회전
skew()	지정한 각도만큼 기울인다.	skew(60deg, 70deg) : x축으로 60도, y축으로 70도 기울기 skewX(120deg) : x축으로 120도 기울기 skewY(30deg) : y축으로 30도 기울기

 

사실 이 속성은 말로 푸는 것보다 직접 해보고 봐야지 더 와닿는 것 같다,

https://developer.mozilla.org/ko/docs/Web/CSS/transform mdn 사이트를 참고해서 직접 느낌을 보자.

 

transform-origin

변형되는 기준점을 설정하는 속성이다.

transform 속성을 통해서 요소에 변화가 있을 때 특히 회전이나 기울임같이 어떤 축을 기준으로 변경이 이루어질 때

transform-origin 을 통해서 기준이 되는 축을 바꿔줄 수 있다.

이미지 출처 : https://dev.to/themodernweb/css-transform-complete-guide-on-css-transform-everything-you-need-for-good-developer-841

 

 

위 그림과 같이 기본값은 center로 되어있다.

top, bottom, left, right 등을 사용해서 기준이 되는 변경축을 변경해줄 수 있다.

 

 

6) CSS Transition

css 속성값이 변화할 때 일정 시간동안 부드럽게 변하가 일어나도록 설정해주는 속성이다.

예를 들면 배경색이 변화하거나 transform 등으로 요소에 변화가 일어날 때 시간에 따라 서서히 변화하는 느낌을 줄 때 사용한다.,

종류	설명
transtion-property	트랜지션의 대상을 지정함(트랜지션을 줄 속성)
transtion-duration	트랜지션을 실행할 시간 지정
transtion-timing-function	트랜지션의 실행 형태 지정
transtion-delay	트랜지션의 지연 시간 지정

 

트랜지션은 각 속성으로 각각 값을 줄 수도 있지만 한꺼번에 줄 수도 있다.

이미지 출처 : 코딩온 강의 자료

 

예시

div {
 transition: transform .5s ease-in .5s;
} /* transform 속성을 0.5초 동안 ease-in 타이밍으로 .5초 대기시간을 갖고 트랜지션 실행 */

 

여기서 타이밍 함수란 가속도를 설정하는 것으로 종류는 다음과 같다.

• ease : 처음엔 천천히 시작하고 점점 빨라지다가 마지막에 천천히 끝내기 (기본값)
• linear : 시작부터 끝까지 똑같은 속도로 진행(등속도)
• ease-in : 느리게 시작
• ease-out : 느리게 끝내기
• ease-in-out : 느리게 시작하고 느리게 끝내기
• cubic-bezier(n,n,n,n) : 배지에 함수를 정의해서 사용 n값은 0~1 사이의 값 사용 (직접 가속도를 설정할 때 사용)

위의 트랜지션 설정을 사용하면 더욱 효과적인 변화 효과를 줄 수 있다.

( https://matthewlein.com/tools/ceaser이 사이트에서 가속 효과를 확인할 수 있다.)

또한 개발자도구에서 가속도를 준 것을 직접 조절해보면서 확인할 수 있다.

 

 

3. 결론

CSS 에서 많이 쓰이는 속성들에 대해 알아보았다. 해봤는데도 다시 하려니까 은근 헷갈리고 생각이 나지 않았다.

역시 꾸준한 복습이 중요하다! 제일 헷갈렸던 것은 transform과 position 그리고 배경이미지의 위치를 정하는 것이었다. 

위치 이동에 조금 약한것 같으니 그 부분에 대해서 조금 더 신경을 쓰고 공부를 해야겠다. 

 

4. Reference

1. 코딩온 강의 자료

 

2. Do it! HTML+CSS+자바스크립트 웹 표준의 정석

https://product.kyobobook.co.kr/detail/S000001818002

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 | 고경희 - 교보문고

 

3.

https://soharu.tistory.com/2

웹폰트 적용 방법과 웹폰트 확장자 알아보기

 

4.

https://codingapple.com/unit/html-18-webfont/

HTML CSS 웹폰트 넣는 법과 안티앨리어싱 - 코딩애플 온라인 강좌

 

 

5.

https://blog.naver.com/0uptopclass/223046174149

[웹퍼블리싱] 웹폰트 적용

 

6.

https://developer.mozilla.org/en-US/docs/Web/CSS/font

font - CSS: Cascading Style Sheets | MDN

 

7.

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model

박스 모델 - Web 개발 학습하기 | MDN

 

8.

https://velog.io/@dltjsgho/css-border%EC%97%90-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-%EB%84%A3%EA%B8%B0

css : ) border에 그라데이션 넣기

 

9.

https://aboooks.tistory.com/362#google_vignette

[css3] gradient (linear-gradient) 사용법

 

10.

https://velog.io/@mangozoo20/CSS-transform-%EB%B3%80%ED%98%95-%EC%A0%95%EB%A6%AC

CSS transform (변형) 정리

 

11.

https://dev.to/themodernweb/css-transform-complete-guide-on-css-transform-everything-you-need-for-good-developer-841

CSS transform - Master CSS transform ? Learn to rotate, scale and much more