CSS 10 : 그리드 소개
목록과 본문이 나란히 위치하는 디자인을 하기 위해 그리드라는 방법을 활용할 수 있다.
<body>
<div>너를</div>
<div>사랑해</div>
</body>어떤 의미도 존재하지 않는데 묶어줘야 할 때가 존재하고, 그런 태그를 사용해야 할 때가 있다. 그때는 div를 이용하면 편리하다.
span - inline div- block
그리드를 알아보기 위해서는 각각의 태그의 부피감을 알아볼 필요가 있음
<style>
div{
border: 5px solid green;
}
</style>부피감이 명확해진다.
요소를 나란히 놓기 위해 그리드를 쓸 것이고, 그것을 하기 위해서는 두 태그를 감싸는 부모 태그가 필요하다.
<div id="grid">
<div>너를</div>
<div>사랑해</div>
</div>그리드 태그에 대해서 pink를 주면
#grid{
border:5px solid pink;
display:grid;
}구분이 더욱.명확하게 가능해진다. 결국,
두개의 태그를 어떤 배치를 하고 싶다면? 그것을 감싸는 부모 태그가 필요하다는 것을 기억하면 좋겠다.
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}픽셀은 고정적인 사이즈고 fr은 비율로 화면 크기에 따라 유동적으로 변한다.
+) 최신 기술을 사용해도 되는지 아닌지? 사이트 소개
can i use.com
11. 그리드 써먹기
<ol>
안녕하세요
</ol>
<div>
<h1> HI </h1>
<p>
반갑습니다.
</p>
</div>두 개를 나란히 놓고 싶지만 두개는 독립적인 태그기 때문에 하나로 묶어주어야 한다.
밑에 있는 애들을 div로 묶어준다.
이제 위 아래를 감싸는 공통 부모태그가 필요하다. 위와 똑같은 방법으로 진행한다.
<div>
<ol>
안녕하세요
</ol>
<div>
<h1> HI </h1>
<p>
반갑습니다.
</p>
</div>
</div>
바깥쪽의 div를 그리드로 지정하기 위해 id 값을 grid로 준다.
<div id="grid">
<ol>
안녕하세요
</ol>
<div>
<h1> HI </h1>
<p>
반갑습니다.
</p>
</div>
</div> 위와 똑같이 진행한다.
디테일 다듬기는 박스모델(개발자 모드)를 활용한다. 실제로 값을 실시간으로 적용해볼 수 있다.
여기서 주의할거는 그리드의 padding을 건드리지 말고 각각 자식태그의 박스 모델을 제어하는게 훨씬
편리하다는 점이다.
그리고 태그들이 나중에는 여러번 쓰일 수도 있고, 그렇다면 구분하기가 어려워질 수 있기 때문에
grid라는 id 값의 태그 밑에 있는
<ol>
이라고 지정해줄 수 도 있다.
이렇게 하면 의미가 훨씬 분명해진다.
#grid ol{ } CSS 12 : 미디어 쿼리 소개
화면의 크기를 줄였다 늘렸다에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것을
반응형 웹/ 반응형 디자인이라고 한다.
1 만약 내가 화면의 크기에 따라 특정 아이콘이 보이게, 또는 안보이게 하고 싶다면 화면의 크기에 대해 알아야 한다. 그건 개발자 도구의 줄자를 통해 측정가능하다.
2
screen width > 800px
@media(min-width:800px)
div{
display:none;
}