2021년 8월 31일
1) 요소 세로 가운데 정렬할때 부모 요소의 display를 flex로 선언하고 align-items: center; 를 추가하면 된다.
2) 요소 세로 가운데 정렬할때 부모 요소의 display를 flex로 선언하고 justify-content: center; 를 추가하면 된다.
3) width요소의 퍼센티지 비율을 줄때 부모 요소의 기준으로 해당 퍼센티지만큼 계산된다.
2021년 9월 1일
1) line-height 영향 받는 것: 인라인요소, 인라인블록 요소(블록요소는 line-height로 수직 정렬할 수 없음)
2) 정석적인 세로 정렬 방법:① line-height를 이용한 방법 ② 부모 요소의 padding을 위 아래로 주는 방법
3) !important는 최대한 안써주는게 좋음
4) 부모가 flex 컨테이너인 상황에서 자식한테 margin-[direction]: auto를 주게되면 남은 공간을 margin이 차지하게 된다.
5) css 파일 작성 시 속성 순서를 맞춰주는게 좋다.(배치 및 위치 → 현재 요소의 속성)
2021년 9월 2일
1) 요소 수평 정렬하는 쉬운 방법
- 자식 요소에 margin: 0 auto;를 설정하면 좌우 마진이 동일하게 설정되어 수평 정렬된다.
2) dom엘리먼트의 class 또는 id 지정시 다른 페이지를 포함하여 중복되어 사용할 수 있는 속성의 경우 class로 선언하고 한 번만 사용될 경우 id로 지정한다.
2021년 9월 3일
1) vertical-align: middle
- 인라인 요소들끼리 수직 정렬시 (컨테이너에 주는 속성이 아닌 자식 요소에 주는 속성)
- 테이블 셀일때 수직 정렬시
2) 이미지를 볼 때 확대해서 자세하게 볼 것
- 주어진 이미지 파일을 자세히 확대해서 들여다봄으로써 box-shadow가 있는지, 그라데이션이 적용되었는지를 유의할 것
3) 왠만하면 부모 요소, 자식 요소 모두 일일이 px로 크기를 지정하지 말 것! (무조건 must는 아님!)
- 왜 그래야 하나? -> 변화에 유연한 개발을 하기 위해서!
- 부모요소를 100px로 지정하고 자식 요소 2개를 50px + 50px로 일일이 지정할 수 있지만 만약 자식 요소가 하나 더 추가 된다면 부모요소의 크기도 수정해줘야 될 것이다! 이는 유지보수적인 측면에서 좋지 않다!
- 따라서 자식 요소 2개를 50px + 50px로 지정해 놓고 부모요소는 자연스레 100px이 되는 흐름으로 적용해야 한다.
- 하지만 무조건은 아니다. 스크롤바와 같은 예외사항은 존재한다!
4) 윈도우의 기본 이미지 뷰어는 실제 이미지를 확대해서 자세하게 보기엔 무리가 있다. 따라서 꿀뷰의 필터 적용 안함 옵션을 적용하여 확대 후 참고하는 것이 좋다.
2021년 9월 17일
1) css box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.
1
box-sizing: content-box | border-box | initial | inherit
더 자세한 내용은 여기를 참고하자.
2) Css 그룹핑 Css 프로퍼티를 일정한 규칙을 가지고 정의하는게 좋다.
일반적으로 중요한 것부터 덜 중요한것의 순서로 나열하는게 보편적으로 사용된다. 예를 들어, 배치 -> 위치 -> 현재 요소의 속성(block/inline) …
1
2
3
4
5
6
7
8
9
10
11
12
13
display
position
top
left
width
height
margin-left
padding-left
background-color