##1. 스타일과 스타일 시트

1-1. 내부 스타일 시트

기본적인 스타일 적용 방법은 문서 내부의 head태그에 정리하는 것이다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>내부 스타일 시트</title>
  <style>
    ul{
      /* 이곳에 스타일 태그를 삽입한다 */
    }
  </style>
</head>
<body>
  /*이곳에 html을 작성한다.*/
</body>

1-2. 외부 스타일 시트

  1. 스타일 정보를 “style.css”라는 외부 css파일로 저장한다.
  2. html 파일에 외부 스타일 파일을 연결한다. 기본형 ~~~ html

### 1-3. 인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 대상에 직접 표시한다.
~~~HTML
<p style="color:blue;"> /* 본문 */ </p>

2. 주요 선택자

스타일 속성을 적용하는 요소를 ‘선택자 (selector)’라고 한다. 중요한 선택자 위주로 정리한다.

2-1. 전체 선택자

모든 요소에 스타일 적용하기

* {속성 : 속성 값; 속성 : 속성 값; ... }

2-2. 태그 선택자

특정 태그를 사용한 요소에 스타일 사용하기

p {
  속성 : 속성 값;
  속성 : 속성 값;
}
<body>
  <h1> 제목 </h1>
  <p>본문 </p> <!-- 여기에 스타일 적용된다 -->
</body>

2-3. 클래스 선택자

특정 부분에 스타일 적용하기

.클래스명 {
  속성 : 속성 값;
  속성 : 속성 값;
}
<body>
  <h1> 제목 </h1>
  <p class="클래스명">본문 </p> <!-- 여기에 스타일 적용된다 -->
  <p> 본문 </p> <!-- 여기는 스타일이 적용되지 않다 -->
</body>

이때, 태그 선택자와 클래스 선택자를 함께 써줄 수 있다.

p.클래스명 {
  속성 : 속성 값;
  속성 : 속성 값;
}
<body>
  <h1 class="클래스명"> 제목 </h1> <!-- 여기는 스타일이 적용되지 않다 -->
  <p class="클래스명">본문 </p> <!-- 여기에 스타일 적용된다 -->
</body>

2-4. 요소 일부에만 클래스를 적용하기

p.클래스명 {
  속성 : 속성 값;
  속성 : 속성 값;
}
<body>
  <h1>제목 </h1>
  <p>
    이곳은
    <span class="클래스명">본문</span>
    입니다.
  </p>
  <!-- span 사이에 스타일 적용된다 -->
</body>

2-5. id선택자

특정 부분에 스타일 적용하기 클래스 선택자는 문서 안에서 여러번 사용할 수 있지만, 아이디 선택자는 문서 안에서 단 한번만 적용할 수 있다.

 #아이디 { 스타일 }
<body>
  <div id="아이디">
    <!-- 본문 -->
  </div>
</body>

2-6. 그룹 선택자

둘 이상의 요소에 같은 스타일을 적용할 수도 있다.

h1, h2 {
  속성 : 속성 값;
  속성 : 속성 값;
}

3. 캐스케이딩 스타일 시트 (CSS)

CSS는 스타일간 충돌을 막기 위해 두가지 원칙이 있다.

  1. 스타일 우선순위 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정된다.
  2. 스타일 상속 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 전달한다.

4. 텍스트 관련 스타일

4-1. font-family : 글꼴 지정하기

{ font-family: <메인 폰트>[<보조 폰트>, <보조 폰트>]; }

4-2. @font-face : 웹폰트 사용하기

  1. 구글 웹폰트 사용하기
    @import url('구글 웹폰트 주소');
    .클래스 {
      font-family: '폰트이름';
    }
    
  2. 직접 업로드 해 사용하기
    @font-face {
      font-family : 글꼴 이름;
      src: url(글꼴 파일 경로) format(파일 유형);
    }
    

####4-3. font-size : 글자 크기 조절하기

{ font-size : <절대크기> | <상대 크기> | <크기> | <백분율>; }
속성 값 설명
<절대 크기=""> x-small, small, medium, large, x-large
<상대 크기=""> larger, smaller
<크기> em, ex, px, pt
<백분율> %

4-4. font-weight 속성 - 글자 굵기 지정하기

{ font-weight: 속성 값; }

|속성 값|설명| |—|—| |normal | 기본 값| |bold, lighter, bolder | 굵게, 가늘게, 더 굵게 | |100 ~ 900 | 400 = normal, 700 = bold를 기준으로 조절 |

4-5. 기타 폰트 속성들

5. 텍스트 스타일

5-1. color - 글자 색 지정하기

color : <색상>;

5-2. text-decoration - 텍스트에 줄 표시하기

text decoration: none | underline | overline | line-through;

5-3. text-transform - 대/소문자 변경하기

text-transform: none | capitalize | uppercase | lowercase | full-width;

5-4. text-shadow - 그림자 효과

text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>;

5-5. white-space - 공백 처리하기

white-space: normal | nowrap | pre | pre-line | pre-wrap ;

5-6. letter-spacing, word-spacing - 텍스트 간격 조절하기

letter-spacing : normal | <크기> ;
word-spacing : normal | <크기> ;

6. 문단 스타일

6-1. direction - 글자 쓰기 방향 지정하기

direction : ltr | rtl ;

6-2. text-align - 텍스트 정렬하기

text-align : start | end | left | right | center | justify | match-parent ;

6-3. text-justify - 정렬시 공백 조정하기

text-justify : auto | none | inter-word | distribute

6-4. text-indent : 텍스트 들여쓰기

text-indent : <크기> | <백분율>

6-5. line-height - 줄 간격 조절하기

line-height : normal | <숫자> | <크기> | <백분율> | inherit

6-6. text-overflow - 넘치는 텍스트 표기하기

text-overflow : clip | ellipsis

Comments

Eungbean Lee's Picture

About Eungbean Lee

Lee is a Student, Programmer, Engineer, Designer and a DJ

Seoul, South Korea https://eungbean.github.io