꿈꾸는 새벽하늘

[생활코딩-WEB2] CSS (1) 본문

💻 Programming

[생활코딩-WEB2] CSS (1)

rovemin 2022. 5. 4. 17:54

1. CSS 등장 배경

(1) HTML이 정보에 전념하게 하기 위해서 HTML로부터 디자인에 대한 기능을 분리한 것.

(2) CSS를 통해 웹페이지를 디자인하는 것이 HTML을 통해 웹페이지를 디자인하는 것보다 훨씬 효율적.

 

2. style 태그

<!DOCTYPE html>
<html>
    <head>
        <title>My Web</title>
        <style>
            a {
                color: blueviolet;
            }
        </style>
    </head>
    <body>
        <h1><a href="myweb.html">My Web</a></h1>
        <ol>
            <li><a href="about.html">About</a></li>
            <li><a href="Notice.html">Notice</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ol>
    </body>
</html>

=> 모든 <a> 태그에 디자인 적용

 

3. style 속성

<!DOCTYPE html>
<html>
    <head>
        <title>My Web</title>
        <style>
            a {
                color: blueviolet;
            }
        </style>
    </head>
    <body>
        <h1><a href="myweb.html">My Web</a></h1>
        <ol>
            <li><a href="about.html" style="color: pink">About</a></li>
            <li><a href="Notice.html" style="color: indianred">Notice</a></li>
            <li><a href="contact.html" style="color: hotpink">Contact</a></li>
        </ol>
    </body>
</html>

=> style 속성이 위치하고 있는 태그에 디자인 적용

 

(1) style 속성 2개 사용하는 법

<li><a href="contact.html" style="color: hotpink;text-decoration: underline;">Contact</a></li>

 

4. CSS 속성

        <style>
            a {
                color: blueviolet;
                text-decoration: none;
                text-decoration: underline;
                font-size: 45px;
                text-align: center;
            }
        </style>

 

5. 선택자(Selector)

<!DOCTYPE html>
<html>
    <head>
        <title>Notice - My Web</title>
        <style>
            #active {
                color: red;
            }
            .saw {
                color: grey;
            }
            h1 {
                font-size: 45px;
                text-align: center;
            }
            a {
                color: black;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <h1><a href="myweb.html">My Web</a></h1>
        <ol>
            <li><a href="about.html" class="saw">About</a></li>
            <li><a href="Notice.html" class="saw" id="active">Notice</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ol>
        <p>
            This is 'Notice' page.
        </p>
    </body>
</html>

=> 기본적으로 모든 링크는 검은색, 사용자가 방문했던 링크는 회색, 사용자가 방문 중인 현재 링크는 빨간색 적용

 

선택자 우선순위 : id > class > 태그

같은 형태의 선택자의 경우 마지막에 등장한 선택자일수록 우선순위가 높음

 

6. 중복 제거

        <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-width: 5px;
                border-color: red;
                border-style: solid;
            }
        </style>
        <style>
            h1, a {
                border: 5px red solid;
            }
        </style>

 

7. 박스 모델

  • content : 텍스트나 이미지가 들어 있는 박스의 실질적인 내용 부분
  • padding : 내용과 테두리 사이의 간격
  • border : 내용과 패딩 주변을 감싸는 테두리
  • margin : 테두리와 이웃하는 요소 사이의 간격

 

8. 박스 모델 적용

<!DOCTYPE html>
<html>
    <head>
        <title>Notice - My Web</title>
        <style>
            body {
                margin: 0;
            }
            #active {
                color: red;
            }
            .saw {
                color: grey;
            }
            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;
            }

        </style>
    </head>
    <body>
        <h1><a href="myweb.html">My Web</a></h1>
        <ol>
            <li><a href="about.html" class="saw">About</a></li>
            <li><a href="Notice.html" class="saw" id="active">Notice</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ol>
        <p>
            This is 'Notice' page.
        </p>
    </body>
</html>
저작자표시

'💻 Programming' 카테고리의 다른 글

[노마드코더] JavaScript (2)  (0) 2022.06.23
[노마드코더] JavaScript (1)  (0) 2022.06.23
[생활코딩-WEB2] CSS (2)  (0) 2022.06.21
[생활코딩-WEB1] HTML (2)  (0) 2022.04.07
[생활코딩-WEB1] HTML (1)  (0) 2022.03.31
'💻 Programming' Related Articles more