CSS

CSS

style태그를 이용
문법 하나로 한번에 처리가능-편리함

문법

style태그

<style> 
a { 
color=red;
text-decoration: none ;
}
</style>

style속성

<a href="https://eunryongstudy.github.io/web1-html/2.html" 
   style="color:red; text-decoration:underline;">
  CSS
</a>

속성검색

css text size property
css center property

선택자

id
class
tag,p 순서대로 우선순위
같은 선택자 일시 나중에 온 값을 처리

선택자 검색:css selector

BOX

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

중복제거

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

BOX 속성

<style>
            h1{
                border:5px solid red;
                padding: 20px;
                margin: 20px;
                display: block;
                width: 100%;
        </style>

GRID

div=디자인을 위한 태그

<style>
            div{
                border: 5px solid gray;
                display: grid;
                grid-template-columns: 150px 1fr;
            
            }
        </style>

MEDIAQUERY

<style>
            div{
                border: 10px solid green;
                font-size: 60px;
            }
            @media(max-width:800px){
                div{
                  display:none;
                   }
                }
        </style>

중복 제거

css파일 생성
style 태그 제거후
<link rel="stylesheet" href="***.css"> 추가