CSS - CSS란 무엇인가?





    이번 포스팅에서는 CSS를 알아보도록 하겠습니다


    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로 적용하였을때 중복과 유지보수 혹은 관리가 편리합니다



    File : my.html


    <!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">



    File : my.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 속성] }



    앞으로 CSS 포스팅에서는 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법 으로 CSS를 알아보도록 하겠습니다.

    Posted by Server-talk 서버이야기