[CSS] 여러가지 속성, 속성값 / 폰트 설정, 배경 설정

1. 여러가지 속성, 속성값

 

 

1) 폰트 설정

- font-size: 크기 단위  -> 폰트의 크기

주로 px 단위를 사용하며, 각 선택자의 글자 크기를 설정할 수 있다.

 

- color: 색상코드 or RGB 코드 등  -> 글자 색깔 설정

h1태그와 h2 태그에 글자 색깔이 다르게 적용되었다. 

 

- font-weight : 100~900사이 100단위의 숫자 -> 글자 굵기

h1 태그에 글자 굵기를 다르게 적용하였으며 "belong"이라는 id를 가진 '한양대학교 화학공학과 3학년' 글자에 링크가 걸려있음을 표현하기위해 굵기를 더 굵게 설정하였다. (HTML 파일에 링크가 걸려있음)

 

- text-decoration: none(아무것도 없음) / underline(밑줄) / line-through(취소선) 

원래 링크를 넣으면 파란색 글자에 밑줄이 쳐진 형태가 나와야하는데 '한양대학교 화학공학과 3학년'이라는 글자에는 밑줄이 없다. 이는 text decoration에서 none이라는 속성값을 넣어줬기 때문이다.

 

- font-family: 폰트명  -> 폰트 설정

앞의 글을 참고하면 된다.

 

- letter-spacing :      -> 자간을 의미한다.

h2 태그에 있는 글자들의 자간을 넓혀주었다. em은 '부모 태그 폰트 사이즈의 몇배인가'를 의미하는 크기를 나타내는 단위이다. 이 웹사이트에서는 h2태그의 부모태그는 body 태그밖에 없으므로 기본적인 자간의 0.6배만큼 자간이 설정되었을 것이다.

 

 

2) 배경 설정

- width: 크기 단위  ->  각 선택자의 박스 크기를 지정한다.

나는 전체 웹사이트의 크기를 500px로 지정해주었고, 사진은 전체 크기의 60%만 차지하도록 설정해주었다.

 

- background-image:      -> 배경 이미지를 설정해줌

linear-gradient(   deg, rgba(     ), rgba(    )) 는 그라데이션 배경을 설정해주는 속성값이다. 몇도의 각도로(기본은 위에서 아래로 내려오는 180도) 어떤 색상에서 어떤 색상까지 그라데이션을 설정해줄 것인지 입력하면 된다. 구글의 gradient generator 사이트에서 값을 가져올 수도 있다.

https://cssgradient.io/

CSS Gradient — Generator, Maker, and Background

사진을 넣어줄 수도 있는데 url('           ') 을 이용하면 된다.