chapter.04-2

1. 배경

css에선 요소에  배경을 깔 수 있다.

근데 이제 box-sizing의 속성에 따라 배경이 적용되는 범위가 달라진다.

 

속성	설명
content-box	컨텐츠의 범위까지 적용
border-box	보더의 범위까지 적용
padding-box	패딩의 범위까지 적용

 

 

보통은 border-box로 많이 주는데,

border 포함해 기준으로 삼으면 선 두께를 주더라도 두께의 외곽선까지가 박스 사이즈이기 때문에,

박스 사이즈를 예측하기 쉽기 때문이다.

그래서 보통 기본값으로 border-box를 준다.

 

그리고 배경에 줄 수 있는 다양한 속성들이 있는데 해당 내용들을 살펴보자

 

background	속성	설명	css 작성 시
	clip	배경이 적용되는 기준을 정해줌	background-clip: border-box;
	image	배경에 이미지를 넣을 수 있음	background-image: url(이미지경로);
	size	배경 사이즈를 지정할 수 있음	background-size: 200px 200px;
	repeat	이미지가 반복되는 규칙을 설정할 수 있음	background-repeat: no-repeat;
	origin	배경 이미지의 시작되는 위치를 정할 수 있음	background-origin: content-box;
	position	배경 이미지의 위치를 정할 수 있음	background-position: 50px 50px;
	color	배경의 색을 정할 수 있음	background-color: #2d2d2d;

 

 

 

---

 

 

2. 색상

색상을 지정하는 방법에도 다양한 방법이 있다.

 

1) rgd

p#one{
        color: rgb(0%, 50%, 0%);
        opacity: 0.5;
    }

p#two{
   	 color: rgb(0%, 50%, 0%, 1);
}

 

rgd 로 색상을 지정해줄 수 있는데, rgb는 빛의 삼원색으로 모든 숫자가 0이면 검정색 100이면 하얀색으로 보인다

rgb에 들어가는 값은 red green blue 순서를 나타낸다.

 

p#one 을 보면 rgb 값을 주고 opacity 값을 따로 줬다.

이때 opacity는 투명도를 나타내며, 최대값은 1로 1일때가 기본값이다 ( 1 = 100 )

p#one에 opacity 값을 0.5를 줘서 흐릿하게 보일 것이다.

 

이때 p#one을 렌더링 해보면 아래 처럼 보인다.

아 배고픈데 뭐 먹을 거 없나

 

 

p#two는 color 속성에 opacity값을 추가한 건데

맨 마지막에 있는 1이 opacity를 나타내며 이는 기본값이다.

 

이때 p#two을 렌더링 해보면 아래 처럼 보인다.

삶은 계란이랑 사이다는 꿀조합

 

2) 16진수 (#ffffff)

 

16진수로 색을 표현해서 넣을 수도 있는데, 대표적인 예를 들자면 포토샵에서 색의 코드를 복사할 때 자주 볼 수 있다.

        p#four{
            /*
                0 1 2 3 4 5 6 7 8 9 A B C D E F
                10 11 12 13 14 15 16 17 18 19 AA BB CC DD EE FF
                00 ~ FF : 255 
            */
            color: #ff000099;
        }

 

맨 뒤에 붙어있는 99는 오퍼시티를 나타내는 것으로, FF가 최대값이고 기본값이다.

opacity를 조절할 때는 00 ~ FF로 나타낸다.

자세한 내용은 다른 포스트에 따로 적어놓도록 하겠다.

 

이것들 외에 다양하게 색상을 설정할 수 있는 방법이 있는데, 나중에 기회가 된다면 포스팅 해보겠다.

 

---

 

 

3. 텍스트 꾸미기

텍스트 꾸미기에도 다양한 css 속성들이 있다.

 

속성	설명
font-family	웹 페이지에 사용 되는 폰트를 지정해놓은 것이다. 지정해놓은 폰트가 없을 시 대체할 수 있게 여러개를 지정한다.
font-size	폰트의 크기를 키워준다
font-weight	폰트의 굵기를 조절할 수 있다
line-height	행간을 조절할 수 있다( 줄과 줄 사이의 간격)
text-align	텍스트의 정렬을 바꿀 수 있다

 

 

이것 외에도 다양한 속성들이 있는데. 해당 내용에 대해서 나중에 개별 포스팅으로 다뤄보겠다.

특히 font 와 text 의 차이가 무엇인지도 자세히 다뤄보고 싶다.