CSS 기본

스타일 형식

CSS 스타일의 형식 :

             # 첫번째 형식
      선택자 { 속성1: 속성값1; 속성2: 속성값2 }
      
      # 두번째 형식
      선택자 {
                속성1: 속성값1;
                속성2: 속성값2;
             }

선택자 : 스타일을 어느 태그에 적용할 것인지 알려 줌
중괄호({ }) 사이에는 스타일 정보를 넣음
속성과 속성값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라 함
세미콜론( ; )으로 구분하여 스타일 규칙을 여러 개 지정할 수 있음

-(예시) :

p {
    text-align: center;
    color: blue;
}

-(결과) :

텍스트 단락의 글자를 가운데로 정렬하고 글자색이 파랑색으로 지정됨

스타일의 주석 :

      /* 여러 줄 
   주석처리할
   내용을
   입력 */
   
/* 한줄 짜리 주석 */

스타일 시트

스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 함
웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일
사이트 제작자가 만든 사용자 스타일로 나누어짐
사용자 스타일은 인라인 스타일과 내부 스타일 시트와 외부 스타일 시트로 나누어짐

┌ 브라우저 기본 스타일
스타일 시트 ┤ ┌ 인라인 스타일
└ 사용자 스타일├ 내부 스타일 시트
└ 외부 스타일 시트

브라우저 기본 스타일 : CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용함
인라인 스타일 : 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시함
내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
외부 스타일 시트 : 따로 저장해 놓은 스타일 정보, *.css라는 파일 확장자를 사용함

전체 요소에 스타일을 적용하는 전체 선택자

전체 선택자
- 스타일을 문서의 모든 요소에 적용할 때 사용
- 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용
- 웹 브라우저의 기본 스타일을 초기화 할 때 사용
- 기본형 :
```
* { 속성: 값; .... }
```

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>전체 선택자 예시</title>
    <style>
        * {
            margin: 0;
          }
    </style>
</head>
<body>
    <img src="images.jpg">
</body>
</html>

특정 요소에 스타일을 적용하는 타입 선택자

타입 선택자
- 특정 태그를 사용한 모든 요소에 스타일을 적용함
  타입 선택자를 사용하여 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용됨
- 기본형 :
```
      태그명 { 스타일 규칙 }
```

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>예시</title>
    <style>
        p {
            font-style : italic;
        }
    </style>
</head>
<body>
    <div>
        <h1>예시!!</h1>
        <p>예시 (1)</p>
        <p>예시 (2)</p>
        <p>예시 (3)</p>
    </div>
</body>
</html>

-(결과) :

특정 부분에 스타일 적용하는 클래스 선택자

클래스 선택자
- 같은 태그라도 일부는 다른 스타일을 사용할 때
  특정 부분만 선택해서 스타일을 적용할 수 있음
- 클래스 이름을 사용해서 다른 선택자와 구별함
- 클래스 이름 앞에 마침표(.)를 반드시 붙여야 함
- 클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 함
- 이미 만들어 둔 클래스 스타일을 적용할 때에는 태그 안에 class="클래스명"처럼 class 속성을 사용해서 지정함
- 클래스 스타일은 여러 곳에 적용 가능
- 기본형 :
```
      .클래스명 { 스타일 규칙 }
```

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        p {
            font-styel: italic;
        }
        .accent {
            border: 1px solid #000;
            padding: 5px;
        }
        .bg {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="accent bg">예제</h1>
        <p>예시 1 <span class="accent">예시 2 </span>예시 3</p>
        <p>예시 4</p>
        <p>예시 5</p>
    </div>
</body>
</html>

-(결과) :

<h1> 태그에는 accent 스타일과 bg 스타일 / 예시 2에는 accent 스타일 적용됨

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

id 선택자
- 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용함
- 마침표(.) 대신 # 기호를 사용함
- id 스타일을 웹 요소에 적용할 때는 id="아이디 명"처럼 사용함
- 클래스 선택자와의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면,
  id 선택자는 문서에서 한 번만 적용 가능
- 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 JavaScript 프로그램을 사용하면서 요소를 구별할 때 사용함
- 기본형 :
```
      #아이디명 { 스타일 규칙 }
```

-(예제) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        #container {
            width: 500px;
            margin: 10px auto;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>예제</h1>
        <p>예시 1</p>
        <p>예시 2</p>
        <p>예시 3</p>
    </div>
</body>
</html>

-(결과) :

같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

그룹 선택자
- 여러 선택자에서 같은 스타일 규칙을 사용할 때
- 쉼표(,)로 구분하여 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 됨
- 기본형 :
```
      선택자1, 선택자2 { 스타일 규칙 }
```

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        h1, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>예제</h1>
    <p>예시1</p>
    <p>예시2</p>
    <p>예시3</p>
</body>
</html>

-(결과) :

캐스케이딩

CSS에서 'C'는 캐스케이딩(Cascading)의 줄임말
스타일 시트에서는 우선순위가 위에서 아래(계단식)으로 적용된다는 의미
CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정함
캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념
스타일이 충돌하지 않게 막는 방법 :
┌ 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정됨
│ 그 우선순위에 따라 위에서 아래로 스타일을 결정함
└ 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 함
위에서 아래로 전달
스타일 우선순위

-(예시) :

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
      p {
          color: black;
      }
      h1 {
          color: brown !important;
      }
      p {
          color: blue;
      }
  </style>  
</head>
<body>
    <h1 style="color: green">예제</h1>
    <p style="color: red">예시1</p>
    <p>예시2</p>
    <p>예시3</p>
</body>
</html>

-(결과) :

스타일 상속
- 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 함
- 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달됨 → 이것을 스타일 상속이라 함
- ex) 문서 구조에서 <body> 태그는 웹 문서에 사용한 모든 태그의 부모 요소임

저작자표시

'Web Basic > CSS' 카테고리의 다른 글

표 스타일 (0)	2021.07.15
목록 스타일 (0)	2021.07.15
텍스트 관련 스타일 (0)	2021.07.14
웹 폰트 (0)	2021.07.14
글꼴 관련 스타일 (0)	2021.07.14

스타일 형식

스타일 시트

전체 요소에 스타일을 적용하는 전체 선택자

특정 요소에 스타일을 적용하는 타입 선택자

특정 부분에 스타일 적용하는 클래스 선택자

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

캐스케이딩

'Web Basic > CSS' 카테고리의 다른 글

티스토리툴바