본문 바로가기

IT218

[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.
[css] img 하단에 생기는 알 수 없는 빈 공간 샘플코드에 대한 결과를 확인하면 img 하단에 살짝 여백이 생기는걸 확인 할 수 있다. .wrapper { border: 1px solid black; } img { width: 200px; height: 200px; } 이유는 img 태그는 magin, border, padding 기본적으로 잡혀져 있지 않지만, 인라인 요소이기에 텍스트와 같이 인라인 요소의 baseline 기준으로 배치되기 때문이다. 영어의 문자 특성 때문에 baseline 아래 decent height이라는 공간이 필요함 apple banana cherry .wrapper { border: 1px solid black; } img { width: 200px; height: 200px; } span { background-color:.. 2024. 4. 19.

티스토리툴바