박스모델의 연습과 멀티클래스 네임, 가상클래스 네임 by S

그럼 앞의 이론을 바탕으로 간단한 박스모델을 연습해 보자.
물론 리셋 css가 들어가있는 상태이다.

 

 

<연습1>

 

아래와 같은 박스들을 만들면 되는데,
440x440 사이즈의 선두께가 4픽셀인 빨간 테두리에

100x100, 392x100, 200x100 사이즈의 세 개 박스가 들어가 있고
그 중 가운데 392x100의 박스에는 텍스트들이 테두리에서 안쪽으로 5픽셀의 공간을 두고 들어가 있다.

 

 

 

 

이를 코딩하면 아래와 같다.

 

 

 

클래스 네임은 임의로 지정해 준 것이며 바깥 쪽 박스를 mother,

안에 박스를 차례로 son1, son2, son3 으로 주었다.

이때 주의할점은 보더(border)값과 패딩(padding)값을 계산해서

가로값(width), 세로값(height)을 주어야 한다는 것.

위에서는 'mother'의 패딩값을 사방으로 20픽셀로 주고 나머지는 그에 맞춰 'son'에서 마진으로 간격을

조정했는데 이건 딱히 정답이 있는건 아니다.
본인이 하기나름인데 무수히 많은 작업을 하다보면 겹치는 부분을 마진으로 넣어야 할지 패딩으로 넣어야 할지, 위로 넣어야 할지 아래로 넣어야 할지 헷갈리게 마련.

자신만의 규칙을 만들고 상황에 따라 적용시킬 수 있어야한다.
가장 좋은 방법은 다른 페이지에 공통된(재사용 가능한가의 문제) 부분이 있는지를 살피고

코딩을 최대한 줄일 수 있도록 실용적으로 사용하는것.
이를 위해 구조화, 규격화 하는 연습이 끊임없이 필요하다.

 

 

두번째 392x100의 박스는 굳이 가로(width)값을 주지 않아도 <div>태그가 블록요소이기 때문에

사용가능한 공간내에서 꽉 들어찬다.
이미 바깥박스에 사방으로 패딩 20을 넣었기 때문에 굳이 계산해서 width값을 넣어주지 않아도

결과물은 같다는 것.

이를 브라우저에서 확인하면 아래와 같이 출력된다.

 

 

 

 

이때 가운데 박스의 글씨는 패딩값 10을 사방으로 주었다 해도 글이 길어진다면 아래쪽은 적용되지 않고

밑으로 계속 넘쳐 흐른다는 사실.

 

 

 

---

 

 

<연습2>

 

아래와 같은 크기의 간단한 박스들을 만들어보자.

 

 

 

이를 코딩하면 아래와 같다.

 

 

 

물론 이도 정답이 있는건 아니다.

안쪽박스에서 전부 바깥쪾으로 마진을 주어 해결할수도 있겠으나

 

위에서는 제일 바깥쪽 박스(mother)에서 안쪽 사방으로 패딩을 준 후 안쪽 두번째와 세번째 박스(son2)를 위쪾으로 마진10 만큼 주어 공간을 띄웠다.

 

 

 

 

 

 

그렇지만 이런 반복되는 같은 스타일은 다른방식으로 처리할수도 있다.

 

 

 

첫째, 멀티클래스 네임사용

 

멀티클래스는 여러개의 클래스네임을 같이 사용하는것을 말한다.

안쪽박스의 클래스 네임을 전부 'son'으로 주고 위쪾으로 마진 '10'을 주었다면 안쪽 첫번째 박스의 마진이 'mother'에 준 패딩이랑 겹쳐서 위쪾이 총 20픽셀의 공간이 생기게 되는데

 

이 때 첫번째 박스에 한칸띄어 클래스 네임을 더 주고 

.son.first 이런식으로 사용하여 마진을 0으로 만들면 맨 위쪾에 들어간 마진10이 빠지면서 결과가 같아진다.

 

스타일이 중복이 될 경우 클래스 네임 한개보다 클래스 네임 두개를 쓴것이 우선되므로

첫번째 .son에서 안쪽박스들의 마진을 위쪾으로 전부 준 후에

두번째 son.first에서 첫번째 박스의 위쪾으로 준 마진 하나가 도로 빠진다는 것.

 

 

 

 

 

 

 

둘째, 가상클래스 네임사용

 

가상클래스는 말 그대로 클래스 네임을 따로 넣어주지 않고도 사용할 수 있다는건데

'익스플로러6' 까지는 적용되지 않아서 제작년까지도 쓸 수 없었다고 한다.

현재는 익스플로러6 사용자가 거의 없으니 사용되는데,

 

아래처럼 같은 이름을 가진 동급의 자식들 중 first-child를 써서 첫째를 부르거나

last-child를 써서 막내를 부를 수 있다. 

 

그러니까 멀티클래스를 사용했을때와 동일하게 'mother'에 패딩을 사방으로 넣고

'son'에 위쪾으로 패딩 10만큼 준 후, 'son중 첫번째 놈'의 마진을 다시 0으로 만들어 주었다.

결과물은 역시 똑같이 출력된다.

 

 

 

 

 

'멀티클래스 네임'과 '가상클래스 네임'은 첫번째 방법보다 스타일의 사용을 줄이면서

좀 더 구조화 할 수 있으므로 상황에 따라 적절히 사용할 것!!!