본문 바로가기

전체 글160

Margin, Padding 태그를 통한 DIv 여백 설정 알아보기 Div 여백을 설정하려고 보면 한번씩 헷갈릴 때가 있습니다. 그림을 통해 간단하게 Margin, Padding의 범위에 대하여 알아보도록 하겠습니다. Content Div 의 총 너비는 어떻게 될까요? 총 너비는 = Content영역(80px) + Padding좌/우(10px + 10px) + Border좌/우(10px + 10px) + Margin좌/우(10px + 10px) width:80px 설정은 Content 너비이며 Margin, Border, Padding 를 모두 더한 요소의 총 너비는 140px 가 됩니다. 간단하게 CSS Div의 여백 설정 태그인 Margin, Padding 에 대하여 알아 보았습니다. 2018. 4. 14.
CSS hover 효과를 이용한 심플 가로 메뉴 만들기 심플하고 깔끔한 가로 메뉴 만들기 CSS로 심플하고 깔끔한 가로 메뉴를 만들어 보도록 하겠습니다. 또한 hover 등을 이용하여 간단한 효과를 주도록 하겠습니다. 먼저 예제의 결과는 아래와 같습니다. ●이런아이티 ●이런육아 ●이런여행 ●이런맛집 ●이런책 ●이런말 HTML 부분은 div 안에 ul 안에 li로 구성 됩니다. 이런아이티 이런육아 이런여행 이런맛집 이런책 이런말말말 다음은 CSS인 style 부분입니다. 메뉴의 모습은 아래와 같습니다. 그리고 마우스를 올리면 다음과 같이 해당 메뉴의 바탕색이 천천히 변경 됩니다. 조금 임팩트를 주길 원한다면 /*-ms-transform:rotate(10deg);*/ /*-webkit-transform:rotate(10deg);*/ /*transform:rota.. 2018. 4. 6.
[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.