반응형 개발/CSS33 css 이미지 가운데 놓는 법 1. flex이용 justify-content:center, align-items:center이용 2. margin 이용 컨테이너에 display:flex를 설정하고 이미지에 margin을 auto 로 준다. 2022. 2. 19. float : 인라인요소가 자신을 감싸는 컨테이너의 좌우측에 붙는다. 인라인요소란 한줄이 아닌, 자신 컨텐츠만큼의 부피만 차지하는 요소를 뜻한다. (span태그) float 속성은 인라인요소에 적용되는데, 자신을 감싸는 컨테이너의 좌우측에 붙도록 한다. .white-wrapper { ..(생략).. } .white-wrapper span { float: left; /* float:right; */ } 박지성 SBS에서 월드컵보세요! 아주 재미있는 월드컵이었습니다. 김영권과 손흥민의 골로 독일을 이겼습니다. 하지만 16강 진출에는 실패했습니다. 우리 태극전사들 모두 자랑스럽습니다. 정말 통쾌했습니다. 2022. 2. 19. flex-wrap : 강제로 한줄배치 flex-wrap: nowrap 적용 .white-wrapper { border: purple 1px solid; width: 100%; height: 300px; display: flex; flex-wrap: nowrap; } 박지성 SBS에서 월드컵보세요! 아주 재미있는 월드컵이었습니다. 김영권과 손흥민의 골로 독일을 이겼습니다. 하지만 16강 진출에는 실패했습니다. 우리 태극전사들 모두 자랑스럽습니다. 정말 통쾌했습니다. display:flex, flex-direction:row(기본값)에 따라 가로배치된다. flex-wrap : wrap 적용 .white-wrapper { ..(생략).. display: flex; flex-wrap: wrap; } 박지성 SBS에서 월드컵보세요! 아주 재미있는 월.. 2022. 2. 19. text-spacing : text-indent, letter-spacing, line-height, word-spacing, white-space text-indent letter-spacing line-height word-spacing white-space text-indent : 들여쓰기 아주 재미있는 월드컵이었습니다. 김영권과 손흥민의 골로 독일을 이겼습니다. 하지만 16강 진출에는 실패했습니다. 우리 태극전사들 모두 자랑스럽습니다. 정말 통쾌했습니다. .paragraph-wrapper .paragraph { text-indent: 20px; // 첫줄 들여쓰기 20px text-align-last: center; // 마지막 줄은 가운데 정렬 background: #49ca69; } letter-spacing : 글자 사이의 공백 .paragraph-wrapper .paragraph { letter-spacing: 30px; ..(생략)... 2022. 2. 15. 이전 1 ··· 3 4 5 6 7 8 9 다음 반응형
