본문 바로가기

전체 글376

[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.
[css] 여러 div를 몽땅 가로 가운데 정렬 아래의 샘플 코드는 block 요소 div를 6개를 노출한다. 각 요소마다 한줄씩 자리 잡고 있다. 1 2 3 4 5 6 .dot { width: 40px; height: 40px; background-color: orangered; color: white; text-align:center; border: 1px solid gray; line-height: 40px; margin: 0 auto; } pagination처럼 개수와 상관없이 원하는 div만큼 가운데 정렬을 시키고 싶으면, dot class에 display: inline-block으로 설정하고 wrapper를 만들어 해당 클래스에 text-align: center를 추가하면 된다. dot class에 inline-block 속성을 주어 한줄씩.. 2024. 4. 19.
[css] 가로 가운데 정렬 개발자 콘솔에서 parent margin 영역을 확인해보면, 마진영역이 브라우저 꽉차게 나오는데 이 의미는 auto값으로 설정할 수 있는 마진의 최대값을 의미한다. parent가 블럭요소이기 때문에 한줄을 다 빌렸다. 밑의 영역은 parent가 빌린 영역이 아니다. 마진을 auto값을 주면 빌린 영역을 사용 할 수 있다. margin-left: auto로 설정하면, margin 최대값을 사용하기 때문에 컨텐츠가 오른쪽으로 정렬된다. 그래서 양쪽 모두 margin-left, right auto로 주면 가운데로 정렬됨 margin-top, bottom auto로 주면 상하까지 가운데로 정렬될거라 예상할 수 있지만 위에 언급했듯이 빌린영역이 없기 때문에 적용될 수 없다. wow .parents { width:.. 2024. 4. 19.
[css] height: 100% 의미 아무것도 보이지 않는다. 그 이유는 div 안에 아무것도 없으면 배경을 깔 공간 자체가 없었기 때문 .cover { background-image: url(..) } hello world 문자 크기 만큼 배경이 보인다. width는 지정이 안되어 있으므로 auto 값이 기본으로 되어있음 (height도 마찬가지) hello world .cover { background-image: url(..) } width: auto 요소의 부모 크기 기준으로 가득찬다. body의 width 만큼 cover width가 결정됨. 그래서 한줄 전체가 보임 height: auto 요소의 자식 기준으로 자동 조절된다. 꽉 차는걸 보고싶다고 height: 100% 을 설정해본다면, 안된다. wow .cover { backgr.. 2024. 4. 19.

티스토리툴바