#17 - CSS 기초 - 단위 / 속성 기본

단위

단위 적용 예시

/*-------------px %-------------*/
.class{ 
    width : 50px;
    height : 50%;
}
/*-------------em-------------*/
/*--자식 요소의 가로값은 절반이 됨--*/
.parent{
    width : 60em;
    font-size : 10px;
}
.child{
    width : 30em;
}
/*-------------rem-------------*/
.html{
    width : 60em;
    font-size : 10px;
}
.child{
    width : 30em;
}
/*-------------vw vh-------------*/
.class{ 
    width : 50vw;
    height : 5vh;
}
/*-------------vmin vmax-------------*/
.class{ 
    width : 50vmin;
    height : 5vmax;
}

단위 설명

단위	의미
px	크기를 지정하는 값. 픽셀 단위. 고정 값.
%	크기를 지정하는 값. 부모 요소 대비 n%를 적용.
em	자기 자신의 폰트 사이즈에 영향을 받음. 가변적이며 상속되는 특징이 있음. 상속 요소를 모두 이해해야하기 때문에 다루기 어려움
rem	html에 지정된 폰트 사이즈에만 영향을 받음.
vw	출력되는 전체 가로 사이즈 %
vh	출력되는 전체 세로 사이즈 %
vmin	출력되는 화면에서 가로/세로 중 짧은 너비를 기준으로 한 %
vmax	출력되는 화면에서 가로/세로 중 넓은 너비를 기준으로 한 %

 

---

 

 

속성 기본

상우하좌 입력 방법

생략 방법

속성을 입력할 경우 상하좌우 입력을 한번에 적용할 수 있으며, 몇개를 입력하는지에 따라 아래와 margin과 같이 적용된다.

상우하좌는 상을 중심으로 시계방향을 떠올리면 쉽다.

 

/* 상 우 하 좌 */
.class{
	margin : 10 20 30 40;
}

/* 상 좌우 하 */
.class{
	margin : 10 20 30;
}

/* 상하 좌우 */
.class{
	margin : 10 20;
}

/* 상하좌우 */
.class{
	margin : 10;
}

별도 입력 방법

"속성+방향"으로 특정 방향의 속성을 부여할 수 있다.

 

/* 상 */
.class{
	margin-top : 10;
}

/* 하 */
.class{
	margin-bottom : 10;
}

/* 좌 */
.class{
	margin-left : 10;
}

/* 우 */
.class{
	margin-right : 10;
}

기본 속성

기본 속성 예시

/*--------가로 세로--------*/
.class{
  width : 100%;
  min-width : 100px;
  max-width : 500px;
  
  height : 100%;
  min-width : 100px;
  max-height : 500px;
}
/*--------마진--------*/
.class{ margin : 10px 20px 30px 40px; }
.class{
    margin-top : 10px;
    margin-right : 20px; 
    margin-bottom : 30px;
    margin-left : 40px; 
}
/*--------패딩--------*/
.class{ padding : 10px 20px 30px 40px; }
.class{
    padding-top : 10px;
    padding-right : 20px; 
    padding-bottom : 30px;
    padding-left : 40px; 
}
/*--------선--------*/
.class{ border : 1px solid black; }
.class{
    border-width : 1px; 
    border-style : solid; 
    border-color : black; 
}
.class{
    border-top-width : 1px; 
    border-top-style : solid; 
    border-top-color : black; 
}
/*--------그 외--------*/
.class{
    box-sizing : boder-box;
    display : block;
    overflow : hidden;
    opacity :1;
}

기본 속성 설명

속성	개별 속성	의미	값
width		가로 값	auto, 숫자+단위, 0
max-width		최대 가로 값
min-width		최소 가로 값
height		세로 값
max-height		최대 세로 값
min-width		최소 세로 값
margin	-	외부 여백, %사용 시 부모 요소의 가로사이즈 대비 % 적용. 마진의 중복 형제의 위 여백 + 형제의 아래 여백일 때 중복 부모의 위 여백 + 자식의 위 여백일 때 중복 부모의 아래 여백 + 자식의 아래 여백일 때 중복	auto, 숫자+단위, 0
	margin-방향	top / right / left / bootom 상우하좌의 개별 속성으로 사용 가능
padding	-	내부 여백. 너비 값의 증가 패딩을 사용하면 요소의 width+padding가 전체 가로값이 된다. 이를 방지하려면 [ box-sizing : border-box; ]속성을 추가해야 한다.	auto, 숫자+단위, 0
	padding-방향	top / right / left / bootom 상우하좌의 개별 속성으로 사용 가능
border	-	요소의 라인을 설정. 선 입력 생략 border : 1 solid black;  -> 두께 종류 색상 너비 값의 증가 보더를 사용하면 요소의 width+border-width가 전체 가로값이 된다. 이를 방지하려면 [ box-sizing : border-box; ]속성을 추가해야 한다.	1. 두께 숫자+단위 2. 종류  none, hidden(table에서 사용), solid, dotted, dashed, double, groove,, ridge, inset, outset 3. 색상 컬러 이름, 컬러 코드, transparent
	border-방향	ttop / right / left / bootom 상우하좌의 개별 속성으로 사용 가능
	border-width	선의 두께
	border-style	선의 종류
	border-color	선의 색상
	border-방향-속성	border는 방향과 속성을 혼합하여 사용할 수 있다. 속성부분에는 width / style / color가 들어갈 수 있다. 태그 예시 border-top-style : solid;
box-sizing		요소의 크기 기준을 지정. 1. content-box : width / height 기준 2. boder-box : 패딩+테두리를 포함하는 기준	content-box boder-box
display		요소의 박스 타입을 설정. 1. inline-block은 inline에 바탕을 두지만 가로세로 값을 가질 수 있는 속성임 대표적으로는 input 태그가 있음 2. none을 설정하면 화면에서 요소가 없어진다.	block, inline, inline-block, flex, table, table-cell, none
overflow		요소의 크기 밖으로 내용이 넘쳤을 때 상태 설정 1. scroll은 내용이 넘치지 않아도 스크롤이 생성 2. 넘치치 않을 때 스크롤을 표시하고 싶지 않으면 auto를 사용한다.	visible, hidden, scroll, auto
opacity		투명도 설정. %를 사용하거나 "원하는 투명도/100"를 계산하여 숫자만 입력함. "0.5"일 경우 0을 생략하여 사용할 수 있음	투명도/100인 숫자 또는투명도%예시1 = 100% .5 = 50% 0 = 0%