반응형 개발/CSS34 li 태그에서 들여쓰기 하는 법 li 태그에서 들여쓰기 하는 법 li 태그는 list의 약자로, 목록을 만들때 사용한다. li태그는 단독으로 쓰이지 않으며 항상 ul태그 혹은 ol태그 내부에 들어간다. li 태그는 단순히 리스트 나열 뿐 아니라 메뉴등을 만들때도 사용한다. 보통 li태그를 사용하면 다음과 같이 렌더링된다. 목록1 목록2 목록1 목록2 목록3 목록3-1 목록3-2 출력결과 ul태그 내부의 li태그에는 보시다시피 마커가 찍히는데, 마커를 원하지 않는 경우에는 css로 어떻게 설정해야 할까. list-style-position : 목록의 마커 위치를 정한다. li{ list-style-position : inside /* list-style-position : outside : 기본값 */ } text-indent : 시작부.. 2022. 2. 19. 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. 이전 1 ··· 3 4 5 6 7 8 9 다음 반응형
