단단히

CSS 기초 사용법 본문

HTML,CSS/개념 정리

CSS 기초 사용법

이게아닌데 2022. 8. 1. 11:12

CSS 개념

HTML요소를 스타일링과 레이 아웃하는 코드이다.

◎ 스타일링 :  요쇼의 내용(이미지, 글씨.. 등)에 관한 색깔, 크기, 모양, 형태, 효과, 장식을 적용하는 것을 의미

◎ 레이아웃 : 전체적인 위치, 크기, 배치 등에 관하여 설정하는 것을 의미

 

CSS 코드 위치

1) 인라인 CSS

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="wrap">
      <p style="width: 200px; border: 1px solid #000">인라인 css</p>
    </div>
    <!-- div#wrap -->
  </body>
</html>

 

2) 내부(Inner) CSS

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#wrap{
            width: 300px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="wrap">
        내부 css
    </div>
    <!-- div#wrap -->
</body>
</html>

 

3) 외부(Outer) CSS

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style/outerCss.css">
  </head>
  <body>
    <div id="wrap">
      <p>인라인 css</p>
    </div>
    <!-- div#wrap -->
  </body>
</html>

 

@charset "UTF-8";

p {
    width: 200px;
    border: 1px solid #000
}

따로 CSS파일(.css)을 만들어서 작성한다. 

 

 

CSS 형식

table{
    border: 1px solid #000;
    border-collapse:collapse;
}

- 요소를 선택한다. 위 형식에서는 table. 이것을 선택자(Selecter)이다.

- 중괄호를 사용한다.

- 중괄호에서 사용하고싶은 속성을 명시한다.

- : 로 분리하고 적용할 속성 값을 사용한다.

- 속성값 끝에는 ; 을 넣는다.

CSS 주석(Comment) => /* 주석 내용 */

 

기본적인 CSS 속성

 

속성 속성값
글자색 color 색상값, 16진수 표현법,
rgb, rgba 표현법.
글자 크기 font-size 절대 크기(px), 키워드, 상태 크기(em, %)
글자 진하기 font-weight bold, normal
글자 스타일 font-style italic, oblique, normal
글자 장식 text-decoration underline, line-through, none
줄간격 line-height 절대 크기, 상태 크기(em ..)
글꼴 font-family Verdana, sans-serif, serif

 

CSS 색상

색상명, 16진수 색상 표기법, RGB 색상 표기법을 사용( RGB는 순서대로 빨강, 초록, 파랑을 의미 )

 

- 색상명 : 140 가지의 색상을 표현할 수 있으며, 사용빈도는 낮습니다.

- 16진수 색상 표기법 : 빨강, 초록, 파랑을 16진수를 사용하여 표현

- ** RGB 색상표기법 : 빨강, 초록, 파랑을 0~255의 숫자로 표현하는 방법

       rgba 방식으로 불투명도를 설정할 수 있습니다.

 

색 16진수 표기법 rgb 표기법
빨강 #ff0000 #f00 rgb(255, 0, 0)
초록 #00ff00 #0f0 rgb(0, 255, 0)
파랑 #0000ff #00f rgb(0, 0, 255)
회색 #808080 없음 rgb(128, 128, 128)
흰색 #ffffff #fff rgb(255, 255, 255)
검정색 #000000 #000 rgb(0, 0, 0)

 

CSS 크기

글씨크기, 줄 간격, 요소의 폭, 높이, 내부 여백, 테두리선 두께, 외부 여백, 위치 등에 사용

○ 고정크기 : px (픽셀)

○ 상대크기 : % (퍼센트),  em (이엠)

 

 

'HTML,CSS > 개념 정리' 카테고리의 다른 글

HTML 특수기호들  (0) 2022.08.05
CSS 선택자  (0) 2022.08.03
Form 요소  (0) 2022.07.29
Semantic(시맨틱) 요소  (0) 2022.07.27
Border 테두리 선  (0) 2022.07.25
'HTML,CSS/개념 정리' Related Articles more
Comments