체크박스(Checkbox)1. 체크박스(Checkbox)의 정의 체크박스는 사각형 모양의 상자로 어떤 항목의 체크 여부를 표시하는 요소입니다.  2. 유형3. 구성 옵션
4. 사용 규칙
5. 상황에 따른 상태6. 배치체크박스는 필요한 모든 곳에서 사용할 수 있으며, 콘텐츠 영역에서 그리드 영역에 맞춰 배치할 수 있습니다. 스타일크기체크박스는 영역에 따라 2가지 크기로 제공되며, 간격과 크기는 아래 규칙을 참고합니다.
컬러화이트 테마상태별 컬러는 리튬 디자인 가이드 컬러 규칙에 맞추어져 있으며, 아래 구성을 참고하여 활용합니다. 다크 테마상태별 컬러는 리튬 디자인 가이드 컬러 규칙에 맞추어져 있으며, 아래 구성을 참고하여 활용합니다. 사용 예시
체크박스(Checkbox)
가로 중앙 정렬 하는 방법(세로정렬은 다른 포스팅에 있어요! ) 세로정렬포스팅 -> div 세로 가운데 정렬하는 방법 요소를 가로 정렬하는 방법은 몇가지가 있다. 그런데 css초창기 어떤 방법을 적용해야하는지 또 왜 적용이 되지 않느지에 대해 혼란스러웠던 기억이 있다. 그래서 가운데 정렬하는 방법과 어떤 상황에 쓰면 좋은지 적어보려고 한다. 01. text-align: center 가장 기본적이고 쉬운 방법입니다. - text-align은 블럭요소 안에 있는 인라인 요소에게 적용됩니다. 인라인 요소는 다음이 있어요. - b, big, i, small, tt - abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var - a, bdo, br, img, map, object, q, script, span, sub, sup - button, input, label, select, textarea 인라인요소가 아닌 요소를 text-align을 적용하기 위해 block요소를 inline-block요소로 바꿔주기도 합니다. ex) html
css
가운데 정렬하고 싶은 div는 블록요소에서 인라인블록요소로 바꿔주고, 부모에게 text-aglin:center를 주면 가운데 정렬이 됩니다. 02. magrin: auto 가장 많이 쓰는 방법 중 하나입니다. - 가로 사이즈가 지정되어 있고, block요소에게 적용가능합니다. ( 세로는 적용되지 않는다. ) 가로 사이즈를 지정되어 있나면 나머지 여백을 오른쪽 왼쪽 마진이 반반씩 채워주며 가운데 정렬이 됩니다.. css
03. position:absolute - 위에 상황들이 적용되지 않을때 많이 사용한다. position : absolute를 주고, left:50%주어 가운데로 밀어냅니다. 그리면 요소의 왼쪽을 기준으로 가운정렬이 된다. 이때 요소의 가로의 반값 만큼 마진을 이용해 왼쪽으로 보내면 가운데 정렬이 됩니다. 다시 설명하면, 가로가 100px인 박스에게 - position:absolute; 주고 - left:50%를 주어 박스의 왼쪽을 기준으로 가운데 정렬을 맞춥니다.
그리고 margin-left를 이용해서 박스 가로의 반만 왼쪽으로 다시 가지고 옵니다. box의 width의 반은 50px입니다. 그래서 margin-left:-50%를 주면 가운데 정렬이 됩니다. 세로정렬포스팅 -> div 세로 가운데 정렬하는 방법 |
체크박스 가로 정렬 - chekeubagseu galo jeonglyeol
관련 게시물
저작권 © 2024 ko.ketiadaan Inc.
