ㅋㅋㅋㅋㅋㅋㅋ블로그에 정리하다가 두번이나 날라가서ㅋㅋㅋ^^..... 불친절함주의
어제 몇시간동안 붙잡고 여러 학우분들의 도움과 선생님의 도움을 받아서.......!!!!
과정이 우당탕탕 이었지만 어쨌든 샘플과 비스무리하게 완성은 했다. 진짜 지옥의 css.... 프론트.....
완성은 뿌듯했지만 혼자서는 못할 것 같아서 복습겸 만들어보았는데 이게... 뭐지...?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
박스크기를 보기위한 팁을 얻어서 색을 지정해줬었는데 의도를 가진건 아니지만 뭔가 더 징그럽게 보이는 색이 됐다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 키메라같아ㅋㅋㅋ
얘를 고쳐주려고 노력하다가 난리를 쳐도 꿈쩍도 안하길래 반 포기상태로 보내주려고 했는데 오늘 수업을 듣고 나니 왜 이 대참사가 일어났는지 이해가갔다. 내가 블록레벨 요소와 인라인레벨 요소를 섞어 쓰고 태그의 속성이 부모요소에 적용되는건지 자식요소에게 적용되는건지를 고려 안하고 그냥 위치조정하는 태그만 검색해서 적용했기 때문에 꿈쩍도 안한 것이었다...ㅠㅠ 역싀 컴퓨터는 잘못한게 없어! 인간이 다 잘못이야!
일단 각각 개념부터 정리하고 가자
박스모델의 두가지 요소
1. 블록레벨 요소 : 태그를 사용해서 요소를 삽입했을 때 혼자 한 줄을 차지한다(width 100%)
블록레벨 요소의 왼쪽 오른쪽에 다른 요소가 올 수 있다. ex) <div> <h1>
2. 인라인 레벨 요소 : 한 줄에 인라인 요소 여러개 삽입가능. 한줄을 차지하지 않음, 다음 요소가 붙어서 출력됨
자신의 크기만큼(콘텐츠 영역만큼)만 차지하고 나머지 공간에는 다른 요소가 나오게 함 ex) <span> <img>
- 박스모델은 콘텐츠 영역, 박스와 콘텐츠 영역사이의 여백(=패딩), 박스의 보더(테두리),
여러박스 모델사이의 여백 마진 등의 요소로 구성된다.
콘텐츠 사이의 간격이나 배치등을 고려할 때 필요한 개념(패딩, 마진)
+) 그리고 부모 요소는 내가 속성을 부여하려는 범위에서 가장 바깥의 태그이고
부모태그의 바로 아래 단계 태그들이 자식태그
자식태그의 안에 들어있는걸 손자태그라고 한다. 속성에 따라서 자식의 특정값을 갖고와서 쓰기도하고
부모단계에서 사용해라 자식단계에 적용이 되는 속성이 있기 때문에 알아둬야 한다.
그러니까 콘텐츠의 크기를 계산할때 단순히 width + height 가 아니라.
콘텐츠의 크기 = width + height + padding + border + margine 이라는 뜻이다.
오호.... 지금은 대부분 px등 고정값을 지정해주는데 만약 비율값으로 준다면...? 보통의 웹 페이지를 생각해보면
크기가 고정인 요소도 있고 화면크기에 맞춰서 변하는 요소도 있을 것이다.
근데 그럼 웹 페이지를 만들려고 할 때 요소들의 크기가 일일히 계산해서 배치 해야하나..?
...........??
하지만 걱정마라!
다행히 알아서 요소의 크기를 계산해주는 속성이 있다!!! 바로바로
박스 모델의 크기를 계산하는 속성(box - sizing)
: 너비와 높이 속성은 박스 모델에서 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 가리킨다.
웹문서에 여러가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도
콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야한다.
가 정의이고 예시코드와 함께 보자!
<예시코드1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box</title>
<!--
박스 모델의 크기를 계산하는 속성(box-sizing) : 너비와 높이 속성은 박스 모델에서 콘텐츠 주변의 여백이나
테두리를 뺀 콘텐츠 영역의 크기를 가리킨다.
웹문서에 여러가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도
콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야한다.
box-sizing 속성
border-box : 테두리 까지 포함해서 너비값 지정
cotent-box : 콘텐츠 영역만 너비 값 지정
이게 왜 필요한가?
=> 웹 브라우저에 콘텐츠를 배치할 때 크기고려해야하기 때문에
-->
<style>
div{
/* margin-bottom: 20px; */
width: 200px;
height: 100px;
border: 1px solid black;
}
.box1{
/* width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black; */
margin: 50px;
}
.box2{
width: 200px;
height: 100px;
padding: 20px; */
border: 10px solid red;
margin: 30px 50px;
}
/* 위 왼쪽오른쪽(양쪽) 아래 */
.box3{
margin: 30px 20px 50px;
}
.box4{
margin: 30px 50px 30px 50px;
}
.box5{
margin-right: 20px;
}
/* 박스의 너비 값? 너비값+패딩값+선 두께 =>이걸 계산해주는게 */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
딱봐도 하나의 크기가 안맞아 보인다. 물론 지금은 다른 박스들을 고정값으로 주었으니 그냥 크기숫자를 똑같이 해주면되지만ㅎㅎ 새로 배운 속성을 사용해보자!
저 튀어나온 박스의 스타일에 box-sizing만 추가해주면 된다.
.box2{
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid red;
margin: 30px 50px;
}이렇게! 추가해줬다
그럼 이렇게 콘텐츠의 딱 크기가 맞게 변경된다! 선이 두꺼워서 박스가 작아보이지만 위에서 말했듯이
콘텐츠의 크기 = width + height + padding + border + margine이니까...!!!
크기는 같다 진짜로...!!! 내 말이 의심된다면 f12 개발자 도구로 확인해보면 된다.
+) 그리고 box-sizing 속성을 부여해주니 width와 height를 지정해줘도 그걸 무시하고 다른 박스와 크기가 같아졌다.
'블록체인기반 SW 개발자 과정(feat.경일게임아카데미)' 카테고리의 다른 글
| <JAVASCRIPT> 22.05.23일 6일차 기록 / 자바스크립트의 기본, 연산자 / switch 조건문 형식 (0) | 2022.05.23 |
|---|---|
| <JAVASCRIPT> 22.05.20 5일차 기록 / 자바스크립트의 기본 / 자바스크립트의 자료형 (0) | 2022.05.20 |
| <HTML> 22.05.19 4일차 기록 - 2 / 컨텐츠(요소) 가로로 배치하기 display : flex 와 float의 차이, 브라우저 창에 빈틈 없이 컨텐츠 붙이기 (0) | 2022.05.20 |
| <HTML> 2022.05.17 2일차 기록 / <colspan> <rowspan> <style> <th> <tr> <td> (1) | 2022.05.17 |
| <HTML> 2022.5.16 일 1일 차 기록 (0) | 2022.05.16 |
