<!-- div.div-${div0$}*5 -->
= >
<div class="div-1">div01</div>
<div class="div-2">div02</div>
<div class="div-3">div03</div>
<div class="div-4">div04</div>
<div class="div-5">div05</div>
<!-- span.false-btn.btn{Button} -->
=>
<span class="false-btn btn">BUTTON</span>
-----
바깥으로 들어가는 여백 ( magin ) <-> (gap)
안에서 들어가는 여백 ( padding )
ㄴ 태그선을 기준으로 안쪽으로 들어오는 여백
ㄴ 태그 너비 높이값에 포함
*
- margin
ㄴ 태그선을 기준으로 바깥으로 들어오는 여백
ㄴ 태그 너비높이값에 포함되지 않는다.
*형제관계에서 활용
-gap
ㄴ flex 에서 사용하는 여백값
ㄴ 요소와 요소 사이에 들어가는 값
ㄴ 왼쪽 오른쪽 구분해서 넣을 수 없고
요소 사이에 한번에 들어간다,
*형제관계에서 활요*
[inline 과 padding 관계 ]
- inline 요소는 padding-top 을 적용했을때 위치가 고정된 상태로 적용된다
(정상 작동 x
ㄴ ( 해결방법) 다른 display 속성값으로 바꾸어준다
ㄴ 한줄에 같이 inline-block
ㄴ 한줄에 하나씩 block,flex
[도형정렬과 텍스트 요소 정렬]
도형정렬)
-margin 속성을 사용하여 정렬한다.
텍스트요소정렬)
-text-align 속성을 사용하여 정렬
[브라우저 에서 도형취급]
-block
-flex
[브라우저에서 텍스트요소 취급]
-텍스트
-inline
-inline-block
[정렬 공통 특징]
-ex : 뚱냥이와 홀냥이 마냥 크기가 같으면 박스에 끼이서
못움직임
홀냥이는 박스보다 작아서 움직일 공간 있음
- 특정 정렬 속성을 사용했을때 정렬되지 않는다면
상위태그와 하위태그 크기가 같은지 체크하면 스스로 문제를 해결 할 수있다.
[도형정렬과 텍스트요소 정렬]
도형정렬>
-margin 속성으로 정렬
-좌측정력 margin-right:auto;
-우측정렬 margin-left:auto;
- 중앙정렬 margin-left: auto; margin-right:auto;
* 고무줄을 양손으로 잡고 있다가 왼손을 놓으면 ,
고무줄이 오른쪽으로. 다시 잡고 있다가
오른손을 놓으면 고무줄이 왼쪽으로,
다시 잡고있다가 양손을 같이 놓으면
고무줄이 중앙으로 가는 것처럼
도형 정렬도같게 생각하면 된다,
[텍스트 속성 ]
-적용한 태그에 커스텀 되지 않고 적용한 태그 바로 밑 태그부터 시작해서 가장 아래쪽에 있는 후손 태그까지 싹 다 적용
-텍스트 속성을 사용할때는 텍스트요소를 감싸고 있는 바로 위 부모태그에 사용하는 것이 가장 안전하다,
나중에 익숙해지면 전체 상위태그에 적용해도 된다,
-텍스트 속성
-글자 크기.글자 색상, 행간 자간. 텍스트 정렬
폰트
-----
.btn{
color:#fff;
padding-left:20px;
padding-right:20px;
padding-top:40px;
/* 너비높이를 사용 할 수 있고 padding-top 을 적용할 수 있는 한줄에 같이 배치하는 속성값 flex이전에 레이아웃을 구성 하던 값, 지금은 잘 사용 x */
display:inlne-block;