CSS / Display and Positioning , Flow of HTML에 관해서 /

 먼저 Block level element 와 Inline element에 대해서 모르고 있었는데, MDN을 통해 알게되었다.

 

간단하게 요약하면, Block level 요소들은 P와 같이 적용되면, 그 것이 속한 부모요소의 범위에 영향을 미치는 종류이고(배경색을 지정해보면 박스처럼 구분됨) 반대로 inline 요소들은 span처럼 지정된 요소자체에만 영향을 미치는(흔히 사용하는 하이라이트 기능처럼 해당 요소에만 영향을 줌) 요소이다. 

 

 

 CSS는 HTML을 디자인적으로 조절해주는 역할도 있지만, 동시에 어떤 순서로 HTML을 배치하게(position) 할 것인지에 대해서도 지정해주는 역할도 한다. 

• position
• display
• z-index
• float
• clear

다섯가지의 property를 이용해 진행된다. 

 

position은 다시, 5가지의 경우가 있다.

 

• static - 단순히 기본값이므로 지정하나 안하나 차이 없음 
• relative
• absolute
• fixed
• sticky

 1) relative, relative로 postion을 지정한 이후에,  추가적으로 offset이라는 것을 붙여서 사용 

• top - moves the element down from the top.
• bottom - moves the element up from the bottom.
• left - moves the element away from the left side (to the right).
• right - moves the element away from the right side (to the left)

꽤나 헷갈리게 되어있지만, top은 top '으로 부터' 마찬가지로 다른 offset들도 ~로부터라고 생각하면 되겠다. 각각 px이나 percent로 지정할 수 있고 , static에는 적용해봤자 변하는게 없다. 

 

2) absolute, ablolute의 경우 다른 요소들을 무시하는 것 처럼 사용하게 할 수 있음. offset을 사용해보면, absolute가 적용된 요소는 그게 속한 parent element의 범위를 무시하고 offset을 따라 움직일 수 있음 

 

3)fixed 유저가 스크롤하는 것과 상관없이 요소를 고정시킬 수있음. 스크롤 하여 내릴때 상단에 제목이나 nav bar같은것을 고정시키는 것으로 활용가능함 

 

4)sticky 화면자체에 고정된다는 느낌이다. 스크롤하여 내려도 다른 요소들위에서 보이고 내려도 계속 위에 떠있다. 흔히 보는 신문사 웹페이지의 광고들처럼 x 버튼 눌러야 사라지는 그런 팝업들 같은 움직임 . parent 요소의 하단까지 갈때까지는 그상태로 sticky하게 있다. 그다음에는 풀린다. 

 

+

 relative와 absolute 가 헷갈리는게 많다. relative 는 요소 그 자체를 기준으로 /  absolute는 그것이 속한 부모 요소를 기준으로 배치한다는 점이다르다. 

Z index 

 Z index의 경우 겹치는 요소들이 있다면, 어떤 요소는 앞에 배치하고 어떤 요소는 뒤에 배치하는지에 관한 기능이다. 그림 두개가 겹칠 때 하나는 맨 앞으로 보내기를 통해 다른 그림 위에 표시할 수 있는 이미지로 이해하고 있다. 

Z index property는 static 한 position에서는 작동하지 않으므로, position 지정을 해줘야 한다. Z index가 없는 ruleset의 경우 기본값인 0을 가진다고 봐도 된다. 

 

 

Inline property 

 위에서 말한 inline 과 block의 차이에 대해, 이것을 조정하는 기능을 가진 명령어가 바로 :  display이다. inline이라는 것은 간단하게 보자면 '같은 줄에 다른 요소가 놓일 수 있는가' 에 대한 것이다. inline의 경우 좌우 가로축으로 다른 글자 , 요소 등이 위치할 수 있으나. block 요소들의 경우 그 행 자체를 그 요소가 먹어버린다고 생각하면 된다. 

 

 이런 상황에서 block인 요소를 inline처럼, 혹은 반대상황에서 inline을 block처럼 만들 수 있는 기능이 바로 display 이다. 세가지 property를 가지는데, 

1) inline

2) block

3) inline-block

 

이다. 1번과 2번은 각각 차이가 있으므로 쉽게 이해가 되지만, 3번의 경우를 쉽게 그림으로 표현하면 다음과 같다. 

in line과 block의 속성을 둘 다 가진 inline block property

 

3번의 경우 width와 height로 위 그림처럼 분할하여 표시할 수 있다. 

 

Float

좌우로 정렬시키는 명령어 

 

 1) right / left 

 2) 꼭 width가 정해져야만 함 , 그렇지 않다면 100% 꽉찬 것으로 이해하고 좌정렬이나 우정렬하는 float의 기능을 우리가 확인할 수가 없게됨.

 

Clear

 Clear의 경우 float와 연관되는데, 예를들어 div(class ="first")  , div(class="second")가 있다고 할 때 

.first

{

 float : left 

}

이런식으로 좌측 정렬된 div 에다가 , 바로 second div를 위치시키면 first div와 충돌(bump)할 수 도있다.

그러한 충돌을 막는 것이 clear이다. 

 

c