스타트업트랙 프론트엔드 개발과정 3 - (3)

CSS 기본 스타일 (1)

글꼴, 글 관련 스타일

상속됨 : 부모의 스타일이 자식 스타일에도 적용

1) font-family : 글꼴 그룹

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

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

=> 맑은 고딕이 안 될 경우, 돋움이나 굴림 사용(비추천)
=> 걍 웹 폰트 쓰셈
구글 폰트 사용해보기

2) font-size : 글자 크기

3) font-weight : 글자 굵기

4) font-style : 글자 스타일

• normal: 일반 서체

• italic: 기울임 / 기울여 쓴 서체 - 주로 사용됨

• oblique: 기울임 / 본 서체를 기울인 것

5) color : 글자 색

 일반 텍스트 <span>글자색 적용</span>
 
span { color: blue; }

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

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

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

Google에 rgb(a)값, #hex 값 또는 color picker 검색

6) text-decoration : 글자에 선 긋기

• index.html

<span>일반</span>
  <span class="underline">밑줄</span>
  <span class="overline">윗줄</span>
  <span class="line-through">취소선</span>

• style.css

.none { text-decoration: none; }
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }

7) letter-spacing : 자간 조정

• index.html

 일반 텍스트
  <span>자간이 조정된 텍스트</span>

• style.css

span { letter-spacing: 0.1em; }

8) text-align : 텍스트 정렬

block, inline-block, table 요소
left | right | center | justify

• index.html

<p>
    Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.<br>
    CSS는 오픈 웹의 핵심 언어 중 하나이며 여러 브라우저가 표준으로 사용하는 W3C 명세가 있습니다. 레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안(recommendation)입니다. 더 작은 모듈로 나눈 CSS3은 표준화 과정을 밟고 있습니다.
  </p>

• style.css

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

9) line-height : 행간

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

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

• index.html

<ul>
    <li>못생긴</li>
    <li>불릿은</li>
    <li>이제 그만</li>
  </ul>

• style.css

ul { 
  list-style: none;
  padding: 0;
}

11) opacity : 불투명도

• index.html

 <span>오퍼시티가 적용된 요소</span>

• style.css

span {
  opacity: 0.5;
}