<div>12</div> 는 단순 디자인만을 위한 구분을 해주는 태그 기본적으로 블럭디스플레이
<span>12</span>은 인라인 디스플레이
display:grid; 를 사용하면 grid로 글이 나눠진다.
<style>
div{
border:5px solid gray;
}
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 1fr 1fr;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
이 경우에는 id가 grid인 부모 div에 자식 div가 2개가 있으므로 grid-template-columns에 두개의 값을 넣어준다.
#grid ol{}
인 경우 grid id 밑의 ol들만 선택이됨
media 쿼리를 사용하면 화면에 크기에 따라 코드가 변하는 반응형 웹사이트를 만들 수 있음
@media(max-width:800px){
div{
display:none
}
}
화면의 크기가 800px보다 작으면 (최대가 800) div로 묶은 태그가 보이지 않는다.
어떤 페이지에 <link rel="stylesheet" href="style.css"> 를 head에 넣으면
style.css에 있는 css 코드가 자동으로 적용된다.
다중의 페이지를 수정할때 다중의 페이지에 저 코드를 하나씩 넣으면 css 파일의 코드만 수정해도
다중의 페이지에 수정이 적용된다.
좋은 코딩은 중복의 제거
'HTML,CSS' 카테고리의 다른 글
| 22년 9월 3일 복습하면서 트러블슈팅 (0) | 2022.09.03 |
|---|---|
| 22년 9월 2일 (1) | 2022.09.02 |
| 22년 9월 1일 오후 (1) | 2022.09.01 |
| 22년 9월 1일 (1) | 2022.09.01 |