2021-06-07 ( HTML/CSS )

오늘 진행한 일정

---

- 15:00 ~ 16:30 [ PHP 도메인 연결 ]
- 16:30 ~ 19:30 [ HTML/CSS 복습 ]
- 19:30 ~ 20:00 [ 위키, 블로그 정리 ]

 

 

 

 

HTML/CSS

---

- width: calc(100% / 3);

- 너비(width)를 정해주지 않으면 자동적으로 반응형 상태가 되고 정해주면 반응형 상태가 풀린다.

- display: block 요소를 가운데 정렬하려면 margin-left: auto; / margin-right: auto; 를 주면 된다. 
  
- 개발자 도구 : ctrl + shift + c = 레이아웃에 해당되는 HTML 코드를 볼 수 있다.

- li 안에 img를 넣었을 때, li의 line-height로 인해 여백이 발생하는데, 없애기 위해서 li에 line-height: 0;을 주는 방법이 있고, img에 display: block을 주는 방법이 있는데 후자가 더 많이 쓰인다.

- margin의 외부 여백을 통해 이미지 등 어떤 요소 사이에 공간을 줄 때, 왼쪽이나 오른쪽으로 치우치지 않게 하려면,

/* 4의 배수가 아닌 li는 적용하지 않는다. */

.work-list-box > ul > li:not(:nth-child(4n)) {
width: calc(25% - 20px);
margin-right: 20px;
} 

/* 오른쪽에 20px의 margin을 준만큼 width를 나눠줄 때, 20px을 빼준다. */

 

- 요소 사이에 padding을 줄 때, div로 한번 더 감싸서 이 div에 padding을 넣어주는 것이 관례.

- overflow: hidden; 자식이 넘치지 않도록 사용해줄 수 있다.

- tramsform: scale(1.5); 주변에 영향을 주지 않고 크기가 1.5배 커진다.

- padding이 이상하게 적용되면 display: block; 적용해보기.

  (상하/좌우 또는 아예 안 먹는 현상 등등)

 

내일 할 일

---

- HTML/CSS
  - 3단 메뉴, 로고, 이미지 배치 반복 학습