div와 span

태그를 배울 수록 종류도 많고 쓰임새가 비슷한 것 같으면서도 미묘하게 다른게 참 많다.

 

<div></div>화면 내에서 구역을 나눠주는 태그이다. div태그 안에 들어있는 내용만큼 박스의 크기가 정해지는데,

백그라운드 색을 입혀보니 세로는 텍스트와 딱 맞는데, 가로가 화면을 전부 차지한다.

왜 그런가 했더니 태그의 특성에는 block와 inline 두 종류가 있다고 한다.

 

block : 자신이 존재하는 수평공간에는 다른 어떤 것도 허용하지 않는다.

태그안에 들어가는 요소의 양이 적든 말든 block특성을 갖는 태그는 수평공간을 꽉 차지한다. 말 그대로 block하는 듯.

 

inline : 다른 태그 요소들과 수평공간에 공존할 있다. 다만 block은 크기를 조절할 수 있었다면, inline은 태그 내부의 컨텐츠만큼 늘어난다.

inline 특성을 갖는 span을 이용하면 다음과 같은 결과가 나온다. text에 맞게 크기가 조절된다.

 

span과 div를 사용하면 아래와 같은 결과가 나온다.

span옆에는 분명 공간이 존재하지만, div는 수평공간에 공존하지 않으려 한다. 따라서 먼저 작성된 span이 위로 올라가고 div는 밑으로 밀린다.

 

나는 block특성을 이용해서 콘텐츠의 크기도 조절하면서, inline특성을 살려 수평에 콘텐츠를 여러 개 배치하고 싶을 때

사용하는 방법이 있다.

 

display: inline-block; 를 이용하면 크기도 조절하면서 수평공간에 배치도 가능하다.

 

다른방법은 block특성의 태그에게 float이라는 스타일을 주는 것이다.

float는 띄우는 개념인데, float을 스타일입혀주면 공간이생겨 둘이 달라 붙는다고 들었다.(자세하게 어떤 기능인지..ㅠㅠ)

inline-block과 다른 점은 상자 사이에 있던 여백이 없어졌다.

 

다음은 content, border, padding, margin이다.

 

content : 실제 내용이 들어가는 부분으로, 주로 텍스트 img가 이 부분에 해당한다.

padding : 패딩은 컨텐츠와 보더의 중간 역할이다. 패딩을 이용하면 만들어진 상자 내에서 텍스트의 위치 조정이 가능!

border : 벽?테두리?의 개념인데 컨텐츠와 패딩을 감싸고 있다.

margin : 보더를 포함한 바깥 영역이다. 만들어진 상자 전체를 움직이고 싶을 때는 마진을 이용할 수 있다.

margin: auto 상자의 좌, 우측 남는 여백 공간을 동일하게 반으로 나누고, 양쪽 마진 값에 적용한다. 즉, 상자를 

화면 가운데에 위치하게 한다.

 

position vs padding

position은 마크업이 된 대상만 가능하다. 즉, 텍스트 등은 태그가 아니므로 적용이 불가능하다.

텍스트에 position을 적용하고 싶으면 마크업해도 아무 영향이 없는 <span></span>으로 감싸주면 된다.

 

padding은 일반 텍스트에 사용 가능하다.

 

text-align: 박스 내에 있는 컨텐츠를 정렬할 때 쓴다.

 

relative vs absolute

모든 태그가 왼쪽 상단을 기준으로 한다. 개발자가 포지션을 지정하지 않아도 이미 왼쪽 상단을 기준으로 포지션이

설정 되어 있다. 바로, position: relative인데 상대위치라고 부른다.

 

상대위치는 다른 컨텐츠의 영향을 받고 겹쳐지지않는다, 즉 relative를 적용한 두 개의 컨텐츠는 서로를 만나면 밀린다.

절대위치는 absolute는 다른 컨텐츠의 영향을 받지 않으므로 다른 컨텐츠가 있어도 설정한 좌표에 머무른다.(겹쳐짐)