CSS 기본 스타일

글꼴, 글 관련 스타일

font-family : 글꼴 그룹

• 사용자의 컴퓨터에 지정한 폰트가 없을 때를 대비하여 여럿 지정

  p { font-family: 돋움; }
  p { font-family: "맑은 고딕", 돋움, 굴림; }

font-size : 글자 크기

font-style : 글자 스타일

color : 글자 색

/* 빨강 + 초록 + 파랑 (0~255) */
p { color: rgb(0, 0, 255); }

/* 빨강 + 초록 + 파랑 (0~255) + 불투명도 (0~1) */
p { color: rgba(0, 0, 255, 0.5); }

/* 16진수 표기 */
p { color: #FF0000 }

text-decoration : 글자에 선 긋기

p { text-decoration: none; } 
p { text-decoration: underline; } /* 밑줄 */
p { text-decoration: overline; } /* 윗줄 */
p { text-decoration: line-through; } /* 취소선 */

letter-spacing : 자간 조정

• 글자와 글자 사이의 간격 조정

p { letter-spacing: 0.1em; }

text-align : 텍스트 정렬

• block, inline-block, table 요소에 적용 가능
• block 요소 내의 inline 요소를 정렬

/* left, right, center, justify */
p { text-align: left; }

line-height : 행간

• 글의 줄 또는 행 사이의 간격 (줄높이)

p { line-height: 24px; }
p { line-height: 1.25; }
p { line-height: 1.25em; }
p { line-height: 125%; }

list-style : ul 목록의 불릿 없애기

ul { 
  list-style: none;
}

opacity : 불투명도

span {
  opacity: 0.5;
}

상자 관련 스타일

width, height : 높이와 너비

margin : 바깥쪽 여백

/* 상하좌우 24px */
.inner {
  margin: 24px;
}

/* 상하좌우 각각 설정 */
.inner {
  margin-top: 24px;
  margin-right: 48px;
  margin-bottom: 0;
  margin-left: 12px;
}

/* 상-우-하-좌 (시계방향) 순으로 설정 */
.inner {
  margin: 24px 48px 0 12px;
}

/* 상하(12px) 좌우(48px) */
.inner {
  margin: 12px 48px;
}

/* 상하(12px) 좌우(중앙정렬)  */
.inner {
  width: 300px;
  margin: 12px auto;
}

padding : 안쪽 여백

/* margin과 동일한 방식 */

.outer {
  padding: 24px;
}

.outer {
  padding-top: 24px;
  padding-right: 48px;
  padding-bottom: 0;
  padding-left: 12px;
}

.outer {
  padding: 24px 48px 0 12px;
}

.outer {
  padding: 12px 48px;
}

border : 테두리 선

• border: (선 굵기) (선 스타일) (선 색);

div {
  border: 1px solid black;
}

border-radius : 둥근 모서리

div {
  border-radius: 8px;
}

div {
  border-radius: 50%;
}

/* 각 모서리마다 설정 가능 */
div {
  border-radius: 24px 0 25% 50%;
}

background : 배경

div {
  background-color: green; 
  background-image: url("./nature.jpg");
  background-size: 50% 50%;
  background-position: 50px 50%;
  background-repeat: no-repeat;
}

box-shadow : 그림자

• box-shadow: (x축 위치) (y축 위치) ( [옵션] 번짐) (색상)

div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}