[CSS] 12) 디스플레이, 위치 (#inline, #inline-block, #clear)

 

Codecademy front-end engineer course

DAY12

• Learn CSS: Display & Positioning

---

 

-Position

: consistently appear on the left side of the browser. This is the default position for block-level elements.

*The default position of an element can be changed by setting its position property

static	the default value (it does not need to be specified)
1) relative	to position an element relative to its default static position
2) absolute	all other elements on the page will ignore the element and act like it is not present on the page
3) fixed	fix an element to a specific position on the page

 

 

1) relative [상대적인 위치]

:default값인 static에 상대적으로 위치함.

.box-bottom {
  background-color: DeepSkyBlue;
  position: relative;
  top: 20px;
  left: 50px;
}

위의 코드를 적용한 결과 점선 따라서 움직임.

top	moves the element down.
bottom	moves the element up.
left	moves the element right.
right	moves the element left.

 

2) absolute[절대적인 위치]

:다른 요소들과 상관없이 오직 absolute에 해당하는 속성만 적용.

 

전/후

 

3)Fixed[고정된 위치]

:We can fix an element to a specific position on the page (regardless of user scrolling)

*This technique is often used for navigation bars on a web page. [메뉴 등을 고정할 때 용이]

 

 

 

-Z-index(the depth of elements) [우선순위 배정]

:controls how far “back” or how far “forward” an element should appear

.box-top {
  background-color: Aquamarine;
  position: relative;
  z-index: 2;
}
 
.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 1;
}

-> 이경우 box-top 클래스가 더 우선순위에 놓이게 됨.

 

 

---

-Display [디스플레이]

:The display property allows you control how an element flows vertically and horizontally a document.

[수직/수평적으로 나열하고 싶을 때 사용.]

 

-Display property

   1) inline

   2) block

   3) inline-block

 

- Default display tag -> inline

• <em>
• <strong>
• <a>

 

1) Inline [인라인]

: Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content [특정 요소만을 지정하여 편집할 때]

- it displays its content on the same line as the content surrounding it

(they cannot have manually-adjusted width or height)

*do not start new lines but will flow horizontally with sibling elements

 

 

2)Block Display [블록]

: they are the height necessary to accommodate their content.

(Because it takes up the width of their container )

- it starts a new line and can be sized using height&width  property [새로운 라인에서 시작, 높이 지정 필요]

- block-level by default include all levels of heading elements <h1>~<h6>, <p>, <div> and <footer>

 

 

3) Inline-Block Display [인라인 블록]

: Inline-block elements can appear next to each other and we can specify their dimensions using the width and height properties. [요소들을 정렬해줄 때 사용하면 용이.]

(also, it does not start with new lines.)

 

---

-float [플로트]

: Floated elements must have a width specified [속성(왼쪽, 오른쪽)에 따라서 전체 너비를 차지]

*the element will assume the full width of its containing element, and changing the float value will not yield any visible results

left	this value will move, or float, elements as far left as possible.
right	this value will move elements as far right as possible.

 

 

-Clear [클리어]

: specifies how elements should behave when they bump into each other on the page

[겹칠 때 어떻게 해야할지 지정해주는 것]

left	the left side of the element will not touch any other element within the same containing element
right	the right side of the element will not touch any other element within the same containing element
both	neither side of the element will touch any other element within the same containing element
none	the element can touch either side.