CSS 속성

[CSS]

 

웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.

CSS는 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다.

CSS를 사용한 페이지는 HTML만 이용한 페이지보다 가독성이 좋다.

 

 

 

 

 

사용자 인터페이스(UI; user interface)

 

인터넷으로 옷을 구매하기 위해서는 쇼핑몰에 들어가 마음에 드는 옷을 누르고 구매하기 버튼을 눌러 구매하면 된다.

사실 더 복잡한 과정이 필요하지만 사용자는 구매하기 버튼을 누르는 것만으로 해결할 수 있다. 이것이 바로 UI이다.

 

 

 

사용자 경험(UX; user experience)

이러한 UI를 바탕으로 사용자의 편의성과 가독성을 도와주는 것이 UX이다.

 

 

 

---

[CSS 속성]

 

 

셀렉터는 요소 이름이나 id, 또는 클래스를 선택한다. 

 

 

 

[Selector(셀렉터) ]

 

[Id]

 

id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 한다.

 

<!-- 잘못된 예제 -->
<ul>
  <li id="menu-item">Home</li>
  <li id="menu-item">Mac</li>
  <li id="menu-item">iPhone</li>
  <li id="menu-item">iPad</li>
</ul>

 

[코드] 잘못된 id의 사용

 

 

 

[class]

 

동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용해야 합니다.

 

<!-- 바른 예제 -->
<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>

[코드] 여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용합니다.

 

 

 

* id와 class의 차이점

 

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

 

 

[declaration(선언) ]

 

[색상]

 

글자의 색상을 변경하는 속성

 

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

 

 

 

[글꼴]

 

글꼴의 속성

 

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

 

구글 폰트 등에서 찾을 수 있다.

 

 

 

[크기]

 

글자의 크기를 변경

 

.title {
  font-size: 24px;
}

 

 

 

[기타]

 

w3school, mdn 참고

 

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

 

 

---

[단위]

 

크기의 단위는 절대 단위와 상대 단위, 두 가지가 있다.

 

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

 

 

 

px(픽셀)

 

기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기

픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다.

글꼴의 크기를 픽셀로 설정하면, 브라우저의 크기를 늘리거나 줄여도 동일한 크기를 가진다.

픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. (인쇄에 적합)

 

 

 

rem(렘)

 

일반적인 경우 상대 단위인 rem을 추천

 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다.

(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵지만 rem은 root의 글자 크기에 따라서만 상대적으로 변한다.)