TIL no.2_html/css

1. css - position속성으로 정렬하기

position 속성은 레이아웃을 배치하거나 객체를 위치시킬 때 사용한다.

position:static

초기값으로 위치를 지정하지 않을 때와 같다. 따라서 사용할 일이 많지 않지만, 앞에 설정된 position을 무시할 때 사용하기도 한다. top, bottom, left, right 속성값이 적용되지 않는다.

position:relative

위치 계산을 할 때 static의 원래 위치부터 계산한다.
top, bottom, left, right의 위치를 같이 설정할 수도 있다.

#relative{
	position:relative:
    }

#relative2{
	position:relative;
    top:0px;
    left:100px;
    }

position:absolute

relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 가장 가까운 상위 요소를 기준으로(단, static은 제외) 위치가 결정된다. 상위 요소가 없으면 위치는 html 기준으로 설정된다. relative와 마찬가지로 top, bottom, left, right의 위치를 같이 설정할 수 있다.

#absolute{
	position:absolute;
    top:0px;
    left:100px;
    }

position:fixed

브라우저 화면의 상대 위치이다. 따라서 화면이 바뀌더라도 고정된 위치를 설정할 수 있다.(상위 요소에 영향을 받지 않음) top, bottom, left, right의 위치도 같이 설정할 수 있다.

2. css-opacity

요소를 투명하게 만드는 속성

opacity:number/initial/inherit

number : 0.0부터 1.0까지의 수를 넣는다.(숫자가 작을수록 투명하다.)
initial : 기본값으로 설정한다.
inherit : 부모 요소의 속성값을 상속받는다.