생활코딩
www.youtube.com/playlist?list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B
<박스모델>
h1 태그는 화면 전체를 쓴다.(block level element라고 부름)
(element는 tag와 같은말)
a태그인 링크는 줄바꿈을 하지않고 자기 컨텐츠 크기만큼만 사용한다.
(inline element라고 부름)
작은 박스가 자기 크기만큼만 사용하는 a 태그
여기서 h1태그를 자신의 부피만큼만 사용하고 싶으면
diplay를 인라인으로 하면된다.
display : none 을 사용하면 화면에서 사라진다.
정리하자면
- h1 tag는 화면전체를 사용하고 링크는 딱 자기 컨텐트 만큼만 쓴다.
- html의 모든 태그들의 크기는 모두 다르다.
- 화면전체를 쓰는 tag는 block
- 자기의 부피만큼은 inline
그러나 display 옵션으로 언제든지 바꿀수 있다.
<그리드>
h1 부분의 아래쪽에 선을 만듬
개발자 도구로 보면 margin부분때문에 위쪽에 공간이 많이 생겨서
아래쪽과 차이가 심하므로 margin부분을 조정해줄것
h1에 margin:0; 을 줘서 공간을 없애고, padding을 조절해서 자연스럽게 띄어둔다.
저 부분을 만들기 위해서 ol 태그에 border를 주면 블럭이기 때문에,
오른쪽 화면 끝으로 선이 가있다. 그래서 width를 이용하여, 폭을 조정해준다.
그리드로 본문 내용을 저 부분에 넣어줄거다.
먼저 그리드 사용방법을 알아보자.
나란히 배치하기 위해서, 두개의 태그를 부모 태그로 감싸주고 id를 부여한다.
네이게이션 부분은 150px로 고정되고,
아티클 부분은 1fr을 사용하면서 150px을 제외한 나머지 공간이 자동으로 배치가 된다.
둘 다 1fr로 하면 1:1 로 자동으로 조정된다. 2fr, 1fr은 왼쪽이 두배로 더 화면을 많이 차지하게 되는것.
텍스트가 많아짐에 따라 화면이 자동으로 늘어난다.
※ 그리드처럼 최신기술을 사용하려면 현재 사용해도 되는지 안되는지 데이터에 근거해서 판단해야 된다.
해당 사이트에 들어가서 어떤 브라우져가 사용가능한지 볼 수가 있다.
정리하자면
- span과 div는 아무 의미도 없는 디자인을 위한tag이다. (빈태그)
- div는 block element 다.
- span 은 inline element다.
- grid를 사용함으로써 왼쪽 / 오른쪽을 구분해 줄 수 있고,
아무리 많은 내용이 들어가도 딱 맞게 화면이 구분된다.
그리드로 두 덩어리를 만들어서 나란히 세움.
<실행화면>
<미디어 쿼리>
화면의 크기에 따라 웹페이지들의 각 요소들이 반응해서 동작하게 되는것.
화면크기가 800px보다 작냐 크냐에 따라 다르게 동작하게 만들것.
사용법을 예로들면,
이제 우리가 해볼것은 그리드를 했을 때 본문의 내용이 네비게이션 오른쪽으로 갔었다.
이번에는 html 창을 줄였을 때 그리드가 해제되면서 본문 내용이 네비게이션 아래쪽으로 가게 해보자.
화면에 600px보다 작을 때 네비게이션의 오른쪽에 있던 선을 없애고,
좁아지면서 그 선이 아래쪽으로 가게된다.
(#laptop은 ol태그의 id)
<실행화면>
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'HTML & CSS > HTML & CSS 기본' 카테고리의 다른 글
| [생활코딩] HTML & Internet (0) | 2020.07.28 |
|---|
댓글