CSS 추가 설명

Block & Inline

위의 그림에서 노란색 부분이 차지하는것이 영역입니다.
1, 2, 3, 4번째 줄에 해당되는것이 block이고 5번째 줄에 해당되는것이 inline이다.

<header>, <footer>, <p>, <li>, <table>, <div>, <h1>

< 대표적인 block 태그들이다. >

• 항상 새 줄에서 시작하며 좌우 끝까지 영역을 차지한다.
• block은 height와 width 값을 지정 할 수 있다.
• block은 margin과 padding을 지정 할 수 있다.

<span>, <a>, <img>

< 대표적인 inline 태그들이다. >

• 딱 텍스트의 영역만큼 차지한다.
• width와 height를 명시 할 수 없다.
• margin은 위아래엔 적용 되지 않는다.

하지만 이는 css를 통해 성질을 바꿀수 있다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

이와 같은 값을 css 속성을 줌으로서 inline 속성을 가질 수 있다.

.block-span {
  display: block;
}

inline-block

inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. inline-block의 특징은 다음과 같습니다.

• 줄바꿈이 이루어지지 않는다.
• block처럼 width와 height를 지정 할 수 있다.
• 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

position

position에는 총 4가지 값이 존재한다.

• position: static;
• position: relative;
• position: absolute;
• position: fixed;

이중 static은 기본값이다.

position: relative;

이는 static이었을때 기준으로 상하좌우로 움직입니다.

position: absolute;

이는 position: static 속성을 가지고 있지 않은 부모를 기준으로 상하좌우로 움직입니다. 만약 부모중 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

position: fixed;

이는 사용자가 보는 화면을 기준으로 고정됩니다.

float & clear

간단하게 설명하자면 해당 클래스에 해당되는 부분을 띄워서 배치하는것이다. 띄워지기 때문에 기존의 div태그 등의 문단으로 묶이지 않고 전체적인 모양을 흩트려 놓는다. 때문에 사용되는것이 clear이다.

float 요소를 가진 부모태그에 css로 clear:both;를 작성하게되면 해당 부모는 float효과를 받지 않고 float된 요소를 감싸게 됩니다.