CSS / Tutorial / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다.
text-align: center;
요소의 가로 가운데 정렬은 margin 속성을 이용합니다.
margin-left: auto; margin-right: auto;
그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요?
방법 1 - padding 속성 이용하기
바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
font-family: Consolas, monospace;
}
.jb-wrap {
border: 1px solid #444444;
padding: 100px 0px;
}
h1 {
padding: 20px 0px;
background-color: #444444;
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="jb-wrap">
<h1>Lorem Ipsum Dolor</h1>
</div>
</body>
</html>
방법 2 - margin 속성 이용하기
안쪽 요소에 margin 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
font-family: Consolas, monospace;
}
.jb-wrap {
border: 1px solid #444444;
}
h1 {
margin: 100px 0px;
padding: 20px 0px;
background-color: #444444;
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="jb-wrap">
<h1>Lorem Ipsum Dolor</h1>
</div>
</body>
</html>
방법 3 - 표(table)처럼 만들기
표처럼 만들고 세로 가운데 정렬을 가운데로 할 수 있습니다. 높이를 정하기 쉽다는 장점이 있으나 코드가 길어진다는 단점이 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
font-family: Consolas, monospace;
}
.jb-table {
display: table;
width: 100%;
height: 280px;
border: 1px solid #444444;
}
.jb-table-row {
display: table-row;
}
.jb-table-cell {
display: table-cell;
vertical-align: middle;
}
h1 {
padding: 20px 0px;
background-color: #444444;
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="jb-table">
<div class="jb-table-row">
<div class="jb-table-cell">
<h1>Lorem Ipsum Dolor</h1>
</div>
</div>
</div>
</body>
</html>
방법 4 - Flex 이용하기
CSS3의 flex를 이용하면 쉽게 세로 가운데 정렬을 구현할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
font-family: Consolas, monospace;
}
.jb-wrap {
height: 280px;
display: flex;
align-items: center;
border: 1px solid #444444;
}
h1 {
width: 100%;
padding: 20px 0px;
background-color: #444444;
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="jb-wrap">
<h1>Lorem Ipsum Dolor</h1>
</div>
</body>
</html>
CSS / Tutorial / CSS를 HTML에 적용시키는 방법
HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣습니다. Internal Style Sheet HTML 문서 안의 과 안에 CSS 코드를 넣습니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결합니다.
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS / Tutorial / 선택자(Selector)
CSS에서 선택자(CSS Selector)는 HTML 문서의 요소를 선택하고 스타일을 적용할 때 사용되는 구문입니다. 선택자는 특정 요소를 대상으로 스타일을 지정할 수 있도록 돕는 중요한 역할을 하며, 다양한 방법으로 요소를 선택할 수 있습니다.
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.