CSS 알기쉬운 기본적인 문법 정리

SCC의 가장 기본적인 문법

 

   h1{color:red}에서,

     h1     {color:red} 

- 선택자와 기술으로 이루어짐

 

 

1. 테그의 디자인을 바꾸고 싶을 때

 

<style>
      h1, h2{                            h1, h2태그의 디자인을 변경한다.
        color:red;
        font-size:10px
      }
      h2{                                 h2태그의 디자인을 변경한다.
        text-decoration: underline;
      }
      header h1{                       header태그 안의 h1태그만 디자인을 변경한다.
        border:1px solid blue;
      }

  </style>

 

2. 원하는 부분에만 디자인을 바꾸고 싶을 때

<style>
      #css{                              #id{ 디자인 } 으로 원하는 부분에만 디자인을 바꿀 수 있다.
        border:1px dotted red;
      }
 </style>

 

  <li id="css">css</li>

 

 

 

 

 

3. CSS내용을 html코드안에서 분리할 수 있다. (같은 style을 여러번 사용할 때 유지보수가 쉽다.)

</head>

<link rel="stylesheet" type="text/css" href="file:///C:/Users/Byun%20YB/Desktop/웹/css/style.css">

 외부에 있는 css파일을 읽어오는구나!         외부에 있는 css파일의 주소

</head>

 

 

 

 

 

border : 태그의 태두리 ex)border:1px dotted red; (선굵기 1px, 점선, 빨간색으로)

margin: 태그와 태그 사이의 간격 ex)margin : 20px;

padding: 태그 태두리와 내용물간의 간격 ex)padding:20px;

 

 

 

float : 2개의 컨텐츠가 나란히 배치되도록 하는 효과

        ex) float:right (여기서는 img에 float 속성을 적용하여 오른쪽으로 배치)