0324 Review

Cascade 적용 우선순위

하위	→	→	상위
tag	class	id	style

하위에 적용된 속성은 상위에 동일 속성이 있다면 덮어씌워진다. 참고해서 잘 코딩해보자.
style은 실무에서 무분별하게 사용했다가는 소스가 지저분해져 유지보수에 문제가 생길 가능성이 있으니 최후의 최후로 남겨두는게 좋다.

margin, border, padding, content

각각 박스들 사이의 관계를 제대로 이해하고 값을 넣어야 추후 유지보수도 쉽고 화면 크기 차이에 의해 생기는 문제도 줄일 수 있다.
되도록이면 margin으로 간격을 줄 때 배치를 생각하여 top혹은 bottom중 한가지로 통일하는게 유지보수에 좋다.

Position

<style>
	#id {position: fixed, relative, absolute, sticky;}
</style>

Position을 따로 입력하지 않으면 Static이다.

Position	특징
1. static(2차원)	자식형의 margin에 영향 O, 부모형의 최상단에 붙어 안떨어짐
2. fixed(3차원)	부모형을 기준으로 정해진 위치에서 화면에 고정
3. relative(2,3차원)	2차원과 같이 margin의 영향을 받으나, static과는 달리 자식형의 위치를 최상단에서 옮길 수 있다.
4. absolute (3차원)	margin으로 서로 영향X, 부모의 position이 static이면 부모를 기준하지 않고 body를 기준, relative면 부모를 기준으로 위치
5. Sticky	사용자 시야 안에서는 static의 기능을, 시야 밖에서는 fixed 기능을 수행

Z-index

<style>
  #id {z-index: int;}
</style>

z-index를 통해 3차원의 개체들에게 화면에 표시될 우선순위를 정해줄 수 있다.

Float

<style>
  #id {float: left, right,;}
  #id2 {clear: left, right, both,;}
</style>

float은 개체를 3차원으로 교체한 후, 어떻게 정렬할지 정한다.
clear는 적용될 개체의 위에 존재하는 float형과 2차원의 개체를 겹치지 않도록 하기 위해 사용한다.

신나면서 답답한 기분

입력하는 순간 결과가 나오는 front-end는 매력이 있다. 내가 머리로 그린것과는 달리 형편없는 결과물을 마주해야 하는 고통을 받아야 하는 문제점을 동시에 느낀다는 단점이 있지만 말이다.
색감, 이미지, 배치를 알맞게 설정하는게 이렇게 어려운 일이었다니, 지금까지 아무렇지도 않게 지나쳐온 많은 사이트들의 디자이너들과 퍼블리셔들에게 존경을 표한다. 더 열심히 공부하도록 하자.