본문 바로가기

Absolute2

[CSS] position:absolute 속성 예제 이번 포스팅에서는 position:absolute 에 대하여 예제를 통하여 알아 보도록 하겠습니다. 기본예제 ▶ 소스 absolute 기본예제 ▶ 설명 absolute 영역을 눈으로 명확하게 확인하기 위해 배경색을 설정하였습니다. absolute 의 경우 relative 와는 다르게 width 값을 설정 하지 않을 경우 100%가 아닌 내용이 있는 위치까지만 자동 설정 됩니다. 좌표 지정 예제 ▶ 소스 기준div ▶ 설명 좌표지정 속성을 통해 위치를 설정 할 수 있습니다. top:20px 설정으로 상단에서 20px 아래, left:20px 설정으로 왼쪽에서 20px 떨어져서 위치하게 됩니다. 텍스트가 자리하고 있는 경우 예제 ▶ 소스 텍스트가 자리하고 있을 경우? 기준div ▶ 설명 만약 top과 lef.. 2018. 3. 28.
CSS Position 속성 이해하기 CSS의 핵심 Position속성 이해하기 position 속성은 이해하기 조금은 어렵지만 꼭! 알아두어야 할 부분입니다. 그래서 이번 포스팅에서는 position의 설정 값에 대한 특징들에 대하여 알아보고, 설정값의 특징을 서로 비교해 가며 설명을 드려보고자 합니다. position 속성의 4가지 설정 값 - static(정적) : 기본값으로 position이 지정되지 않은 상태와 동일 합니다. - fixed(고정) : 화면의 절대적 위치로 설정 합니다. 위치는 top, right, bottom, left 속성을 이용합니다. - absolute(절대) : 화면이 아닌 에 의해 위치가 설정 됩니다. - relative(상대) : 안의 가장 가까운 요소에 의해 위치가 설정 됩니다. static 과 rela.. 2018. 3. 22.