Programming

[생활코딩] CSS

곰나루_ 2023. 11. 27. 21:46

● 2. CSS가 등장하기 전의 상황

        <h1><a href="index.html"><font color="red">WEB</font></a></h1>
        <ol>
            <li><a href="1.html"><font color="red">HTML</font></a></li>
            <li><a href="2.html"><font color="red">CSS</font></a></li>
            <li><a href="3.html"><font color="red">JavaScript</font></a></li>
        </ol>

- 위 코드의 문제점

  1. <h1>, <a> 태그는 각각 WEB이라는 문자가 링크, 제목임을 설명하는 "정보"임에 반해, <font> 태그는 "디자인" 기능을 할 뿐 어떠한 정보도 가지고 있지 않다. 따라서 웹페이지가 정보로서의 가치가 떨어지는 문제가 생기게 된다.
  2. 만약 다른 색깔로 바꾸고 싶다면, 여러 개의 코드를 일일이 수정해야하는 비효율이 발생한다.

 

 

● 3. CSS의 등장

코딩 잘하는 방법 = "중복의 제거"

 

<style> : "웹 브라우저야. 이 태그 안에 있는 내용은 CSS니까, CSS라는 언어의 문법에 맞게 해석해서 처리해."

    <head>
        <style>
            a {
                color:red;
            }
        </style>
    </head>

 

- CSS의 폭발적 효과

  1. "디자인"에 관한 내용임을 한 눈에 알 수 있으므로 가독성이 높아지고, 코드의 유지·보수가 쉬워진다.
  2. HTML을 돕는 경제적 언어! 태그가 아무리 많더라도 순식간에 디자인 변경이 가능하다.

 

 

● 4. CSS의 기본 문법,  5. 혁명적 변화

Selector (선택자)

Declaration (효과, 선언)

Property (속성) : Attribute와 구별할 것!

Value (값)

(사람의 언어에 비유하자면, Selector는 주어, Property는 술어에 해당)

 

- 웹페이지에 CSS를 삽입하는 2가지 방법

  1. head 부분에 <style> tag를 사용한다.
  2. 효과를 원하는 태그 안에 <style=" "> attribute를 사용한다. : 그 값으로 반드시 CSS 효과가 들어오기로 약속되어 있다. 따라서 selector는 필요 없다.
    <head>
        <style>
            a {
                color:black;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <h1><a href="index.html">WEB</a></h1>
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html" style="color:red; text-decoration:underline">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ol>

 

 

● 6. CSS property를 스스로 알아내기

검색 예시 :  "CSS font size property", "CSS font center property"...

 

"뇌를 이기는 의지는 없다" = 모든 것을 외우려고 뇌를 혹사시키지 말고, 배운 것을 활용해 문제해결 하는 능력을 키우자!

 

 

● 7. CSS selector의 기본

        <style>
            a {
                color: black;
                text-decoration: none;
            }
            #active {
                color: red;
            }
            .saw {
                color:gray;
            }
        </style>
 
         ......
 
        <ol>
            <li><a href="1.html" class="saw">HTML</a></li>
            <li><a href="2.html" class="saw" id="active">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ol>

- 위 코드 설명

  1. selector 사이 우선순위 (포괄적 < 구체적) : element (a 등) < .class < #id     
  2. 같은 selector라면, 가장 마지막에 기재된 selector가 우선순위가 높다.
  3. <a> 태그 내에 있는 class="saw"  는 HTML이지 CSS가 아니다. 즉 "<a>는 saw라는 class 값을 가지는 태그"라는 의미이다.
  4. "class 값이 saw인 태그에 변화를 주고 싶다" = .saw { color:gray; }  (앞에 온점(.) 누락 주의)
  5. 같은 값의 #id selector는 문서 전체에서 단 한 번만 등장할 수 있다. id의 핵심은 "중복되면 안된다"이기 때문이다.

 

 

● 8, 9. 박스 모델

CSS box model : 각각의 HTML 태그를 일종의 '박스'로 취급해, 그 부피감을 결정하는 것.

<h1> 같은 block level element는 '화면 전체'를 쓰고, <a> 같은 inline element는 '일부'만 사용한다.

        <style>
            /*
            block level element
            */
            h1{
                border-width:5px;
                border-color:red;
                border-style:solid;
            }
            /*
            inline element
            */
            a{
                border-width:5px;
                border-color:red;
                border-style:solid;
            }
        </style>

 

 

한편, 위 코드는 '중복'이 많아 비효율적이다. 따라서 아래와 같이 획기적으로 줄일 수 있다.

        <style>
            h1, a{
                border:5px red solid;
            }
        </style>

 

 

- property 종류 정리

  border : 박스 경계

  padding : 박스 안쪽 간격

  margin : 박스 바깥쪽 간격

  width : 박스 너비

  height : 박스 높이

  display : 성질을 바꿔줄 수 있다. (예 : display:block;  display:inline;  display:none;(웹 화면에서 안보이게))

크롬 오른쪽 클릭 > 검사

 

 

● 10. 그리드

- 오로지 디자인하기 위해 사용하는 어떠한 의미도 가지지 않는 태그 (무색무취!)

  <div> : division (block level element)
  <span> (inline element)

 

grid :  element를 원하는 방식으로 배치하고 싶다면, '부모 태그'가 필요하다.

 

 <head>
        <style>
            #grid{
                border:5px solid pink;
                display:grid;
                grid-template-columns: 2fr 1fr;
            }
            div{
                border:5px solid gray;
            }
        </style>
    </head>
    <body>
        <div id="grid">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>
    </body>

 

- 위 코드 설명

  display : grid  -> 컨테이너가 될 부모 요소에게 grid를 주면, 자식 요소들은 grid items가 된다.

  grid-template-rows (행) / grid-template-columns (열)

  1fr (fraction): 남은 자유공간의 1/(총fr) 만큼의 크기를 할당한다.

 

- 어떤 기능을 지금 사용해도 될까?

 caniuse.com

 

 

● 11. 그리드 써먹기

    <head>
        <title>WEB1 - CSS</title>
        <meta charset="utf-8">
        <style>
            body{
                margin:0;
            }
            a {
                color: black;
                text-decoration: none;
            }
            h1 {
                font-size: 45px;
                text-align: center;
                border-bottom: 1px solid gray;
                margin:0;
                padding:20px;
            }
            ol{
                border-right:1px solid gray;
                width:100px;
                margin:0;
                padding:20px;
            }
            #grid{
                display:grid;
                grid-template-columns: 150px 1fr;
            }
            #grid ol{
                padding-left: 33px;
            }
            #article{
                padding-left:25px;
            }
        </style>
    </head>

    <body>
        <h1><a href="index.html">WEB</a></h1>
        <div id="grid">
            <ol>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">JavaScript</a></li>
            </ol>
            <div id="article">
                <h2>CSS</h2>
                <p>
                    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2]
                </p>
            </div>
        </div>
    </body>

 

 

● 12. 미디어 쿼리 소개

Responsive Web (반응형 웹) : 화면 크기에 따라 웹페이지의 각 요소들이 최적화된 모습으로 변하게 만든 것.

Media Query : 반응형 디자인을 CSS를 통해 구현하는 핵심 개념. 여러 형태의 화면이 존재하는 세상에서 중요하다.

            @media(max-width:800px){
                div{
                    display:none;
                }
            }

: 화면 크기가 "최대 800px까지만" 중괄호 안의 CSS가 작동한다. (= 800px 이하에서만 작동한다.)

 

 

● 13. 미디어 쿼리 써먹기

            @media(max-width:800px){
                #grid{
                    display:block;
                }
                ol{
                    border-right:none;
                }
                h1 {
                    border-bottom:none;
                }
            }

(좌) 화면 너비 800px 이하 (=미디어 쿼리 적용)  /  (우) 화면 너비 800px 초과

 

 

● 14. CSS 코드의 재사용

"중복의 제거"

 

<style> 태그 안의 내용을 'style.css'라는 파일로 별도로 저장 후, <link> 태그로 끌어오기

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

 

-> style.css 파일 내용을 수정하면, 이를 링크로 삼은 다른 파일의 CSS가 모두 수정된다!

    즉, 겉보기에는 같으나 내부적으로는 훨씬 더 효율적인 상태가 된다.

 

 

Q. 네트워크 속도 측면에서는 불리하지 않나?

A. 'Caching' 덕분에 불리하지 않다.

    Caching (캐싱) = 파일 복사본을 저장해두고, 다음에 접속할때 보다 빠르게 불러올 수 있도록 하는 프로세스.

 

 

● 15. 수업을 마치며

공부는 많이 했는데 써먹지 않는다면, 뇌는 억울해서 더이상 공부하지 않으려고 한다.

반대로 공부는 적게 했는데 최대한 써먹는다면, 뇌는 신나서 자꾸 공부하려 한다!

-> 배운 것을 써먹어서 나에게 의미있는 웹사이트를 직접 꾸며보자.

저작자표시

'Programming' 카테고리의 다른 글

git  (0) 2024.01.14
[혼공파] Iteration  (1) 2023.12.31
[혼공파] Conditional  (1) 2023.12.15
[혼공파] Data type  (0) 2023.12.14
[생활코딩] HTML & Internet  (1) 2023.10.28

'Programming'의 다른글

  • 현재글[생활코딩] CSS

관련글

티스토리툴바