2018/036 [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:relative 속성 예제 예제로를 통하여 position:relative 속성에 대하여 알아보도록 하겠습니다. 【기본예제】 기본예제 ※ width 설정을 하지 않을 경우 자동으로 100% 로 설정 됩니다. 【좌표지정】 ※ body 생략 기준 DIV ※ 가로의 길이가 100%인 div가 오른쪽으로 20px로 이동하기 때문에 그만큼(20px)의 스크롤이 발생하게 됩니다. ※ 기본적으로(아무것도 없는 상태) 좌표지정의 기준은 최상단 좌측이 됩니다. 【텍스트가 자리 하고 있는 경우】 ※ body 생략 텍스트 문구 등이 자리 하고 있습니다. 결과는? 기준 DIV ※ 기준이되는 위치가 '결과는?' 으로 변경 됩니다. 변경 된 기준 위치에서부터 아래로 20px 떨어지게 됩니다. 【relative 또는 static 값의 div가 위치 하고있는.. 2018. 3. 24. CSS Position 속성 이해하기 CSS의 핵심 Position속성 이해하기 position 속성은 이해하기 조금은 어렵지만 꼭! 알아두어야 할 부분입니다. 그래서 이번 포스팅에서는 position의 설정 값에 대한 특징들에 대하여 알아보고, 설정값의 특징을 서로 비교해 가며 설명을 드려보고자 합니다. position 속성의 4가지 설정 값 - static(정적) : 기본값으로 position이 지정되지 않은 상태와 동일 합니다. - fixed(고정) : 화면의 절대적 위치로 설정 합니다. 위치는 top, right, bottom, left 속성을 이용합니다. - absolute(절대) : 화면이 아닌 에 의해 위치가 설정 됩니다. - relative(상대) : 안의 가장 가까운 요소에 의해 위치가 설정 됩니다. static 과 rela.. 2018. 3. 22. CSS를 이용한 DIV 슬라이드 효과 주기 DIV 슬라이드 효과 만드는 방법 3단계로 나누어서 슬라이드 효과 만드는 방법에 대하여 알아 보겠습니다. 그리고 4단계에서는 적요 된 모습을 확인 해 보도록 하겠습니다. 적용 된 모습을 먼저 알고 싶다면 Step4 부분을 확인하시면 됩니다. Step1 먼저 div를 이용하여 효과를 적용 할 버튼 모양을 만들어 보도록 하겠습니다. 단순하게 사각형 모양의 중앙에는 '슬라이드 효과 버튼' 이라는 텍스트를 입력 하였습니다. 슬라이드 효과 버튼 ※ CSS 속성 참고 -webkit- : 크롬, 사파리에서 적용 -moz- : 모질라(FireFox)에 적용 -ms- : 마이크로소프트사의 인터넷익스플로러 에 적용 -o- : 오페라 웹 브라우저에 적용 box-sizing : border-box → border-box값으로.. 2018. 3. 13. 이전 1 2 다음
