CSS 뽀개기

CSS는 html 문서에 디자인적인 요소를 추가한 것.

첫번째 예 <tag>

<font color="red">CSS</font>

 

1. <style> 태그쓰기

<style>

</style>

 

아래 : 기존 html 코드를 CSS문법으로 바꿔보기

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

:중복된 코드 발생

 

 

-> CSS 문법으로 바꾼 결과

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

 

:a는 selector 라는 의미

{  }는 declaration의 의미

color는 property의 의미

red는 property의 value

 

 

->html은 하나하나 바꿔야해서 숫자가 많아지면..? (wow)

->반면 css는 style 하나로 바뀔 수 있음. 하나가 바뀌면 모든 것이 바뀐다! "중복의 제거"

 

2. style 속성쓰기

<li><a href="2.html" style="color:red">CSS</a></li>

 

CSS 글자 크기는 어떻게?

->

h1 {
      font-size: 60px;
    }

 

글자 중간 정렬까지!

h1 {
      font-size: 60px;
      text-align : center;
    }

 

-회색글자 설정해보기

 

  <li><a href="1.html" style="color:gray;">HTML</a></li>
  <li><a href="2.html" style="color:gray;">CSS</a></li>

;위의 예는 중복이 발생한다. (컴퓨터는 중복 싫어해)

 

그럴 때 "class 지정하기"

 

.saw {
      color:gray;
    }

 

<li><a href="1.html" class="saw">HTML</a></li>
  <li><a href="2.html" class="saw">CSS</a></li>

 

모든 웹페이지 중 .saw가 있는 것에 gray를 적용시킨다.

 

+

.active {
      color:red;
    }

<li><a href="1.html" class="saw">HTML</a></li>
 <li><a href="2.html" class="saw active">CSS</a></li>

-> CSS가 빨간글자로 나타남.

 

명령 순서

id 선택자 > class 선택자 > tag 선택자

왜 ? 가 중요

 

-박스모델

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

a{
        border-width:5px;
        border-color:red;
        border-style: solid;
      }
    </style>

 

위의 예 중복이 싫다! 아주 간결하게 표현함.

h1, a{
        border:5px solid red;
      }

 

크기, 폭, 테투리 간격 등의 지정

h1, a{
        border:5px solid red;
        padding:20px;
        margin:20px;
        display:block;
        width:100px;
      }

 

ol{
      border-right:1px solid gray;
      width:100px;
    }

 

줄 바꿀 때

  <div>NAVIGATION</div>
    <div> ARTICLE </div>

 

부모-자식 관계

#grid{
        border:5px solid pink;
      }

  <div id="grid">
    <div>NAVIGATION</div>
    <div> ARTICLE </div>