카테고리 없음

CSS 기초

codi-3 2024. 7. 19. 10:02

CSS란?

CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 디자인이나 레이아웃을 정의하는 데 사용되는 스타일 시트 언어입니다. HTML이 웹 페이지의 구조를 정의하는 데 사용되는 것과는 달리, CSS는 텍스트의 색상, 글꼴, 여백, 배경 이미지 등과 같은 시각적 표현을 다루는 데 주로 쓰인다.

 

CSS는 html 코드 부분중 <head>…..</head> 안에 <style>…..</style> 작성한다.

<head>
	<style>
        	.mytitle {
            	width: 300px;
            	height: 200px;

            	color: white;
            	text-align: center;

            	padding-top: 30px;
            	border-radius: 8px;

            	background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            	background-position: center;
            	background-size: cover;
        	}
    	</style>
    </head>

 

.Class이름으로 CSS를 적용할 부분을 정의하고 {중괄호} 안에 적용할 스타일을 정의하게 된다.

 

padding : 요소의 내부여백 즉 테두리 (border) 와 실제 내용(content)의 사이의 공간을 지정하는 데 사용된다. 픽셀(px), 백분율(%), em 단위 등을 사용하여 값을 지정할 수 있다

 

여백을 지정하는 방향에 따라 위쪽(top), 오른쪽(right), 아래쪽(bottom), 왼쪽(left)을 나타낸다.

selector {
    padding: top right bottom left;
}

 

border-radius : 속성은 요소의 테두리(border)의 모서리를 둥글게 만드는 데 사용된다 padding과 같이 픽셀(px)단위를 사용하여 값을 지정해 준다.