깡뇽

[Front-End] CSS 배우기 본문

Web/HTML & CSS

[Front-End] CSS 배우기

깡뇽 2021. 1. 19. 23:59
반응형

 CSS(Cascading Style Sheets): 웹 페이지에서 HTML을 꾸미기 위해 사용하는 언어

 

- 인라인 스타일: CSS를 HTML 코드 안에 직접적으로 적는 방식. 꾸미고자 하는 HTML요소의 여는 태그에 style속성을 적어주는 것.

ex) style속성 안에 색, 폰트 크기 등 원하는 스타일을 적고 마지막에 필수로 ;(세미콜론)을 붙여준다.

<p style="color: red; font-size: 20px;">We can make webpage.</p>

 

- 스타일 태그: <style>태그를 사용하여 HTML 파일 안에서 CSS 코드를 사용할 수 있는 방식. <head>요소 안에 <style>요소를 넣고, <style>요소의 여는 태그와 닫는 태그 사이에 CSS 코드를 작성함.

ex) <style>요소 안에 CSS 코드를 사용하여 p의 부분들의 색을 흰색, 폰트 크기를 18px로 변경해준다.

<head>
  <style>
    p {
      color: while;
      font-size: 18px;
    }
  </style>
</head>

 

 

- CSS 파일: HTML과 CSS 코드를 각각의 파일로 분리하는 방식. CSS 파일은 .CSS 확장자 명으로 만들 수 있음.

ex) webstyle.css

★방법) CSS 파일을 사용하려면 HTML 파일과 연결해주어야한다.

HTML 파일의 <head>부분 안에 <link>요소를 추가해 준다. <link>요소는 닫는 태그가 불필요하며, CSS 파일의 경로를 적는 속성인 href, 연결할 문서의 타입을 표현해주는 속성인 type, HTML 파일과 CSS 파일 사이의 관계를 표현해주는 속성인 rel가 필수적이다.

<link href="./webstyle.css" type="text/css" rel="stylesheet">

 

CSS 코드 구조

① 태그 이름으로 사용하기: HTML요소의 태그 이름을 사용함으로써 꾸미고자하는 HTML요소를 선택할 수 있다.

태그 이름과 함께 중괄호를 써주고, 중괄호 안에 꾸미기 코드를 작성해주면 된다.

p {
  color: white;
}

 

② 클래스 이름으로 사용하기: HTML요소의 클래스 이름을 사용함으로써 꾸미고자하는 HTML요소를 선택할 수 있다.

점( . )을 찍고 그 뒤에 클래스 이름을 적은 후에 중괄호를 써주고, 중괄호 안에 꾸미기 코드를 작성해주면 된다.

<!-- <p class="paragraph1">This is paragraph1.</p> -> HTML파일에 paragraph1이라는 클래스 이름을 속성으로 가진 p요소 -->

.paragraph1 {
 color: black;
}

-> HTML요소의 클래스 속성을 여러 개 가질 수 있다. 클래스 이름을 적는 곳에 나란히 적으면 된다.

<!-- <p class="paragraph1 paragraph2">This is paragraph.</p> <- HTML파일에 2개(paragraph1와 2)의 클래스 이름을 속성으로 가진 P요소 -->

.paragraph1 {
  color: black;
}
 
.paragraph2 {
  font-family: Arial;
}

 

③ 아이디 이름으로 사용하기: HTML요소의 아이디 이름을 사용함으로써 꾸미고자 하는 HTML요소를 선택할 수 있다.

샵( # )을 적고 그 뒤에 아이디를 적은 후에 중괄호를 써주고, 중괄호 안에 꾸미기 코드를 작성해주면 된다.

<!-- <p id="main-paragraph">This is paragraph.</p> <- HTML파일에 main-paragraph라는 아이디를 가진 P요소 -->

#main-paragraph {
 color: black;
}

 

☆ 클래스는 여러 번 사용할 수 있지만 아이디는 하나의 요소만을 꾸민다.

★ 꾸미기 편집을 쉽게 하려면 CSS선택기는 태그 -> 클래스 -> 아이디 순서로 지정하는 것이 좋다.

-> 태그보다 클래스와 아이디가 구체적이고 클래스보다는 아이디가 구체적이기 때문이다.

 

④체인 선택기: 동시에 2개 이상의 CSS선택기를 가질 수 있다.

ex) 태그와 클래스 선택기를 가질 수 있다.

p.paragraph1 {
 color: black;
}

 

⑤ 중첩 요소에서 선택기 사용하기

ex) 리스트에서 리스트 아이템들에 접근하기 위한 방법.

<!-- HTML에 first-list라는 클래스 속성을 가진 순서없는 리스트가 있음. 
<ul class='first-list'>
  <li> ... </li>
  <li> ... </li>
</ul> --> 


.first-list li {
 
}

 

⑥ 체인과 구체성: CSS선택기에 태그, 클래스, 아이디를 더 많이 추가할 수록 CSS선택기의 구체성이 증가한다.

ex) 클래스와 태그를 모두 가지고 있는 CSS선택기가 구체성이 높으므로 P요소이며 main클래스인 부분은 하얀색이 된다.

p {
  color: black;
}
 
 
.main p {
  color: white;
}

 

 다중 선택기: CSS를 간결하게 만들기 위해 다중 CSS선택기에 CSS스타일을 동시에 추가할 수 있다.

<!-- 원래 코드
P {
  font-family: Georgia;
}
 
.main {
  font-family: Georgia;
}
-->

p, 
.main {
  font-family: Georgia;
}

 

반응형
저작자표시 비영리 변경금지

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

[Front-End] Visual Studio Code로 HTML 웹사이트 만들기  (0) 2021.01.23
[Front-End] CSS 배우기 : 시각적 규칙  (0) 2021.01.21
[Front-End] HTML 배우기 : Semantic HTML  (0) 2021.01.18
[Front-End] HTML 배우기 : 구조  (0) 2021.01.17
[Front-End] HTML 배우기 (2)  (0) 2021.01.16
'Web/HTML & CSS' Related Articles more