박스 모델
- 화면 전체의 크기만큼 : block level element
- 자기 자신의 크기만큼 : inline element
- 컨텐츠와 테두리 사이의 공간: padding
- 테두리와 테두리 사이의 공간: margin
그리드
- 어떠한 의미도 기능도 없이 디자인을 위한 block level element 태그: div
- 그리고 똑같은 목적의 정렬 inline element 태그: span
두개 이상의 태그를 나란히 배치하고 싶다면 그 태그들을 감싸는 부모 태그가 필요하다.
grid 쓰기 위해선 style태그 안에 display:grid;를 쓰는게 우선이다.
- 화면 전체를 쓰도록 자동으로 조정되는 단위: fr
- 그리드 컬럼 배치 방식:grid-template-columns
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#grid {
border:5px solid pink;
display:grid;
grid-template-columns:150px 1fr;
/*첫번째는 150px 고정이고 나머지는 모두 두번째 단어로 배치 */
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<DIV>NAVIGATION</DIV>
<div>ARTICLE</div>
</div>
</body>
</html>현재 웹사이트들이 기술을 얼마나 채택하고 있는지 알려주는 사이트
https://caniuse.com/
특정 태그를 구체화하는 선택자: #아이디이름a 태그이름b -> 아이디이름a를 부모태그로 하는 태그이름b를 선택하는 선택자.
바른 자세로 코딩합니다 👦🏻💻
0개의 댓글
관련 채용 정보
