강좌 : 유튜브 생활코딩

2. WEB2-CSS

✍그리드

그리드 써먹기

<style>
    #grid{  /* id가 grid인 값 */
        display: grid;
        grid-template-columns: 150px 1fr;
    }    
    #grid ol{  /* id가 grid인 값 안의 ol태그 */
        padding-left: 30px;
    }
    #article{
        padding-left: 25px;
    }
</style>

<div id="grid">
    <ol>
        <li> </li>
    </ol>
    <div id="article">
        <h2> </h2>
        <P> </P>
    </div>
</div>
 

---

✍미디어쿼리

반응형 웹, 반응형 디자인

• 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 동작하는 것

/* 화면의 크기가 800px 이상일경우 화면에 표시x */
@media(min-width:800px){
	div{
    	display:none;
    }
}

++ 반대로 800px 이하일경우엔 min대신 max사용

완성

/* 화면의 크기가 500px 이하일때 */
@media(max-width:500px){
    #grid{
    display: block;
    }
    ol{
    border-right:none;  /* 오른쪽 테두리 삭제 */
    }
    h1 {
    border-bottom:none;  /* 밑에 테두리 삭제 */
    }
}

---

✍코드의 재사용

• 중복의 제거
• 모든 페이지의 코드를 효율적으로 변경
• style태그 제외 순수한 CSS코드만 복사하여 별도의 .css파일에 붙여넣기
• 스타일태그 지우고 그 위치에 *링크를 이용하여 별도로 저장된 .css 파일 불러오기

/* 링크 */
<link rel="stylesheet" href="style.css">