DevOps:leehi9817

float 기능을 사용할 때의 문제점 다음 그림과 같이 회색 div 안쪽의 div가 float 되어있고, 회색 div의 아래에 빨간색 div가 존재하는 상황이 있다고 가정해봅시다. 이 경우 회색 div의 형태가 유지되지 않고 2번 그림과 같이 빨간색 div가 위로 올라와 겹치는 상황이 발생합니다. 그 이유는 안쪽의 div가 모두 공중에 있어 회색 div의 높이가 없기 때문입니다. clearfix 사용하기 float를 사용했을 때 발생하는 문제를 해결하기 위해서는 clearfix 기능을 사용해야 합니다. clearfix를 만들어 높이가 없어진 회색 박스에 적용합니다. 가상으로 영역을 만들어 height 값을 인식하도록 만드는 방법입니다. /* clearfix */ .clearfix{*zoom:1;} .cl..

round 지정 방법 div는 기본적으로 사각형 모양을 가지고 있는데, 사각형의 모서리를 둥글게 처리하고 싶을 때 사용하는 속성이 round 입니다. 라운드를 주는 방법에는 네군데를 한번에 주는 방법과 따로 주는 방법이 있습니다. 속성값을 크게 줄 수록 더 둥근 모양에 가까워집니다. 네군데를 한번에 라운드 주는 방법 div { border-radius: 10px; } 네군데를 각각 따로 라운드 주는 방법 div { /* 왼쪽 위 모서리 */ border-top-left-radius: 10px; /* 오른쪽 위 모서리 */ border-top-right-radius: 10px; /* 왼쪽 아래 모서리 */ border-bottom-left-radius: 10px; /* 오른쪽 아래 모서리 */ border..

border 지정 방법 개별 지정 border의 두께, 스타일, 색상을 각각 따로 지정하는 방법입니다. border-width: 선의 두께 border-style: 선의 모양 (none, solid, dotted, dashed, double 등) border-color: 선의 색상 예) 두께가 2px이고 실선인 파란색의 테두리를 div 태그에 지정하는 코드 div { border-width: 2px; border-style: solid; border-color: ##0000ff; } 한번에 지정 위의 세가지 속성을 한번에 지정하는 방법입니다. border: 두께 스타일 컬러; 순서대로 입력합니다. 예) 두께가 2px이고 실선인 파란색의 테두리를 div 태그에 한번에 지정하는 코드 div { border:..

width, height 블록 요소의 가로값과 세로값을 설정하는 속성입니다. ※인라인 요소에는 적용할 수 없습니다. 블록 요소: div, h1~6, p, ul, ol, li, table 인라인 요소: span, a, strong 인라인-블록 요소: form 관련 태그, img 예) div 태그의 가로를 500px, 세로를 60px로 적용하는 코드 div { width: 500px; height: 60px; } 인라인 요소에 가로 세로 적용 방법 display: inline-block; 인라인 요소의 스타일에 위 코드를 추가하면 가로와 세로를 적용할 수 있습니다. 최대(최소) width, height 지정하기 최대(최소) 가로값과 세로값을 지정하는 속성입니다. 예) div 태그의 최대 가로값, 세로값을 9..

text-align 속성 (텍스트 정렬하기) 문단 내에 텍스트를 정렬하는 속성입니다. left: 왼쪽 정렬 right: 오른쪽 정렬 center: 가운데 정렬 justify: 양쪽 정렬 예) center라는 이름의 클래스를 가진 문단을 가운데 정렬하는 코드 .center { text-align: center; } text-indent 속성 (텍스트 들여쓰기) 문단 내 들여쓰기 속성입니다. 속성값은 px, %로 설정 가능하며, px의 경우 음수도 가능합니다. 예) p 태그를 가진 문단을 30px만큼 들여쓰기 하는 코드 p { text-indent: 30px; } line-height 속성 (줄 간격 조절하기) 지정한 문단 안의 각 줄 사이 간격을 조절하는 속성입니다. 속성값은 px, %로 설정 가능합니다...

color 속성 (글자 색 지정하기) 글자 색을 정의하는 속성입니다. 주의할 점은, font-color가 아니라 그냥 color가 맞는 문법이라는 점입니다. 보통 #FFFFFF 형식의 16진수 색상 코드를 많이 사용합니다. 예) red라는 이름의 클래스를 가진 글자 색을 빨간색으로 지정하는 코드 .red { color: #FF0000; } text-decoration 속성 (텍스트에 줄 표시) 글자에 선을 표시하는 속성입니다. none: 밑줄을 표시하지 않습니다 (기본값) underline: 밑줄을 표시합니다. overline: 영역 위에 선을 그립니다. line-through: 영역을 가로지르는 취소선을 그립니다. 예) uline이라는 이름의 클래스를 가진 글자에 밑줄을 표시하는 코드 .uline { ..

font-family 속성 (글꼴 지정) 글꼴(폰트)을 정의하는 속성입니다. 예) h2 태그 부분에 우선적으로 궁서를 적용하고, 궁서 폰트가 없을 시 돋움 폰트를 적용하는 코드 h2 { font-family: 궁서, 돋움; } font-size 속성 (글꼴 사이즈 지정) 글꼴 크기를 정의하는 속성입니다. 예) p 태그 부분의 폰트 사이즈를 17px로 지정하는 코드 p { font-size: 17px; } font-weight 속성 (글꼴 굵기 지정하기) 글꼴 굵기를 정의하는 속성입니다. 예) td 속성 태그 부분의 글꼴을 굵게 설정하는 코드 td { font-weight: bold; } font-style 속성(글꼴 스타일 지정하기) 글꼴 스타일을 정의하는 속성입니다. 속성값에는 normal / ital..

그룹 선택자 각각의 선택자를 그룹지어 속성을 지정하는 방식입니다. 선택자들 간에 공통적인 속성이 있는 경우에 일괄 적용으로 편리하게 사용하는 방식입니다. 각각의 선택자 그룹을 ,(콤마)로 연결하여 표현합니다. 속성 선택자 특정 속성이나 특정 속성값을 가지고 있는 선택자에 속성을 지정하는 방식입니다. [ ](대괄호) 안에 특정 속성 또는 속성값을 넣어 지정합니다. 가상 클래스 a 태그와 함께 링크를 데코레이션 할 때 사용하는 선택자입니다. 가상 요소 실질적으로 내용에 영향을 주지 않으면서 문장의 전후를 꾸밀 수 있는 가상 요소입니다.