CSS 강좌 / ul, ol 가운데 정렬하는 방법
목록의 내용만 가운데 정렬하기
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다.
ul {
text-align: center;
}
목록 요소 자체를 가운데 정렬하기
목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다.
ul {
width: 300px;
margin-left: auto;
margin-right: auto;
}
만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
ul {
display: table;
margin-left: auto;
margin-right: auto;
}
목록 요소 자체가 가운데에 위치하는 것으로, 문단 정렬은 변하지 않습니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
font-family: Consolas;
}
h1 {
font-size: 16px;
}
ul {
border: 1px solid #bcbcbc;
}
ul.a {
text-align: center;
}
ul.b {
width: 300px;
margin-left: auto;
margin-right: auto;
}
ul.c {
display: table;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>text-align: center</h1>
<ul class="a">
<li>Lorem Ipsum</li>
<li>Dolor Amet</li>
</ul>
<h1>width: 300px; margin-left: auto; margin-right: auto;</h1>
<ul class="b">
<li>Lorem Ipsum</li>
<li>Dolor Amet</li>
</ul>
<h1>display: table; margin-left: auto; margin-right: auto;</h1>
<ul class="c">
<li>Lorem Ipsum</li>
<li>Dolor Amet</li>
</ul>
</body>
</html>
CSS 강좌 / ::before와 ::after로 가상 요소 꾸미기
::before와 ::after로 HTML을 늘리지 않고 장식용 점과 선을 추가합니다. content·display·currentColor의 역할, 실제 적용 전후 화면, 전체 코드와 가상 요소가 안 보일 때의 점검 방법을 설명합니다.
CSS 강좌 / CSS란 무엇이고 HTML과 어떻게 다를까?
HTML과 CSS의 역할을 구분하고, 같은 작은 정원 문서에 색상·배경·여백을 적용합니다. 실행 가능한 예제와 세 가지 변형 실습으로 스타일이 바뀌는 범위를 확인할 수 있습니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
인라인·내부·외부 CSS의 작성 위치를 비교하고, 두 HTML 페이지가 하나의 스타일시트를 공유하도록 구성합니다. 폴더 위치에 따른 경로와 CSS가 적용되지 않을 때의 확인 순서도 설명합니다.
CSS 강좌 / 큰 스타일시트 정리하기: 파일 구성·중첩·레이어
역할별 CSS 파일 연결과 네이티브 중첩, 캐스케이드 레이어를 실행 가능한 작은 프로젝트로 익힙니다. 선택자 충돌을 비교하고 원래 설정으로 복원하는 실습을 제공합니다.
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.
CSS 강좌 / Flexbox 정렬·간격·줄바꿈·크기 조절하기
Flexbox의 아이템 정렬과 여러 줄 정렬을 구분하고, gap·줄바꿈·grow·shrink·basis를 비교 예제로 익힙니다. 긴 문자열이 넘치는 원인과 크기·줄바꿈의 해결 방법도 다룹니다.
CSS 강좌 / transform과 transition으로 상태 변화 표현하기
transform의 이동·회전·확대와 transition의 시간·곡선·지연을 비교합니다. 문서 흐름, 키보드 초점과 움직임 감소 설정을 전체 예제로 확인할 수 있습니다.
CSS의 선택자·선언·구분 기호·주석을 예제로 설명합니다. 잘못된 속성값과 세미콜론 누락을 비교하고, 실행 가능한 예제와 오류 수정 실습으로 브라우저가 적용한 결과를 확인합니다.
CSS 강좌 / 컨테이너 쿼리로 구성 요소 너비에 맞춰 꾸미기
같은 카드가 본문과 사이드바의 폭에 맞춰 배치를 바꾸도록 컨테이너 쿼리를 적용합니다. 중첩 컨테이너와 이름 선택, 조건이 적용되지 않는 원인도 살펴봅니다.