CSS

jungnoeun·2021년 8월 18일

bcFE

목록 보기

2/4

CSS 구성

CSS 선언

span { color :red; }

css는 위와 같이 구성된다고 할 수 있다.

selector(선택자) (=span)
property (=color)
value (=red)
추가적으로 {}(=brace)는 오브젝트를 표현하는 것으로 그 안의 값은 따옴표없이 property 이름을 쓰고 value로 어떤 속성이름을 주면 된다.

style을 HTML에 적용

style을 html에 적용하는 방법은 3가지가 있다.

inline
internal
external

inline

html 태그안에다가 넣는 방법.
아래를 보면 span태그안에 style="color:red;"라고 되어 있는 것을 볼 수 있다.
같은 셀렉터에 같은 속성(value)을 넣는 것은 inline,internal,external 순서대로 우선해서 적용이 된다.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
    <title>World !</title>
  </head>
  <body>
    <span style ="color:red;">HELLO World!</span>
  </body>
</html>

internal

head안에 바로 style을 넣을 수 있음
장점
1. 별도의 css파일을 관리하지 않아도 된다.
1. 서버에 css파일을 부르기 위해 별도의 브라우저가 요청을 또 보내지 않는다.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
    <title>World !</title>
    <style>
      span{
      	color :red;
      }
    </style>
  </head>
  <body>
    <span>HELLO World!</span>
  </body>
</html>

html에 css를 집어넣는 것은 좋은 방법이 아님
왜냐하면 구조를 표현하는 html에 css가 들어있으면 구조와 스타일이 섞이게 됨
그래서 유지보수가 어렵고 관리가 어려움

external

외부파일(.css)로 지정하기
html이 있고 별도의 css파일을 만들어서 include시키는 방식.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8" />
    <title>World !</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <span>HELLO World!</span>
  </body>
</html>

CSS 상속

상속: 상위에서 설정된 스타일을 하위에서도 쓴다.
재사용 측면에서 좋음

배치태그 상속불가

아래와 같은 코드를 작성하였을때, body태그 바로 밑의 div태그와 그 밑의 태그들에 color:green;과 font-size : 30px;의 속성이 상속되어 적용됨.
하지만 border나 padding과 같은 배치와 관련된 속성은 상속이 되지 않고 body태그 바로 밑의 div태그에만 적용되었다.
즉, 배치와 관련된 속성은 상속이 되지 않는다.
또한, body > div는 div로도 표현이 가능하긴 하지만, body태그 밑의 div인지 li태그 밑의 div인지 불명확하기 때문에 body > div로 해주어야 한다.

<html>
  <head>
    <style>
      body > div{
        color : green;
        font-size : 30px;
        border:2px solid slategray;
        padding : 30px;
      }
    </style>
  </head>
  <body>
    <div>
    <span>my text is upper</span>
    <ul>
      <li><span>my text is dummy</span>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas repudiandae minima excepturi repellendus itaque facere maxime mollitia laborum placeat minus possimus a ullam doloremque, officiis eveniet quas, hic sequi quod?</p>
        </div>
      </li>
      <li></li>
    </ul>
      </div>
  </body>
  
</html>