웹개발_css 2주차 공부

css를 추가하는 방법

1. <style> </style> tag 이용 

<style>

  a //selector(선택자) { color :black;

    text-decoration : none; //밑줄 없애기 

 

} //declaration

 

</style>

2. 태그에 대한 css 적용을 하고 싶을 때 style 속성 이용

  <a href="sdfasdf"  style = " color:red"  >

 

#박스 모델

display : block;

display: inline;

display:none;

 

padding // 여백을 줌.

margin // 간격을 줌. 

 

border- right // 테두리 정함. 

<div> //스타일만 넣고 싶을 때. 아무 의미 없는 tag

#grid 모델

<style>
  #grid{
      border:5px solid pink;
      display:grid;
      grid-template-columns:150px 1fr; //Navigation 크기는 150px로 고정
      //grid-template-cloumns: 1fr 2fr; // 전체 크기를 3fr로 했을 때 1:2 비율
      
      }
      
 </style>
 
 <div id="grid">
 	<div>Navigation</div>
    <div>Article</div>
    
 </div>

Navigation

Article

#미디어 쿼리

-반응형 웹

//screen width> 800px
@media(min-width:800px){
div{


	display:none;
}}

//screen width < 1000px
@media(max-width:1000px){


}

#코드의 재사용( 중복 제거)

html 코드를 css 파일로 빼기

<link rel="stylesheet" href="style.css" >