https://codepen.io/EONJENOG/pen/wvLgwjP
클래스 선택자 그룹화
...
codepen.io
*** Test
- 공통클래스, 개별클래스 구분 가능한 지
[padding과 margin]
- padding
ㄴ 태그선을 기준으로 안쪽으로 들어오는 여백
ㄴ 태그 너비 높이값에 포함
*부모와 자식 관계에서 활용
- margin
ㄴ 태그선을 기준으로 바깥으로 들어오는 여백
ㄴ 태그 너비 높이값에 포함되지 않음
*형제관계에서 활용
- gap
ㄴ flex에서 사용하는 여백값
ㄴ 요소와 요소 사이에 들어가는 값
ㄴ 왼쪽 오른쪽 구분해서 넣을 수 없고 요소 사이에 한번에 들어감
*형제관계에서 활용
https://codepen.io/EONJENOG/pen/WNqReBg
padding 과 margin
...
codepen.io
[inline과 padding 관계]
- inline요소는 padding-top을 적용했을 때 위치가 고정된 상태로 적용된다. (정상 작동 X)
ㄴ (해결방법) 다른 display 속성값으로 바꿔준다.
- 한줄에 같이 inline-block
- 한줄에 하나씩 block, flex
[도형정렬과 텍스트요소정렬]
도형정렬)
- margin속성을 사용하여 정렬한다.
- 좌측정렬 margin-right: auto;
- 우측정렬 margin-left: auto;
- 중앙정렬 margin-right: auto; margin-left: auto;
*고문줄을 양손으로 잡고있다가 왼손을 놓으면 고무줄이 오른쪽으로, 다시 잡고있다가 오른손을 놓으면 고무줄이 왼쪽으로, 다시 잡고있다가 양손을 같이 놓으면 고무줄이 중앙으로 가는 것처럼 도형 정렬도 같게 생각하면 된다.
텍스트요소정렬)
- text-align속성을 사용하여 정렬한다.
[브라우저에서 도형취급]
- block
- flex
[브라우저에서 텍스트요소 취급]
- text
- inline
- inline-block
https://codepen.io/EONJENOG/pen/VwJPwbM
도형요소정렬
...
codepen.io
https://codepen.io/EONJENOG/pen/QWXdWQX
텍스트요소정렬
...
codepen.io
[정렬 공통 특징]
- 뚱냥이와 홀냥이처럼 크기가 같으면 정렬할 수 없다. 뚱냥이는 박스에 끼어서 움직이지 못하고 홀냥이는 박스가 더 크니까 움직일 수 있는 것처럼 생각하면 쉽다.
- 특정 정렬 속성을 사용했을 때 정렬되지 않는다면 상위태그와 하위태그 크기가 같은지 체크하면 스스로 문제를 해결할 수 있다.
[텍스트속성]
- 적용한 태그에 커스텀되지 않고 적용한 태그 바로 밑 태그부터 시작해서 가장 아래쪽에 있는 후손 태그까지 싹 다 적용된다.
- 텍스트 속성을 사용할 때는 텍스트 요소를 감싸고 있는 바로 위 부모태그에 사용하는 것이 가장 안전하다. 나중에 익숙해지면 전체 상위태그에 적용해도 된다.
- 텍스트속성
ㄴ 글자 크기, 글자 색상, 행간, 자간, 텍스트 정렬,폰트
https://codepen.io/EONJENOG/pen/zYVNYyN
앵커태그(a태그)
...
codepen.io
***시험