CSS(Cascading Style Sheets)는 마크업 언어로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 스타일 언어이다. CSS를 사용하려면 스타일시트를 작성하고 HTML 문서에 연결해야 한다. 스타일은 규칙으로 정의되며, 규칙을 적용할 element를 지정하는 선택기와 선택한 element의 스타일을 정의하는 하나 이상의 선언이 있다.
CSS 규칙의 기본 구문은 다음과 같다.
selector {
property: value;
property: value;
...
}
HTML 문서의 <head> 섹션에 있는 <style> 태그를 사용하여 HTML 파일에 CSS를 포함할 수 있다.
<head>
<style>
/* CSS rules go here */
</style>
</head>
HTML element의 스타일 속성을 사용하여 특정 HTML element에 CSS 스타일을 적용할 수 있다.
<p style="color: blue;">This text will be blue.</p>
마진과 패딩
CSS에서 여백과 패딩은 웹 페이지의 요소 사이의 공간을 제어하는 데 사용된다.
여백은 요소 외부의 공간을 제어하는 데 사용되는 반면, 패딩은 요소 내부의 공간을 제어하는 데 사용된다.
여백 속성은 요소 주위에 공간을 추가하는 데 사용될 수 있다. 예를 들어, <div> 요소의 모든 변 주위에 10px 여백을 추가하려면 다음 CSS를 사용할 수 있다.
div {
margin: 10px;
}
또한 margin-top margin-right margin-bottom margin-left 특성을 사용하여 요소의 각 측면에 대한 여백을 개별적으로 지정할 수 있다. 예를 들어, <div> 요소의 위쪽과 아래쪽에는 10px 여백을 추가하고 왼쪽과 오른쪽에는 20px 여백을 추가하려면 다음 CSS를 사용할 수 있다:
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
마찬가지로, 패딩 속성은 요소 내부의 공간을 추가하는 데 사용될 수 있다. 예를 들어, <div> 요소의 모든 면 주위에 10px 패딩을 추가하려면 다음 CSS를 사용할 수 있다:
div {
padding: 10px;
}또한 padding-top, padding-right, padding-bottom, and padding-left properties을 사용하여 요소의 각 측면에 대한 패딩을 개별적으로 지정할 수 있다. 예를 들어, <div> 요소의 위쪽과 아래쪽에는 10px 패딩을 추가하고 왼쪽과 오른쪽에는 20px 패딩을 추가하려면 다음 CSS를 사용할 수 있다:
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}상자 크기 속성을 사용하여 요소의 크기와 요소 주변의 공간을 제어할 수 있다.
font style
p {
font-weight: bold;
font-size: 20px;
font-family: Arial, sans-serif;
}
display inline-block
CSS에서 표시 속성은 element의 레이아웃과 웹 페이지에 표시되는 방법을 제어하는 데 사용된다. 디스플레이 속성에는 여러 값이 있을 수 있으며, 그 중 하나는 inline-block이다.
표시 속성이 inline-block으로 설정되면 element는 인라인 element처럼 동작하지만(즉, 필요한 만큼의 너비만 차지하고 이후에는 새 줄을 만들지 않음) 너비와 높이가 설정될 수 있다.
예를 들어 클래스 "컨테이너"를 가진 <div> element가 있고 이를 인라인 블록 element로 표시하려고 한다고 가정하면 다음 CSS를 사용할 수 있다.
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
display: inline-block;
}
.box {
width: 30px;
height: 30px;
background-color: blue;
margin: 10px;
display: inline-block;
}
이렇게 하면 display inline-block이 있는 컨테이너 div가 생성되고 파란색 배경색, 너비와 높이가 30px, 여백이 10px인 박스 3개가 포함되며, 박스는 display inline-block이 있어 박스 폭이 컨테이너 폭보다 작기 때문에 줄바꿈없이 동일한 라인으로 표시된다.
div border css
CSS에서 보더 속성은 element 주위에 보더를 추가하는 데 사용된다. 테두리 속성은 <div> element를 포함하여 HTML element에 테두리를 추가하는 데 사용할 수 있다.
테두리 속성은 윤곽선 속성과 동일한 방식으로 element에 테두리를 추가하는 데 사용할 수 있다.
div {
border: 1px solid black;
}
댓글