본문 바로가기

CSS/예제

 (13)
큰 화면에서 본문 영역이 좌우로 더 이상 늘어나지 않고 가운데 정렬이 되도록 하는 방법 max-width 값을 줘서 화면의 좌우 크기가 특정 width를 넘어가더라도 더 이상 커지지 않도록 설정한다. 좌우의 margin 값을 auto로 두면 여유 공간이 생겼을 때 좌우 margin이 동일하게 늘어난다. 결과적으로 가운데 정렬이 된다. .container { max-width: 800px; margin: 0 auto; }
본문 왼쪽에 그림을 추가하는 방법 - CSS float float은 코드를 복잡하게 만들기 때문에 사용을 지양해야 한다. 그러나 책에서처럼 긴 문장의 왼쪽 위 구석에 그림을 추가하려면 사용할 수밖에 없다. 이미지에 float: left;를 넣으면 다음에 오는 문장 왼쪽 위에 위치하게 된다. 가나다라 마바사 .image { width: 50px; height: 50px; background: deeppink; float: left; } 다음에 오는 엘리먼트 중 하나에 clear: both;를 넣으면 해당 엘리먼트는 float에 영향을 받지 않는다. 결과적으로 그림 아래쪽에 문자가 오게 된다. 가나다라 마바사 아자차카 타파하 .clear { clear: both; /* 또는 left */ } float 속성을 주면 부모 엘리먼트가 해당 엘리먼트를 인식하지 못하기..
이미지에 width와 height 값을 비율에 맞지 않게 넣더라도 찌그러지지 않게 하는 방법 에 width와 height 값을 동시에 넣으면 가로세로 비율이 정확히 맞지 않는 이상 이미지가 찌그러진다. 이를 해결하기 위해 CSS에 object-fit 속성을 넣으면 width와 height 조절 등으로 이미지의 크기가 달라지더라도 찌그러지지 않는다. object-fit: cover;로 할 경우 이미지 박스에 맞게 이미지 내용이 꽉 찬다. 비율도 유지 된다. 대신 가로 양쪽 끝이나 세로 양쪽 끝이 잘린다. 원본 그냥 조절했을 때 object-fit: cover;를 설정했을 때 .fit { object-fit: cover; }
CSS position에서 relative와 absolute의 차이 .parent { top: 50px; left: 50px; position: relative; background-color: plum; } .second { top: 50px; left: 50px; position: relative; background-color: bisque; } 자식의 position이 relative인 경우 공간을 차지하지만 .parent { top: 50px; left: 50px; position: relative; background-color: plum; } .second { top: 50px; left: 50px; position: absolute; background-color: bisque; } absolute인 경우 공간을 차지하지 않는다. absolute의 부모 중..
아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법 의 경우 width 속성을 설정해주면 이미지 비율에 따라서 height가 자동으로 설정된다. 때문에 width를 100%로 하면 부모 엘리먼트의 width에 따라 비율을 유지하면서 이미지 크기를 조절할 수 있게 된다. 그러나 은 그렇지 않다. 유튜브 영상을 불러올 때에는 을 사용하고 유튜브 영상의 크기를 반응형으로 조절하려면 다른 방법이 필요하다. 위처럼 #area로 을 감싸서 #area의 크기에 iframe 크기를 맞추는 방법이 있다. 먼저 iframe의 width와 height를 100%로 한다. #area의 padding-bottom에 % 값을 줘서 #area의 가로세로 비율을 조절한다. 유튜브 영상의 비율인 16:9로 하려면 padding-bottom에 56.25%를 넣는다. #area { pos..
박스(div)의 내용과 겹치는 박스를 만드는 방법 1111 2222 3333 .parent { background-color: plum; position: relative; } .child { background-color: pink; position: absolute; top: 10px; left: 10px; } relative 안에 absolute를 설정하면 relative인 부모를 따라서 자식이 움직이고 box로 공간을 차지 하지 않는다. absolute 속성을 빼면 다음과 같이 변한다. 참고 : https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1
엘리먼트를 배경처럼 활용하는 CSS 예제 엘리먼트를 배경처럼 활용하기 body, ul { margin: 0; padding: 0; } body { background-color: #d2d1d1; } .backGround { position: fixed; z-index: 0; height: 100vh; top: 0px; right: 0; left: 0; width: 75vw; margin: auto; background-color: white; box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.1); } .main { position: relative; z-index: 1; padding: 20px; } li { display: flex; flex-direction: row; ..
CSS 스마트폰 그라데이션 상단바 예제 Relate + h1, body, html { margin: 0; padding: 0; } span { font-size: 20px; font-weight: bold; } .header { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); background-image: linear-gradient(to right, #a274f7, #83b8f1); color: white; display: flex; align-items: flex-end; justify-content: space-between; padding: 40px 15px 10px 15px; }

티스토리툴바