32일차(HTML 박스, 및 레이아웃 약간..!)
border 옆은 건들이지 말기!!!!!!!!!!!!!!!!!
HTML의 대부분은 박스이다.
박스(block, inline) 이렇게 두 종류
블록속성은 무조건 꽉참
디스플레이 속성중 블을 가지고있는건 무조건꽉참
인라인 속성은 내용 양만큼만 늘어나진다 (박스가)
박스 공간 감각 알아야하는이유 = 레이아웃을 위하여
모든 태그는 다 박스
모든 박스는 4가지 요소(콘텐츠, 패딩, 경계선, 마진)
디스플레이 속성인 블럭인것은 넓이가 꽉참 한줄 다~~!
그래서 br안써도 아래로 내려가짐 하지만 a태그 같은경우엔 박스가 작아서 바로 옆줄에 나옴
높이는 그 안쪽에 컨텐트의 크기만큼 자동으로 증가됨
div는 디스플레이 블록 속성을 가진 대표적인것
넓이는 꽉차는데 높이는 안쪽 내용크기만큼 자동으로 커짐
------------------------------------------------
인라인 속성은 넓이가 딱 내용만큼 넓이가 찬다.
.inline 참
---------------------------------
박스 크기 강제조절 가능
아래 사진 body영역
--------------------------------------
-----------------------------------------------
<body> 도 박스임 홈페이지 화면 전체
border은 테두리 그리는거라고 생각해도 ㄱㅊ
--------------------------------------
콘텐츠 크기 = 태그 크기
----------------------------------
이거하면 이제 조정가능해짐
------------------------------------------
박스와 박스를 떼어내고 싶으면 마진을 건들이면 됨.
여기 안에 width랑 height는 실력오르기 전까진 홀로 사용금지...!!
box1
box2
둘다 이렇게 줘도 공용공간이라 더 큰게 적용이됨
그래서 위 내용은 하나적든 두개 적든 결과가 똑같음
----------------------------------------------------
중간 정리
모든 태그는 다 박스
모든 박스는 4가지 요소(콘텐츠, 패딩, 경계선, 마진)
지금 야호사이에 간겨글 주고 싶으면 마진 사용하면됨.
-----------------------------------------------
홈페이지 막움직여도 레이아웃 고정되게 할려면 이거 만들어야함
이거 안넣으면 레이아웃 깨짐;;!!
글자를 잡을거는 span??
----------------------------------------------
실습인데 나중에 쓰일내용은 아님
-----------------------
레이아웃 오른쪽으로 정렬되게 만들고 싶으면 이거쓰기
-------------
근데 1:2:1 비율하고싶으면 이렇게
flex하나 더 추가해서 만들기
---------------------------------------
옆을 자를 수 있는것? flex???????????
(flex 제대로 알려면 범위 엄청넓다.)
칸 오른쪽으로도 나누고 아래로도 나누고 이런식으로함
--------------------------
css 나눌 수 있음 다른곳에
