CSS 기초

 

<link> : HTML 파일과 다른 파일을 연결하는 목적으로 사용

<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />

---

<id> : Selector.

id가 있는 요소를 선택할 때에는 #기호를 이용한다.

id는 하나의 문서에서 한 요소에만 사용해야 한다.

 

HTML

<h4 id="navigation-title">This is the navigation section.</h4>

CSS

#navigation-title {
  color: red;
}

---

class : 여러 요소 Select

여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용한다.

Class가 있는 요소를 선택할 때 .기호 사용

 

HTML

<ul>
	<li class="menu-item">Home</li>
        <li class="menu-item">Mac</li>
	<li class="menu-item">iPhone</li>
	<li class="menu-item">iPad</li>
</ul>

CSS

.menu-item {
  text-decoration: underline;
}

text-decoration: underline : 밑줄 적용

---

여러 개의 class를 하나의 엘리먼트에 적용 : 띄어쓰기로 적용하려는 class 구분

<li class="menu-item selected">Home</li>

 

id vs class

#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류에 사용

---

색상

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용

 

글꼴

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

글꼴의 이름은 따옴표를 붙여서 적용

 

크기

.title {
  font-size: 24px;
}

단위

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등

기타 스타일링

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

정렬

• text-align 사용. 유효한 값으로는 left, right, center, justify

---

 

박스의 구성 요소

 

 

border (테두리)

p {
  border: 1px solid red;
}

 

• 테두리 두께(border-width)
• 테두리 스타일(border-style)
• 테두리 색상(border-color)

 

margin (바깥 여백)

각각의 값은 top, right, bottom, left로 시계방향이다.

p {
  margin: 10px 20px 30px 40px;
}

 

padding (안쪽 여백) : 콘텐츠와 테두리 사이의 간격

방향은 margin과 동일하게 top, right, bottom, left

p {
  padding: 10px 20px 30px 40px;
}

배경색이나 border를 적용하면, 안쪽 여백을 더욱 선명하게 확인할 수 있다.

p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow;
}

 

박스를 벗어나는 콘텐츠 처리

p 태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시 할 수 있다.

p {
  height: 40px;
  overflow: auto;
}

 

박스  크기 계산

box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산

box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있습니다.

* {
  box-sizing: border-box;
}