CSS 2차시

- odd: 홀수 / even: 짝수

- display: inline-block (element가 한 줄로 입력됨)

 

- Font

• font-style: 글씨체 (font-style: italic / normal / oblique)
• font-weight:글씨 굵기 (400이 일반, 700은 굵음)
• font-size: 글씨 크기

 

- 정렬

• text-align: left / right / center

 

- 글자 간격

• letter-spacing: normal (0rem)

 

- 색깔 표기방법

• 색 이름(red/ black/ blue / 등..)
• rgb (red green blue) 각각 0~255까지의 값을 가질 수 있다.
• rgba (red green blue / alpha) alpha는 투명도를 의미.
  0(완전투명 - 1(완전불투명)
  * opacity: 개별 element의 투명도 조절
• hex color ( hexadecimal, 16진수 / 0-9, a-f의 값을 가짐 / #rrggbb ) ex.#ff0000 
• 3hex color (rgb) ex.#f00

 

- 배경색

• background-color: transparent(투명)

 

-상속 inherit

• ul 에 폰트와 컬러를 적용했을 때 자동으로 자식인 li에 같이 적용되는 것
• initial은 상속받지 않고 기본 속성으로 설정하는 것.
  반대로 inherit는 부모 element의 스타일을 물려받으려 할 때 쓰임

 

- 테두리 border

• border-width: 테두리 굵기
• border-style: 테두리 모양 (solid / dashed / dotted / double / hidden / groove / initial 등)
• border-color: 테두리 색깔
• border-top: 윗테두리
• border-left: 아래테두리
• border-left/right : 옆테두리
  
  *width, style, color을 따로 지정할 수 있지만 border: 1px solid #000 한번에 설정할 수 있다.

 

<예제>

<h1>Q. background-color, border</h1>

    <style>

        .container {

            background-color: black;

            color: #fff;

        }

        .gray {

            color: #888;

        }

        .border-b {

            border-bottom: 1px solid gold;

        }

    </style>

    <div class="container">

        <h1 class="border-b">GUINNESS</h1>

        <p class="gray">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo deleniti pariatur minima possimus explicabo labore natus totam optio soluta. Possimus nostrum beatae sunt earum omnis, eius fuga dolores similique recusandae.</p>

    </div>