본문 바로가기

IT217

[css] :nth-child :nth-child 해당 가상 클래스를 선언한 부모의 기준으로 자식을 선별하기에 형제간에 어떠한 요소가 추가되면 망한다. 국가 리스트에서 짝수 번째 있는 나라에만 배경색을 추가하려 했지만, div요소가 상위체 추가되면서 의도와 다르게 코딩 되었다. :nth-of-type 그래서 다안으로 :nth-of-type이다.이건 요소 tag 기준에 따라 설정되지만 여전히 헛점은 있다 of 이 문법을 사용하면 더 복잡한 코딩을 할 수 있다. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child :nth-child() - CSS: Cascading Style Sheets | MDN The :nth-child() CSS pseudo-class matches eleme.. 2024. 4. 22.
[css] body에 배경을 변경했을 때 html, body 요소에 배경색을 추가했다. 예상대로 동작한다. html은 root element이므로 뷰포트 전체에 적용하고 body는 자식 요소의 컨텐트 크기에 따른다. html 스타일을 지웠다. body의 배경이 뷰포트 전체에 적용되었다. 이상하지 않은가? 기본값은 height: auto이기에 자식 요소의 컨텐트 크기에 따라 변경되어야 하는데? 배경색 대신 이미지를 추가할 때도 마찬가지다. 결론 css 만드는 개발자 입장에서 고려해본다면 이렇게 예외를 추가할 수 밖에 없는 상황이 있지 않았나 싶다. body에서도 뷰포트에 적용하지 않으면 html까지 올라가야하는데 그렇게 까지 해야하나 싶다. 대부분 html 요소에 스타일을 추가하진 않는다. body도 잘 안건드는 판에.. 이미지를 뷰포트 중심으로.. 2024. 4. 22.
[css] 마진병합 아래의 예제 샘플을 보면, section 사이에 마진이 40px이여야하는데 20px로 되어 있다. 마진 병합 때문이다. 마진 병합이 되려면 아래 두조건이 성립되어야한다. 인접해 있는 형제 block 요소끼리만 일어난다. 빈 블록: 테두리, 안쪽 여백, 인라인 콘텐츠, height, min-height, max-height가 없으면 블록의 margin-top과 margin-bottom이 서로 상쇄됩니다. 상하단만 해당된다. 여백 상쇄 정복 - CSS: Cascading Style Sheets | MDN 여러 블록의 위쪽 및 아래쪽 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 여백 상쇄라고 부릅니다. 단, 플로팅 요소와 절대 위 develo.. 2024. 4. 21.
[css] width, height 알 수 없는 div, 가로 세로 모두 가운데 정렬하기 transform을 이용해서 해결 가능합니다. translate % 설정은 자기 자신의 기준으로 계산합니다. . 우리는 height값을 모르지만, transfrom은 알고 있다. HTML 삽입 미리보기할 수 없는 소스 https://www.youtube.com/watch?v=78-X1JGvCZU 2024. 4. 21.
[css] em, rem em 같은 요소내의 폰트 크기에 비례 폰트 크기가 em으로 설정되어 있으면 부모로 부터 상속 받음 p, h tag들도 부모 폰트 크기를 받아 동적으로 크기 변환됨 실전 사용 예) 제곱 표현 문단 중 작은 문자 크기 조절 letter-spacing 설정 시에도 em으로 설정 버튼 내에 문자가 있을 때 버튼과 문자 사이에 여백 조정 시 / 버튼 크기가 여러게 있을 때 btn.small btn.medium btn.large 단점 복잡한 DOM 구조인 경우 어떤 값에 따라 적용되는지 헷갈릴 수도 있다. html 16px body 0.5em: 8px div 0.5em: 4px p 0.5em: 2px a 0.5em: 1px span 0.1em: 0.1px rem root element (html tag) 폰트 크기.. 2024. 4. 21.
[css] line-height 개념 문자간 줄 사이에 간격을 설정 block 요소에 설정하면 자식 inline 요소에 최소 줄 높이가 결정된다. 팁 픽셀단위로 설정하면 나중에 폰트 크기가 변경될 경우 유지보수하기 번거로움 보통 상수로 표현 ex) 1.5 예제) 1.5와 1.5em의 차이 em은 설정한 요소의 폰트 크기에 따라 조절 되므로 자식 요소에게 상속될 수 있음으로 단위 없이 작성하는게 바람직 하다 HTML 삽입 미리보기할 수 없는 소스 line-height를 1로 설정함으로써 각 요소의 폰트 크기만큼 설정하게 됨 .parent { font-size: 20px; line-height: 1; } https://www.youtube.com/watch?v=SDa7f8os2WA 2024. 4. 21.

티스토리툴바