4일차 : 박스모델

4일차 : 박스모델

 

CSS가 무엇인지부터 속성과 선택자까지 배웠으니 이제 디자인을 해봐야겠죠?

 

디자인을 시작하기 전에, 박스모델이라는 매우 매우 중요한 개념을 먼저 알아야 하는데요.

 

지난 번에 배운 것처럼 구글에 CSS box model 을 검색해봅시다.

 

 

박스 모델은 CSS에서 디자인과 레이아웃에 대해 이야기 할 때 사용됩니다.

보이지 않아서 그렇지, 모든 HTML 요소들은 박스로 둘러 쌓여 있는데 이 박스를 가르키는 것이 바로 박스 모델입니다.

 

박스모델은 가장 안쪽의 내용과 테두리인 보더, 그리고 그 사이의 여백인 패딩, 테두리와 테두리 사이의 여백인 마진으로 이루어져 있습니다.

 

디자인을 하려면 위치를 옮기고 예쁘게 만들어야 하는데요. 레이아웃도 마찬가지이구요.

배치를 하려면 구획이 어떻게 나누어져 있는지 살펴보는 것이 먼저입니다.

 

자꾸 박스, 박스 하는데 지금까지 만든 웹페이지에서는 박스가 전혀 보이지 않았죠.

그렇다면 박스를 눈에 보이게 만들어 줍시다. 테두리를 표시하며 되겠죠?

먼저 border-style:solid 는 테두리의 형태를 실선으로 만들어 줍니다.

다음으로 border-color:black 을 이용해 테두리의 색을 칠해줍니다.

한꺼번에 border:solid black 이라고 입력해 주셔도 됩니다.

(border-width로 두께를 설정해 주어도 되는데, 저는 따로 설정하지 않았어요.)

 

제목에 해당하는 h1은 검정색으로, 하이퍼링크에 해당하는 a는 빨강으로 칠해볼게요.

자 이렇게 박스의 모양을 보면, 형태에 따라 크게 두 가지로 나뉘는 것을 알 수 있습니다.

 

 

1. 박스로 화면 전체를 사용하는 태그 - block level element

 

제목을 나타내는 태그는 박스에 테두리를 그리면 오른쪽 끝에서 왼쪽 끝까지 화면을 꽉 채우는 것을 볼 수 있습니다. 

제목이 아닌 태그도 display를 사용해 block level element로 변경해주면, 제목처럼 화면을 꽉 채우는 태그로 변합니다.

display:block -> block level element로 변경

하지만 이렇게 되면, 글자가 한글자이거나 두글자이거나 관계없이 한 줄을 다 차지해 버립니다.

앞 뒤의 글자는 자동으로 줄바꿈이 되고, 그 한 줄에는 블록 레벨로 설정해 놓은 태그만 남게 되는 것이죠.

예를 들어 하이퍼링크 태그인 a가 블록 레벨 요소라면 하이퍼링크가 등장할때마다 줄바꿈이 되니 매우 불편하겠죠?

이럴 때 필요한 것이 인라인 요소입니다.

 

2. 박스를 자신의 부피만큼 사용하는 태그 - inline element

 

위의 스크린샷에서 보면, 하이퍼링크를 걸어놓은 곳마다 빨간 박스가 생긴 걸 볼 수 있죠.

이런 태그가 박스를 자신의 부피만큼 사용하는 인라인 요소입니다.

마찬가지로 display를 이용하면 블록 레벨 요소도 인라인 요소로 변경할 수 있어요.

display:inline -> inline element로 변경

 

display 하니까 아예 태그를 안보이게 하는 명령어도 있습니다.

바로 display:none입니다.

태그가 분명 존재하지만, 코딩창에서만 보일 뿐 웹페이지에서는 감쪽같이 사라지는 것이죠.

 

 

 

◎ 자 그럼 이제 디자인은 어떻게 할까요?

 

맨 위에서 박스 모델의 각 명칭을 배웠잖아요.

그리고 모든 태그는 박스로 둘러쌓여 있다는 것을 알았죠.

 

여기서 박스 각 부분의 값을 상/하/좌/우 다르게 설정해 준다면?

바로 위치를 변경할 수 있겠죠.

 

박스에 테두리를 치는 법도 배웠으니, 이걸로 가시적인 구획 나누기를 할 수 있습니다.

바로 이런 식으로요!

 

저는 뭔가.. 끝에서 끝을 잇고 싶지 않아서 일부러 마진을 양옆에 줬어요.

그랬더니, 리스트들과 아래 내용 부분도 왼쪽에 똑같이 마진을 줘야 정렬이 된 느낌이 들더라구요.

 

꿀팁!

리스트 박스의 오른쪽에 선을 그어준 후, 제목 부분의 아래마진을 0으로 설정하면, 보이는 것처럼 T자를 만들 수 있어요.

무슨 말이냐구요? 마진이 0이면 주위에 있는 태그의 박스 테두리와 선을 공유한다는 말이죠!

네모가 원래 두개였는데, 둘 사이의 간격이 없어져서 변이 겹쳤다고 생각하면 됩니다.

 

이런식으로 디자인을 하는 것이었어요. 레이아웃 변경.. 너무 신난다..

처음에 페이지가 구려보였던것은 다 이런 걸 배우지 못해서 그런거였습니다..!

이제 좀 나아보이네요.

 

 

◎ 다른 웹페이지의 생김새 살펴보기!

 

자, 허접한 제 페이지 말고, 예쁜 페이지들은 과연 어떻게 생긴걸까요?

눈으로 보는 것말고 어떻게 입력해야 내 페이지도 저렇게 바꿀 수 있는걸까요?

궁금하면 직접 그 페이지의 코드를 살펴보면 됩니다!

 

여러분들 왜 가끔씩 F12 잘못 눌러서 나오는 창 있죠? 이번에는 실수가 아니라 거기로 직접 들어가는 겁니다.

웹페이지에서 우클릭 후 insptection (검사) 를 선택하세요.

 

아래부분에 styles를 잘 살펴보면, 어? 어디서 많이 본 모양이죠?

잘 안보이시는 분은 스크롤을 아래로 쭉 내려주세요.

 

이렇게 다른 웹사이트들의 생김새를 살펴보면 '여기는 박스의 크기를 이렇게 변경하여 이런 모습으로 디자인한거구나.. ' 라는 깨달음을 얻을 수 있습니다!

 

 

 

 

 

☆ 그 외의 꿀팁!

 

선택자에 ,를 넣음으로써 여러개를 한 번에 선택하여 꾸미는 것이 가능합니다.

또한, 속성을 적는 란에 띄어쓰기를 사용해 여러가지 속성도 한 번에 적용 가능합니다.

 

○ 예시

<style>

h1, a{border:5px solid red;}

</style>