div는 기본 요소값이 tap
블럭은 브라우저에서 도형취급 받는다.
안 나올 땐 잘라냈다가 붙여넣으면 나올 수도 있음
padding
어떤 특정한 박스 안에 들어가는,
특정한 선 안쪽으로 들어가는,
태그선을 기준으로 안쪽으로 들어오는 여백
태그 너비 높이값에 포함시킬 수 있다.
margin
특정한 오브젝트를 기준으로 바깥쪽에 들어가는 여백
태그선을 기준으로 바깥쪽에 들어오는 여백
태그 너비 높이값에 포함되지 않는다.
*형제관계에서 활용
gap
flex에서 사용하는 여백값
요소와 요소 사이에 들어가는 값
왼쪽 오른쪽 구분해서 넣을 수 없고 요소 사이에 한번에 들어간다.
*형제관계에서 활용
margin ↔ gap
[ inline과 padding 관계 ]
inline 요소는 padding-top을 적용 했을 때 위치가 고정된 상태로 적용된다.
(정상작동하지 않는다.)
(해결방법) 다른 display 속성값으로 바꾸어 준다.
- 한줄에 같이 inline-block
- 한줄에 하나씩 block, flex
[ 도형정렬과 텍스트요소 정렬 ]
도형정렬 ------
- margin 속성을 사용하여 정렬한다
- 좌측정렬 margin-right: auto;
- 우측정렬 margin-left: auto;
- 중앙정렬
margin-right: auto;
margin-left: auto;
*고무줄을 양손으로 잡고있다가 왼손을 놓으면 고무줄이 오른쪽으로,
다시 잡고있다가 오른손을 놓으면 고무줄이 왼쪽으로,
다시 잡고있다가 양손을 같이 놓으면 고무줄이 중앙으로 가는 것 처럼
도형 정렬도 같게 생각하면 된다.
텍스트요소 정렬 ------
- text aline 속성을 사용하여 정렬한다.
[ 브라우저에서 도형취급 ]
- block
- flex
[ 브라우저에서 텍스트 요소 취급 ]
- 텍스트
- inline
- inline-block
[ 정렬 공통 특징 ]
- 뚱냥이와 홀냥이처럼 크기가 같으면 정렬할 수 없다.
뚱냥이는 박스에 끼어서 움직이지 못하고
홀냥이는 박스가 더 크니까 움직일 수 있는 것 처럼 생각하면 쉽다.
- 특정 정렬 속성을 사용했을 때, 정렬되지 않는다면
상위태그와 하위태그 크기가 같은지 체크하면 스스로 문제를 해결할 수 있다.
[ 텍스트 속성 ]
- 적용한 태그에 커스텀되지 않고 적용한 태그 바로 밑 태그부터 시작해서
가장 아래쪽에 있는 후손 태그까지 싹 다 적용된다.
- 텍스트 속성을 사용할 때는
텍스트 요소를 감싸고 있는 바로 위 부모태그에 사용하는 것이 가장 안전하다.
나중에 익숙해지면 전체 상위 태그에 적용해도 된다.
- 텍스트 속성
글자 크기, 글자 색상, 행간, 자간, 텍스트 정렬, 폰트
