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 / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.
링크는 a 태그로 만듭니다. 따라서 링크는 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다.
CSS / Tutorial / 선택자(Selector)
CSS에서 선택자(CSS Selector)는 HTML 문서의 요소를 선택하고 스타일을 적용할 때 사용되는 구문입니다. 선택자는 특정 요소를 대상으로 스타일을 지정할 수 있도록 돕는 중요한 역할을 하며, 다양한 방법으로 요소를 선택할 수 있습니다.
표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다.
CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.