IT/web35 [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. [css] div 가로세로 가운데 정렬 block 요소를 가로세로 가운데 정렬하기 위해 absolute로 설정하고 top, left, margin-top, margin-left를 모두 설정했다. 다만 width 또는 height가 변경되면 margin 값도 변경해야하니 좋지 못한 코드다. Hello World div { width: 100px; height: 100px; border: 1px solid black; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } 그래서 top, left, bttom, right 값을 0으로 줌으로써 div의 가용범위를 최대한 늘려준다. (width, height 값을 주지 않으면 컨텐츠는 stretch되어 꽉차게.. 2024. 4. 19. 이전 1 2 3 4 5 6 다음
