네이버 부스트코스 CSS 단위, 배경, 박스모델

 

 

 

 

단위

 

단위는 절대 길이와 상대 길이가 있다.

절대 길이에는 px과 pt가 있는데

pt의 경우 윈도우와 맥이 차이가 있기에

웹 개발 시 권장하지 않는다.

브라우저 호환에 유리한 px를 주로 사용한다.

 

 

 

상대 길이에는 %, em, rem, vw가 있다.

이 중 많이 쓰이는 em의 경우

글씨 크기를 조절할 수 있었다.

1em=16px이어서

만약 20px이면 16px로 나누어본다.

1.25em이 값이 된다.

소수 셋째 자리까지 표시할 수 있다.

 

 

 

색상

 

색상값은 다양하게 선언할 수 있다.

 

 

컬러 키워드

미리 정의된 컬러 이름으로 표현하는 방법.

 

<p style="color:green"> 어떤 색이 나올까요? </p>

 

 

16진법

#RRGGBB

앞 두 자리는 적색

가운데 두자리는 녹색

마지막 두자리는 청색을 의미한다.

 

<p style="color:#0000ff"> 어떤 색이 나올까요? </p>

 

 

 

#RGB

3자리로 축약하여 사용할 수 있다.

 

<p style="color:#00f"> 어떤 색이 나올까요? </p>

결과는 똑같다.

 

 

 

RGB()

rgb(R,G,B)의 형태로 강도를 정의한다.

0~255로 지정할 수 있으며

0에 가까울수록 검정

255에 가까울수록 흰색이다.

 

<p style="color:rgb(255, 0, 0)"> 어떤 색이 나올까요? </p>

 

 

 

 

RGBA()

RGB에서 A가 추가된 형태로

투명도를 조절할 수 있다.

 

<p style="color:rgba(255, 0, 0, 0)"> 어떤 색이 나올까요? </p>

 

투명해져서 아무것도 출력되지 않는다.

 

 

<p style="color:rgba(255, 0, 0, 1)"> 어떤 색이 나올까요? </p>

 

원래 색대로 나온다.

그럼 0.5로 설정한다면?

 

<p style="color:rgba(255, 0, 0, 0.5)"> 어떤 색이 나올까요? </p>

 

반투명해진다.

즉, 0(투명)에서 1(불투명)로 간다.

 

 

 

 

background

 

background 설정을 통해 글씨 뒷 배경을

마음대로 바꿀 수 있다.

 

div{ background-color:pink; }

 

오늘은 div 태그를 이용해 글을 작성하고

css에 코드를 작성하니

 

적용 완료.

 

 

 

 

background-image를 사용하면

 

div { background-image: url("paper.gif"); }

 

 

이미지가 배경으로 적용된다.

꼭 콜론 뒤에 url를 작성하고 

경로를 넣어줌으로써 적용된다.

 

 

 

그럼 배경화면을 반복 여부나 방향을 정하려면

어떻게 설정해야 할까?

그때는 repeat을 설정해본다.

 

 

배경이 계속 반복된다.

한번 여러 태그들을 사용해 바꿔보도록 하자.

 

{background-repeat: repeat-x;}

 

x축으로만 반복된다.

 

x축 방향 즉, 옆으로만 반복된다.

 

{background-repeat: repeat-y;}

 

 

x축과는 반대로 y축 방향, 밑으로 반복되는 모습이 보인다.

 

 

 

그럼 반복하고 싶지 않다면?

 

{background-repeat: no-repeat;}

 

 

생각보다는 다른 모습에 놀랐지만

그 어느 쪽으로도 반복되지 않는 모습이 보인다.

 

 

{background-repeat: repeat;}

 

x, y축 모두 반복된다.

 

 

옆과 밑으로 말이다.

 

 

 

배경 이미지를 이동시킬 수 있다.

left, right, center와

top, center, bottom을 결합하면

보다 섬세하게 이동할 수 있다.

 

 

{background-position: right top;}

 

 

{background-position: center center;}

 

 

 

 

이보다 더 정확히 위치하고 싶다면

% 나 px를 이용하면 된다.

 

{background-position: 20% 10%;}

 

 

스크롤이 길어서 좀 이상하게 나오긴 하지만

x축으로 20, y축으로 10 자리에 출력된다.

 

 

 

background-position: 20px 10px;

 

px을 사용하면 20px과 10px 떨어진 위치에 출력되게 된다.

 

 

 

Background-attachment는 화면 스크롤 움직임에 따라

뒷 이미지의 움직임 여부를 결정한다.

 

{background-attachment: scroll;}

{background-attachment: fixed;}

 

scroll을 이용하면 스크롤 시 글자와 함께 사라진다.

같이 스크롤되는 것이다.

그러나 fixed를 사용하면 배경에 그대로 굳어서

스크롤해도 글자만 올라갈 뿐 

그림은 움직이지 않는다.

 

 

 

box model

 

 

홈페이지는 참으로 많은 네모로 이루어져 있다.

전체적으로는 큰 네모이지만

그 안에 또 네모로 나뉘고

그 속에 또 작은 네모들로 나뉜다.

웹페이지를 볼 때 네모로 나누는 눈을 기르면

조금 더 쉽게 다가갈 수 있다.

 

 

가장 큰 네모 부분을 margin이라 한다.

그리고 그 안의 네모는 border,

그 안은 padding,

마지막 가장 작은 네모는 content 영역이다.

 

 

 

테두리를 둘러보도록 하자.

{border: 10px solid #000;}

 

조금 더 세부사항을 정해주어 

예쁘게 다듬어본다.

 

{margin: 30px;
padding: 30px;}

margin을 이용하면 테두리가 화면에서 이동했고

padding을 이용하면 여백이 생겼다.

 

 

 

테두리 사방으로 크기를 다르게 지정할 수 있다.

 

{border-width: 10px 5px 32px 15px;}

 

 

 

 

또 선의 형태를 다르게 지정할 수 있다.

 

{border-style:dotted;}

 

 

p.dotted {border-style: dotted;} p.dashed {border-style: dashed;}
p.solid {border-style: solid;} p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

 

사이트에서 찾은 다양한 형태의 테두리이다.

 

 

 

그 이외에도 색을 바꾸거나 테두리를 둥글게 하는 등

다양한 설정을 할 수 있었다.

 

{border-radius: 10px;
border-color:green;}

 

 

 

 

padding

 

border와 contend 사이의 여백을 padding이라 한다.

 

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 80px;

 

이런 식으로 설정해주면 border안의 공간이

설정한 px에 따라 변화하는 모습을 보여준다.

 

이 코드는 축약해서 사용할 수 있다.

위의 태그를 살펴보면 시계방향으로 작성했는데

축약식 또한 시계방향으로 움직인다.

 

padding: 10px 20px 30px 80px;

 

결과는 위와 같다.

같은 길이가 있다면 더 축약할 수 있다.

 

 

padding: 10px 20px 30px;

 

 오른쪽과 왼쪽의 길이가 같으면

하나를 생략해준다.

 

왼쪽, 오른쪽 모두 20px로 설정됐다.

 

 

 

 

margin

 

border의 바깥 margin

margin을 이용해 이동시킬 수 있다.

 

margin: 50px;

 

 

padding과 마찬가지로 시계방향으로 돌아가기에

축약 방식이 같다.

 

 

margin의 특색이라고 하면 auto가 있다.

auto를 width와 함께 사용하면 

정렬을 할 수 있다.

 

 

auto만 사용하면 아무런 변화가 없다.

 

 

margin: 50px; 
width:300px

 

하지만, width를 같이 작성한다면

 

가운데 정렬이 된 모습을 보여준다.

 

 

 

margin collapse

두 마진이 붙어서 충돌이 일어난다.

 

 

margin:50px auto;

 

둘 사이에 px을 주면서 떨어트릴 수 있는데

 

자세히 살펴보면 위아래 모두 50px씩 떨어졌지만

중간의 겹치는 부분은 50px, 50px

총 100px 떨어진 것이 아니라

중첩된 것을 볼 수 있다.

 

 

만약 둘의 마진 크기가 다른데 충돌이 일어나면

그 둘 중 더 큰 px의 크기로 중첩된다.

 

 

 

margin & padding

 

margin과 padding의 공통점과 차이점.

둘 다 px, % 같은 단위를 사용하거나 

양수 값을 사용한다는 점에서는 같지만

margin만 음수 값이 가능하고

auto가 가능하다는 점에서 차이가 있다.

auto는 위에서 살펴봤으니 음수 값만 보자.

 

margin:-15px;

 

겹쳐져서 나온다.

padding을 음수 값으로 설정하면 아무런 변화가 없다.

 

 

padding을 몸의 지방이라고 생각하고

border는 피부,

margin은 사람과 사람의 거리라고 생각하면

좀 더 이해하기 쉽다.

 

 

몸의 지방이나 피부는 음수 값을 가질 수 없다.

그러나 사람과 사람은 겹쳐 서 있을 수 있기에

음수값을 가질 수 있는 것이다.

 

 

 

 

저번 수업보다 조금 더 난이도 상승에

작성 시간이 오래 걸렸다.

여러 번 반복해서 내 지식으로 습득해야지.