-
2020년 01월 08일
CSS Flex 세로 정렬
HTML에서 세로 정렬은 다들 까다로워하는 부분입니다. vertical-align: middle;으로 알고 사용하지만, 특정한 환경(Table 등)이 아니라면 세로 정렬이 되지 않는 문제 때문입니다. 이번 글에서는 CSS flex와 align-items를 사용하여 쉽게 세로정렬하는 방법을 알아봅니다. 세로/가로 가운데 정렬 <div class="login-page"> <div class="center"> <h3>Login</h3> <form> <input /> <input /> <input /> </form> </div> </div> 위 예제에서 로그인 페이지 내에 내용을 가로/세로 정렬을 진행합니다. .login-page { display: flex; // flex 사용 height: 100vh; // 세로 높이를 화면 크기에 맞춤 align-items: center; // 세로 정렬 justify-content: center; // 가운데 정렬( 아래서 추가 설명 ) margin: 0 auto; // 가운데 정렬 } justify-content 속성은 flex-direction 속성의 진행 축 정렬에 영향을 받는데, flex-direction: row | row-reverse 인 경우 x축 정렬을 제어합니다. flex-direction: column | column-reverse 인 경우 y축 정렬을 제어합니다.
-
2019년 12월 12일
list-style에 bold 처리하기
ol, li 태그를 사용하면 옆에 숫자가 기본적으로 나타나는데, 해당 숫자에 bold 처리하는 방법입니다. 단순 font-weight 처리 방법 기본적으로 list-style에 bold 처리를 하려면 ol 태그에 적용하면 됩니다. 이후 li 내 태그를 생성하여 normal을 적용합니다. <ol> <li> <p>test</p> </li> <li> <p>test2</p> </li> <li>not work</li> </ol> <style> ol { font-weight: bold; } ol li p { font-weight: normal; } </style> 위 방법의 문제점은 마지막 li처럼 태그 적용이 안되어있으면 같이 bold 처리가 됩니다. count-increment count-increment 방법을 사용하여 list-style을 사용하지 않고 카운터를 작성할 수 있습니다. <ol> <li> <p>test</p> </li> <li> <p>test2</p> </li> <li>not work</li> </ol> <style> ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -2em; list-style-type: none; counter-increment: item; } ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; text-align: right; content: counter(item) "."; } </style> counter를 사용하여 li:before에 숫자를 직접 작성하는 방법입니다. 단점으로는 list-style처럼 다양한 스타일이...