Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

코딩세상

CSS 기초 - CSS 101 본문

HTML.CSS

CSS 기초 - CSS 101

필륭 2023. 3. 1. 21:51

CSS(Cascading Style Sheets)

- HTML과 함께 웹 페이지의 디자인을 구성하는 언어

 

CSS의 기본구조

-선택자(selector)와 선언부(declaration block)로 이루어져 있다. 선택자는 스타일을 적용할 HTML요소를 지정하고, 선언부는 선택한 요소에 적용할 스타일 속성과 값을 지정한다.

selector{
     property: value;
     property: value;
}

선택자

CSS에서 사용되는 선택자는 여러가지가 있으며, 기본적인 선택자로는 전체 선택자, 태그 선택자, 클래스 선택자, ID 선택자 등이 있다.

 

1) 전체 선택자

전체 선택자는 모든  HTML요소에 스타일을 적용. 선택자로 (*)을 사용한다.

* {
     property: value;
}

 

2) 태그 선택자

태그 선택자는 특정 HTML 요소들에 스타일을 적용. 선택자로 (태그 이름)을 사용한다.

p {
     property: value;
}

 

3) 클래스 선택자

클래스 선택자는 HTML 요소에 대해 class 속성을 지정하여 스타일을 적용. 선택자로 (.)을 사용한다

.class-name {
     property: value;
}

 

4) ID 선택자

ID 선택자는 HTML 요소에 대해 id 속성을 지정하여 스타일을 적용. 선택자로 (#)을 사용한다.

#id-name {
      property: value;
}

 

5) 그룹 선택자

그룹 선택자는 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용. 쉼표(,)를 이용하여 여러 선택자를 그룹화 할 수 있다.

h1, p, .btn {
     color : blue;
}

h2 {
     colo r: black;
}

#self-introduction {
     color  : red;
}

 

선택자 우선순위

나중에 작성된 스타일이 적용되는게 일반적이나 같은 요소에 서로 다른 선택자로 CSS가 적용된 경우, 선택자 우선순위에 의해 스타일이 적용된다.

 

아이디 선택자 (#id_name) > 클래스 선택자 (.class_name) > 태그 선택자(h1, p, button, etc...)

 

스타일 속성과 값

CSS에서는 다양한 스타일 속성과 값이 제공된다. 기본적으로는 색상, 글꼴, 배경, 크기 등이 있다.

 

1) 색상

색상은 (color) 속성을 사용하여 지정. 색상은 이름, RGB, HEX 값을 사용하여 지정할 수 있다.

selector {
      color : red;
      color : rgb(255, 0 ,0);
      color : #FF0000;
}

 

2) 글꼴

글꼴은 (font-family) 속성을 사용하여 지정. 여러개의 글꼴을 지정할 수 있으며, 운영체제에 설치된 글꼴도 사용할 수 있다.

selector {
     font-family : Arial, sans-serif;
}

 

3) 배경

배경은 (background) 속성을 사용하여 지정. 색상, 이미지, 반복 등을 설정할 수 있다.

selector {
     background-color : yellow;
     background-image : url("image.png")
     background-repeat : no-repeat;
}

 

4) 크기

크기는 (width, height) 속성을 사용하여 지정한다.

selector {
     width : 200px
     height : 100px;
}

CSS 적용방법

 

1) 인라인(in-line) CSS

HTML 문서에서 태그요소 내부의 style 속성으로 CSS를 정의할 수 있다.

<body>
   <p style="color : #000000>Hellow World!</p>
</body>

 

2) Style 태그 CSS

HTML 문서 내부에 style 태그를 사용하여 적용할 수 있다.

<head>
   <style type = "text/css">
       p {
          color : #000000;
       }
    </style>
</head>

CSS 파일 적용하기

CSS는 인라인 또는 style 태그를 이용해 적용할 수 있다. 하지만 일반적으로는 CSS파일을 따로 만들어 HTML 문서에서 불러와 사용한다.

<head>
    <link rel = "stylesheet" href = "style.css">
</head>

 

Semantic Web

HTML5에서는 이전보다 더 나은 시맨틱 요소가 추가되었다.

 

Semantic이라는 말은 ‘의미론적인’이라는 뜻을 가지고 있다. HTML의 태그나 id, class 등이 그 역할에 알맞은 이름을 가지고 있는 경우 시맨틱하다고 표현한다. 예를 들어 다음과 같이 div 요소로 나타낼 수 있는 헤더가 있다.

<div id = "header">제목</div>

이 요소를 다음과 같이 나타내면 보다 더 의미론적인 상태가 된다.

<header>제목</header>

컴퓨터가 의미정보를 해석할 때에 div와 id=”header”라는 내용을 모두 읽었던 이전에 비해 header만 읽으면 되므로 훨씬 효율적이라고 볼 수 있다. 이외에도 article, section, nav 등의 태그를 이용해 보다 의미가 명확한 태그를 사용하는 것이 시맨틱 웹을 작성하는 기초가 된다.

 

#출처 엘리스 AI 트랙 CSS 기초 강의 - CSS 101 (박규하 코치)

'HTML.CSS' 카테고리의 다른 글

CSS 기초 강의 - 애니메이션, 트랜지션, 반응형 웹  (0) 2023.03.02
CSS 기초 강의 - 블록과 박스모델  (0) 2023.03.02
HTML 기초  (0) 2023.03.01
웹 표준, 웹 접근성, 크로스 브라우징  (0) 2023.03.01
'HTML.CSS' Related Articles more
Comments