기본 html을 세팅합니다.
**각각의 문자에 테두리를 주고, 그것들을 나란히 배치해보겠습니다.
1. 1) <div></div>: division의 약자입니다.
-아무런 의미는 없고 단지 디자인 용도로 쓰입니다.
-block level element여서 화면 전체를 씁니다. => NAVIGATION과 ARTICLE이 줄바꿈이 됩니다.
2) <span></span>은 <div></div>태그와 똑같은 목적입니다.
하지만 Inline level element이어서 내비게이션과 아티클의 줄바꿈이 되지 않습니다.
따라서 <div>냐 <span>이냐는 무엇이 필요한지에 따라 사용합니다.
2. 그리드를 알아보기 위해 각각의 태그 부피감을 확실히 알 필요가 있습니다.
이 웹페이지의 모든 div에
<style>
div{
border : 5px solid gray;
}
</style>
이렇게 하면 부피감이 명확해집니다.
3. NAVIGATION, ARTICLE이 나란히 놓이게 하기 위해 최신방법인 그리드를 씁니다.
=>2개의 <div></div>를 감싸는 부모 태그가 필요합니다.
1) 부모 태그에 id를 줍니다.
<div id = "grid">
(id이름은 grid말고 다른 이름으로 해도 상관이 없습니다.)
<style></style>로 가서
#grid{
border : 5px solid pink;
}
*id값이 grid인 태그에서 두 태그를 감싸고 싶으면 두 태그를 묶는 부모 태그가 필요합니다.
2) NAVIGATION과 ARTICLE을 나란히 배열하겠습니다.
display : grid
를 입력합니다. 이것만으로는 아무런 변화가 없습니다.
(display는 block level element, Inline, none을 통해 어떤 태그가 표시되는 방법을 완전히 바꾸는 매우 중요한 속성입니다.)
grid - template - columns : 150px 1fr;
을 씁니다.
*150px는 첫번째 컬럼 부피이고 1fr은 나머지 공간을 다 쓴다는 뜻입니다.
*1fr 1fr라고 하면 두 개는 같은 크기가 됩니다.
*2fr 1fr는 첫 번째 컬럼이 2/3이고 두 번째 컬럼이 1/3이라는 뜻입니다.
4. Grid의 좋은 점
-text가 많아짐에 따라 자동으로 커집니다. 왼쪽에 있는 내비게이션 element도, 내비게이션을 감싸는 태그도 자동으로 커집니다.
-아주 최신 CSS기술입니다.
5. 어떤 CSS기술을 현재 사용할 수 있는지 아닌지를 데이터에 근거해서 알아볼 필요가 있습니다.
여기로 들어갑니다. 여기에서 html, css, javascript 등의 데이터를 알아볼 수 있습니다.
빈 칸에 grid를 넣습니다.
Chrome 57에는 그리드가 지원됩니다.
IE 11에는 부분적으로 지원됩니다.
Chrome 4-28에는 그리드가 지원되지 않습니다.
이런 표를 통해 최신 기술인 CSS가 지원되는지 안 되는지 알아보고 유용하게 사이트를 선택해서 사용할 수 있습니다.
오른쪽 상단의 95.47%라는 수치는 전 세계의 그 비율만큼이 그리드를 이용할 수 있다는 의미입니다.
'To go to 뉴질랜드 > 간식 - IT(코딩)' 카테고리의 다른 글
BOX model을 이용하여 웹페이지 디자인하기 (0) | 2021.02.14 |
---|---|
CSS박스모델(border,padding,margin,width) (0) | 2021.02.11 |
TEXT SIZE(크기), ALIGN(정렬) 및 CLASS, ID 속성 위계관계 (0) | 2021.01.30 |
동영상 삽입/CSS시작 (0) | 2021.01.24 |
웹호스팅을 해보려고 하다.(모르겠다ㅠㅠ) (0) | 2021.01.23 |