position에 대해

평소에 이런것이 있구나~ 라고 알고는있었지만 정확히 어떻게 쓰이는지 알지못해서 개인 포트폴리오 제작에 지체가 있었던 부분이다.

position : static, relative, absolute, fixed, sticky

position속성은 이미지, 태그등 위치를 지정해준다.

static

static은 position속성의 기본값, 초기값이다. 위치 설정을 할 수 없다. (값 지정x 따로 속성을 지정하지 않아도 됨)

relative

relative는 상대적으로 위치를 조절 할 수 있는 속성값이다. 정확히말하면 static이었을때 배치되는 위치를 기준으로 상대적 위치를 지정한다. top,bottom,left,right 값 지정가능. 만약 static의 기본위치가 top:5px left:5px이라면

position:relative {
  top: 20px;
  left: 20px;
}

값을 이렇게 준다면 top은 25px left는 25px가 된다.

또한 relative는 확대 했을때 확대된 페이지 사이즈에 맞게 위치가 변경된다.
->(필자가 느낀 absolute와 relative의 큰 차이점)

absolute

문서의 원래 위치와 상관없이 절대적으로 위치를 지정할수있다.

가장 가까운 상위요소를 기준으로 위치가 결정된다.

(? 예제를 보면 이해가 되지만 내 코드에서 보면 이해가 되지않음)

top,bottom,left,right 값 지정가능.

static과 relative와 다르게 바깥쪽에 공간이 생기지않음. 문서의 왼쪽과 위쪽에 딱붙어서 요소가 보여짐.

확대해도 위치가 고정

absolute 속성

한번만 휠을 당기거나 늘려도 위치가 확깨져버림

하지만 position은 absolute속성을 많이쓴다고한다.

홈페이지를 확대할 일이 많이없어서그런가? 이부분에 대해서는 공부가 더 필요할것같다

font-size

font-size에는 px,pt,em,%가 있다. px,pt는 절대적인 크기이고 em,%는 상대적인 크기이다.

em과 %는 상대 크기다보니 페이지 확대를 했을때 너무많이 사이즈가 깨진다.

하지만 모바일이나 크롬이아닌 브라우저로 봤을때 글자크기가 기기에 맞게 조정이된다.

크롬 웹브라우저를 많이쓰는 지금은 px를 쓰는것이 더욱더 안정적일것같다.