[브라우저에서 도형 취급 받는 요소]
1. block
2. flex
- 레이아웃을 구성하는 속성값들은 대부분 브라우저에서 도형취급 받는다.
[브라우저에서 텍스트 취급 받는 요소]
1. 텍스트
2. inline
3. inline-block
- inline이나 inline-block도 브라우저에서 텍스트 취급 받기 때문에 자간과 행간이 생긴다고 생각하면 쉽다.
ㄴ 실제로 이 여백을 해결하는 font-size: 0;이라는 코드가 존재한다.
ㄴ 요즘에는 inline-block으로 레이아웃을 구성하지 않는다.
ㄴ flex를 보기 전 얼마나 불편한지 체크하고 font속성이 상속된다는 개념 보기 정도로 생각하면 된다.
[텍스트 기본 특징]
1. 자간
2. 행간
3. line-height
- 텍스트는 기본적으로 가독성이 좋아야 하기 때문에 자간, 행간, line-height가 설정된 상태로 출시된다.
[텍스트 속성]
- 적용한 태그에 적용되는 것이 아니라 안쪽에 있는 요소에 적용된다.
- 적용되면 적용된 태그부터 후손요소까지 전부 텍스트 속성이 적용된다.
- 잘못 사용하면 원하지 않는 커스텀이 일어나기 때문에 텍스트 속성은 항상 텍스트 요소를 감싸고 있는 태그에 사용하는 것이 좋다.
ㄴ 예외적인 상황도 물론 존재한다.
ㄴ 텍스트 요소 6개가 한 번에 색상 커스텀이 일어나야 하면 6개를 전부 감싸고 있는 상위태그에 적용하기도 한다.
ㄴ 처음 시작 시 코드가 꼬일수도 있기 때문에 코드가 좀 길어지더래도 텍스트 요소를 감싸고 있는 상위태그에 사용하는 것이 좋다.
[텍스트 요소]
- 텍스트 요소는 부모태그보다 크기가 크면 오른쪽 요소부터 하나씩 줄바꿈 된다.
ㄴ 보통 선이나 여백값으로 인해 원하지 않는 줄바꿈이 일어난다.
ㄴ 개발자 모드로 여백이나 선값을 확인 후 수정하면 문제를 해결할 수 있다.
[box-sizing: border-box]
- 태그 너비 높이에 padding 속성값과 선 속성값을 포함시키는 코드
- 기본값: content-box
ㄴ 태그 너비 높이에 padding 속성값과 선 속성값을 포함시키지 않는 코드
- 선이나 padding값으로 원하지 않는 형태가 나올 때는 box-sizing: border-box라는 코드를 사용해 너비 높이에 padding값과 선값을 안쪽으로 넣어주면 된다.
https://codepen.io/EONJENOG/pen/XWLXzyo
inline block 으로 레이아웃 구현해보기
...
codepen.io
https://codepen.io/EONJENOG/pen/ExBPBrr
padding과 margin
...
codepen.io
[inline과 padding]
- inline요소에 padding-top을 적용하면 위치가 고정된 상태로 padding값이 적용된다.
ㄴ 해결방법: width 기본값이 auto일 때 0인 요소로 바꿔서 사용하면 된다.
ㄴ 예) inline-block, flex-item...
[padding과 margin]
- 생략하는 방법과 작성하는 방법은 동일하다.
- padding) 안쪽 여백
ㄴ 태그 즉, 바운딩 박스를 기준으로 안쪽에 여백을 생성
ㄴ 태그 너비높이에 포함된다는 특징
ㄴ 여백이 안쪽으로 밀리다 보니 요소가 자동으로 중앙에 낀다는 특징
ㄴ 상위태그와 하위요소를 분리하는 용도와 버튼 형태를 만드는 용도로 많이 사용
- margin) 바깥쪽 여백
ㄴ 태그 즉, 바운딩 박스를 기준으로 바깥쪽에 여백을 생성
ㄴ 태그 너비높이에 포함되지 않는다는 특징
ㄴ 객체와 객체 사이를 분리하는 용도로 사용 (형제끼리 적용된다고 생각하면 편하다)
https://codepen.io/EONJENOG/pen/YzowmPw
도형 정렬
...
codepen.io
[도형 중앙정렬]
- margin-left: auto; → 우측 정렬
- margin-right: auto; → 좌측 정렬
- margin-left: auto; margin-right: auto; → 중앙 정렬
ㄴ 고무줄을 양손으로 잡고있다가 왼손으로 놓으면 오른쪽으로 튕기고 오른손을 놓으면 왼쪽으로 튕기고 양손을 놓으면 가운데로 튕기는 것처럼 태그도 비슷한 원리로 생각하면 쉽다.
- auto라는 값은 남은 여백값을 전부 사용하겠다는 의미.
- 부모와 자식 크기가 같으면 절대 정렬할 수 없다. 정렬이 안된다면 부모와 자식 크기가 같은지 확인하면 된다.
★뚱냥이와 홀냥이 ★