[CSS] CSS란? (feat. 구문 작성하는 방법)

728x90

안녕하세요 Foma 💻 입니다!

요즘 리액트 네이티브를 공부하고 있는데 CSS에 대한 기억이 가물 가물해서 헷갈리더라구요..

그래서 CSS에 대해 다시 한번 제대로 정리하고 넘어가려고 합니다.

바로 시작할게요~

CSS란?

Cascading Style Sheets의 줄임말이며 직독하면 계단식으로 작성하는 스타일 시트입니다.

마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로 HTML과 XML에서 사용할 수 있습니다.

HTML이 웹사이트의 몸체를 담당한다면 CSS는 그 몸체를 예쁘게 꾸미는 역할을 담당한다고 할 수 있습니다.

1994년 하콤 비움 리가 처음 제안하여 이후 W3C에서 CSS2,CSS3를 개발해왔습니다.

CSS 구문 작성하는 법

원하는 HTML 요소를 선택한 뒤 바꾸고 싶은 속성을 선택하여 값을 매겨주면 됩니다.

HTML {
    속성1:value;
    속성2:value;
}

만약 h1태그의 색을 파란색으로 하고, 폰트 크기를 15픽셀로 하고 싶다면 아래와 같이 작성해주면 됩니다.

 <style>
        h1 {
            color:blue;
            font-size: 15px;
        }
    </style>

<body>
    <h1>안녕하세요</h1>
</body>

아래와 같이 여러 HTML요소를 선택하여 세팅할 수 있습니다.

  <style>
        h1,h2 {
            color:blue;
            font-size: 15px;
        }
    </style>

<body>
    <h1>안녕하세요</h1>
    <h2>안녕</h2>
</body>

.css 파일을 따로 만들어서 link로 첨부할 수도 있습니다.

style.css

h1 {
  color: green;
}

index.html

<body>
    <h1>안녕하세요</h1>
</body>

만약 아래와 같이 한 HTML 요소에 중복해서 쓴 경우 더 늦게 쓴 값으로 적용됩니다.

h1 {
  color: green;
}

h1 {
  color: red;
}

Class

.원하는 클래스 이름으로 작성하면 클래스를 만들어서 적용할 수도 있습니다.

아래와 같이 핑크색을 적용하는 클래스를 만들고

.pink {
  color: pink;
}

h1 태그에 클래스를 적용시켜 주면 글자에 핑크색이 적용됩니다.

 <h1 class="pink">안녕하세요</h1>

ID

#원하는 아이디 이름으로 특정 아이디를 정해서 사용할 수도 있습니다.

아래와 같이 초록색에 폰트 사이즈가 100픽셀인 구문을 작성하고

#greenBigLetter {
  color: green;
  font-size: 100px;
}

id값을 적용하면 큰 초록색 글자가 적용되는 것을 볼 수 있습니다.

 <h1 id="greenBigLetter">안녕하세요</h1>

class와 id의 차이점

언뜻 보기엔 class와 id가 동일한 기능을 하는 것처럼 보일 수 있습니다.

하지만 몇 가지 차이점이 있습니다.

1. class는 여러 개를 적용할 수 있지만 id는 하나만 적용할 수 있다.

클래스는 여러 클래스를 만들고

.pink {
  color: pink;
}

.bigSize {
  font-size: 100px;
}

띄어쓰기로 구분하며 여러 클래스를 적용할 수 있습니다.

 <h1 class="pink bigSize">안녕하세요</h1>

id는 여러 id를 만들고

#pink {
  color: pink;
}

#bigSize {
  font-size: 100px;
}

적용하면 아무 것도 적용되지 않고 기본값으로 나오게 됩니다.

 <h1 id="pink bigSize">안녕</h1>

2. id가 class보다 우선 순위가 높다.

아래와 같이 클래스는 핑크색, 아이디는 초록색으로 지정해놓고

.pink {
    color: pink;
  }

#green {
  color: green;
}

아래와 같이 클래스와 아이디를 동시에 적으면 아이디의 색깔인 초록색이 적용되어 나온다. (순서를 바꿔도 동일)

   <h1 id="green" class="pink">안녕하세요</h1>

우선 순위

id와 class 이 외에도 CSS는 우선 순위가 존재합니다.

!important > 인라인 스타일 > id > class > tag 순으로 우선 순위가 결정됩니다.

아래와 같이 !important,id,class,tag를 만들어 놓았습니다. (인라인은 직접 입력해야 되기 때문에 생략)

red {
    color:red !important
}

#yellow {
    color:yellow;
}

.green {
    color:green
}

blue {
    color:blue
}

아래와 같이 적용하면 가장 우선 순위가 높은 빨간색이 글자에 적용됩니다.

 <red style:"color:orange" id="yellow" class="green">안녕하세요</red>

!important를 빼고 태그를 넣은 뒤 실행시켜 보면 두 번째 우선 순위인 인라인 스타일인 주황색이 적용됩니다.

 <blue style="color: orange;" id="yellow" class="green">안녕하세요</blue>

인라인 스타일을 빼고 실행시켜 보면 세 번째 우선 순위인 id값인 노랑색으로 적용됩니다.

  <blue id="yellow" class="green">안녕하세요</blue>

id태그를 빼고 실행시키면 네 번째 우선 순위인 class의 값 초록색으로 적용됩니다.

<blue class="green">안녕하세요</blue>

모두 빼고 태그만 실행시키면 파란색이 적용됩니다.

Reference

CSS: Cascading Style Sheets | MDN

Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌

developer.mozilla.org

CSS - 위키백과, 우리 모두의 백과사전

종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할

ko.wikipedia.org

CSS Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

728x90

저작자표시 비영리

'📌 Language > HTML&CSS' 카테고리의 다른 글

[CSS] Flex 속성 알아보기 (List of flex properties) (0)	2022.02.22
[CSS] 컬러에 관한 속성 알아보기 (List of color properties) (0)	2022.02.22

Fomagran 💻

[CSS] CSS란? (feat. 구문 작성하는 방법)

CSS란?

CSS 구문 작성하는 법

Class

ID

class와 id의 차이점

1. class는 여러 개를 적용할 수 있지만 id는 하나만 적용할 수 있다.

2. id가 class보다 우선 순위가 높다.

우선 순위

Reference

'📌 Language > HTML&CSS' 카테고리의 다른 글

댓글

티스토리툴바

[CSS] CSS란? (feat. 구문 작성하는 방법)

CSS란?

CSS 구문 작성하는 법

Class

ID

class와 id의 차이점

1. class는 여러 개를 적용할 수 있지만 id는 하나만 적용할 수 있다.

2. id가 class보다 우선 순위가 높다.

우선 순위

Reference

'📌 Language > HTML&CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바