본문 바로가기
Tip

CSS 정의 및 특징

by 경 훈 2023. 1. 16.

<CSS란?>

· Cascading Style Sheets 약자로

  마크업 언어의 레이아웃과 스타일을 나타내는 언어이다.

  마크업 언어를 디자인할 용도로 작성된 언어이다.

 

 

<CSS 사용하는 이유>

· html 데이터 구분까지만 해준다.

· css 데이터를 이쁘게 해준다.

  스타일 부분을 공유하여 여러 HTML 디자인의 재사용과 통일화 가능

  HTML에서 스타일 부분만 따로 CSS로 관리가능

  => 사용자의 편의성을 위해

 

 

<CSS의 특징>

· CSS의 형태는  key:value; 이다.

width:100%;
height:100px;
background:#FF0000;

· 끝나는 부분에 꼭 세미콜론( ; )을 사용해야한다.

  세미콜론을 안쓰면 컴퓨터가 인식을 못함

 

 

<CSS의 적용 방법>

· inline 스타일

  HTML의 element 안에 style 속성을 부여하여 CSS를 적용

<div style="font-size:32px">hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>

 

· style 엘리먼트

  style 엘리먼트를 head 영역에 추가하여 선택자에 CSS를 적용

<!DOCTYPE html>
<html lang="en">
    <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>
            #test {
                font-size: 32px;
            }
        </style>
    </head>
    <body>
        <div id="test">hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
    </body>
</html>

 

· 외부파일 가져오기★★

  html외부의 css문서를 연결 하여 CSS를 적용

  head 영역에 link 태그 사용하여 css 문서 연결

 

  - css 파일생성

    (보통 index.html 파일이 들어있는 폴더 안에

     public 폴더 생성 > css 폴더 생성 > css 폴더 안에 파일 보관)

 

  - 헤드영역에 link 엘리먼트 입력

    href 에 절대경로 혹은 상대경로 입력

    절대경로는 C:\ 부터의 모든 경로를 표기

    상대경로는 index.html 파일이 들어있는 현재 폴더를 기준으로 표기

     " . " : 현재 폴더

     " .. " : 이전 폴더

     " ~/ " : ~ 이름의 폴더로 이동

    type="text/css" 은 기본값 (작성하지않아도 적용됨)

    rel="stylesheet" 외우자!

<!DOCTYPE html>
<html lang="en">
    <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 href="./public/css/index.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
    </body>
</html>

 

 

<선택자>

· 엘리먼트 선택자

  엘리먼트의 명칭을 적고 중괄호 " {  } " 표기

  중괄호 " {  } " 안에 속성 및 속성값 부여

div { background: blue; }

 

· id 선택자

  #을 붙이고 중괄호 " {  } " 표기

  중괄호 " {  } " 안에 속성 및 속성값 부여

#id { background: blue; }

 

· class 선택자

  .을 붙이고 중괄호 " {  } " 표기

  중괄호 " {  } " 안에 속성 및 속성값 부여

.class { background: blue; }

 

· 자식 선택자

  상위 엘리먼트 혹은 선택자에서부터 하위 선택자까지

  " > " 써서 최종 경로 작성 후 중괄호 " {  } " 표기

  중괄호 " {  } " 안에 속성 및 속성값 부여

#id > .class { background: blue; }

 

 

<CSS 주요 속성>

· background

  선택 영역에 배경색 표시

<!DOCTYPE html>
<html lang="en">
    <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 href="./public/css/index.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div id="id1">hello world!</div>
        <div id="id1">hello world!</div> 
    </body>
</html>

 

#id1 { background: gray; }

 

· width, height

  선택 영역에 넓이와 높이 지정

#id1 {
    background: gray;
    width:100px;
    height:100px;
    }

 

· margin

  선택영역 외부에 여백을 만든다.

  동서남북 방향 따로 마진을 줄 수 있다.

  margin : 20px; 값은

  margin : 20px 20px 20px 20px; 와 같다.

  (속성값은 12시 3시 6시 9시 방향순)

 

  상하 좌우를 따로 묶어서 마진을 줄 수 있다.

  margin: 20px 0;

  해석 : 위아래 영역만 20px 만큼 마진을 주고 좌우 영역은 마진을 주지 않는다.

 

#id1 {
    background: gray;
    width:100px;
    height:100px;
    margin:20px 0;
    }

 

· padding

  선택영역 내부에 공간을 차지

  콘텐트 내용 위치를 변경하기 위해 사용

 

  padding 값을 준 만큼 영역이 늘어나서

  padding 값 만큼 width, height 값에서 빼서 계산해야 비율이 맞음.

#id1 {
    background: gray;
    width:100px;
    height:100px;
    margin:20px 0;
    padding:50px;
    }

 

  ★하지만, 속성값 box-sizing: border-box;로 해결가능

      padding 값과 선택영역을 포함한 크기를

      시스템이 width와 height를 자동으로 설정해줌

#id1 {
    background: gray;
    width:100px;
    height:100px;
    margin:20px 0;
    padding:50px;
    box-sizing: border-box;
    }

 

 

<block, inline, inline-block>

 CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고
 다른 엘리먼트와 어떻게 상호 배치되는지를 결정

 

· block

  한 영역을 차지하는 박스형태

  width, height 값 지정가능

  margin, padding 값 지정가능

 

· inline

  컨텐트의 크기 만큼만 공간을 차지

  width, height 값 지정 불가능

  margin, padding 값 지정 불가능

 

· inline-block

  inline 속성 + block 속성

  width, height 값 지정가능

  (값을 주지않으면 컨텐츠 영역만 차지)

  margin, padding 값 지정가능

'Tip' 카테고리의 다른 글

MVN repository 목록  (0) 2023.02.22
스프링 한글깨짐 방지 코드  (0) 2023.02.21
HTML 정의 및 특징  (0) 2023.01.12
자바 단축키  (0) 2023.01.05

관련글

댓글

티스토리툴바