Full_Stack developer

CSS 란 ?? 본문

FE/CSS

CSS 란 ??

develkbh 2024. 1. 25. 12:40

CSS를 알기위해선 선행적으로 HTML을 아셔야 합니다

간단하게 설명한다면 HTML은 웹사이트에서 화면에 표시되는 정보이며, CSS는 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는(디자인) 역할을 하게됩니다

 

 

초창기에 웹은 HTML만으로도 만들기, 꾸미기를 하였습니다

그러나, 웹 사이트가 폭발적으로 커지면서 여러개의 공통적인 문서(HTML)를 1개의 디자인이 변경되면 모든 파일을 수정하여야 되는 문제가 발생하게 되었습니다

 

CSS는 이런 문제를 동시에 해결할 수도 있고, 웹 페이지 정보와 스타일을 분리하여 유지보수를 수월하게 할 수 있습니다

 

 

 

 

 

 

 

   CSS - CSS 사용방법

 

 

CSS는 보편적으로 사용되는 방법은 3가지이며, 어떠한 방법으로 작성하냐의 따라 차이가 존재하게 됩니다

 

큰 틀에서 사용법은 다음과 같습니다

 

 

1. HTML 안에서 style 속성을 이용하는 방법입니다

 

2. <style> 태그를 통해 HTML 문서 내부에서 이용하는 방법 입니다

 

3. 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법 입니다

 

 

 

1. HTML 안에서 style 속성을 이용하는 방법

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>타이틀</title>
  </head>
  <body>
<div style="color:blue">
서버구축이야기!!
</div>
  </body>
</html>

 

위 코드는 HTML 태그 안에서 style 입력 후 안에 원하는 속성을 입력하는 방법입니다

 

 

사용법 : < [태그] style = " [속성] " >

 

 

 

 

 

2. <style> 태그를 통해 HTML 문서 내부에 이용하는 방법

 

<!DOCTYPE html>
<html>
 <head>
<style>
.my_css{color: blue}
</style>
 </head>
  <body>
<div class="my_css">
서버구축이야기!!
</div>
  </body>
</html>

 

위 코드는 HTML 페이지 안에서 head안에 style 태그로 분리하는 방법입니다

 

 

사용법 : <style> [id또는 클래스] { [속성] } <style>

 

 

 

 

3. 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법

 

가장 많이 사용하는 방법이기도 합니다

CSS를 별도의 파일로 생성하여 여러개의 HTML 문서를 같은 CSS로 적용하였을때 중복과 유지보수 혹은 관리가 편리합니다

 

 

 

<!DOCTYPE html>
<html>
 <head>
<link rel="stylesheet" href="my.css" type="text/css">
 </head>
  <body>
  <h1>서버구축이야기!!</h1>
  <div>서버구축이야기!!</div>
  <div class="my_css">서버구축이야기!!</div>
  </body>
</html>

 

위 코드는 CSS 파일을 분리하기 위한 코드이며, 먼저 HTML 문서안에 link 태그를 이용하여 별도로 생성한 css 파일을 연결합니다

 

 

사용법 : <link rel="stylesheet" herf=" [파일의경로] " type="text/css">

 

 

 

@charset "utf-8";
h1 {color:green}
div {color:blue}
.my_css {color:red}

 

위 코드는 CSS 코드이며, CSS 처음코드에 @charset "utf-8"; 코드는 CSS 인코딩 설정입니다

그리고 CSS를 적용할 태그, class, id 입력 후 속성을 적용하시면 됩니다

 

 

사용법 : [ [tag] or  [class] or [id] ] { [css 속성] }

 

'FE > CSS' 카테고리의 다른 글

CSS 텍스트 정렬 text-align  (0) 2024.01.25
css 폰트 속성 알아보자  (2) 2024.01.25
css 선택자란 무엇인가?  (0) 2024.01.25
'FE/CSS' Related Articles more