본문 바로가기

IT219

[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.
[css] display block 한줄에 하나 inline 내부 내용의 크기 만큼 부피 차지 (width, height 조절할 수 없음) 마진은 좌우만 설정 가능하다. inline은 line-height로 문자 상하위를 결정하기 때문이다. padding은 잘 적용되지만 top은 예외가 발생한다. line-height까지 적용을 못시켜 안의 내용물이 padding값을 적절하게 설정을 안한것 처럼 보인다 border도 padding과 마찬가지 img는 inline이지만 inline-block으로 취급 padding 예 apple banana cherry .wrapper { border: 1px solid black; text-align: center; padding: 60px; margin: 20px; background-colo.. 2024. 4. 19.
[css] 텍스트 요소 가로, 세로 가운데 정렬 방법 1. line-height를 부모크기 만큼 설정반응형 웹일 경우 한줄 짜리가 두줄이 될 때 이상하게 변경된다.이미지로 할때는 baseline으로 되어 있어서 살짝 위쪽으로 올라와 있다. apple banana cherry.wrapper { border: 1px solid black; height: 100px; text-align: center; line-height: 100px;}   방법2. 상위 요소에 padding을 줌으로써 가능height 를 줄 순 없지만 padding 으로 상하 여백을 균일하게 설정함으로써 문자열이 가운데에 정렬하게 된다.em으로 설정한 이유는 해당 요소의 폰트사이즈에 비례해서 증가하기 때문에 유지보수에 편하다  apple banana cherry.wrapper.. 2024. 4. 19.
[css] negative margin 박스 안에 있는 요소를 밖으로 넘치게 보여주고 싶을 때 많이 사용한다.예) 카드가 겹치게 만들고 싶을 때 현실세계는 없는것이기 때문에 편법이라고 생각하는데 그렇지 않다. 웹표준이기에 호환성에 문제 없다.    https://www.youtube.com/watch?v=OVaKTdFe5Bk 2024. 4. 19.

티스토리툴바