[CSS] CSS의 기초

Web/CSS
2021. 4. 27.

딱딱한 HTML을 사용자가 원하는 대로 스타일을 변경시켜주는 것, 이를 CSS라고 부른다.

웹의 기본이며, 웹디자인에 관심을 갖고 있다면 필수적으로 알고 있어야 하는 사항이다.

다만, 웹디자인과 거리가 조금 멀은 서버쪽에 관심있는 사람이라면, 멀리 기피해도 되기는 하겠지만 혼자 프로젝트를 하게 되거나 혹은 타인의 HTML을 수정해야하는 경우가 종종 생기다보니 배우지 않는 것보다 좋은 편이다.

CSS 의 속성은 이와 같다.

기본

<테그 style='스타일 속성 : 속성 값'>

<p style='text-align:center;'>

CSS의 기본은 테그안에 style을 주어서 활용 할 수 있다. 이는 HTML 혹은 CSS를 제일 처음 접근하는 사람에게 매우 유용한 방법이 될 수 있다.

밑에서 소개하는 방식은 정리하기 편하다는 장점이 있지만, 관리를 못 할 경우 CSS가 괜히 꼬일 수가 있기 때문이다.

CSS 스타일 주는 기본 형식

[선택자] { 스타일 속성 : 속성 값}
p {text-align : center}

CSS를 관리를 한다면 이 방식을 선택한다.

괜히 입문자가 바로 이 방법을 선택하게 되면 피 볼 수 있으므로 연습과 실전은 별도로 생각하고 사용하길 바란다.

선택자를 지정하는 방법은 테그, id, class등이 존재한다. 상세하게 특정지을수도 있고, 중복도 가능하다.

스타일 속성 또한 여러개를 동시에 줄 수 있다.

CSS 기초 응용하기

<html>
<head>
<meta charset="UTF-8">
<title>CSS에 입문하신 것을 환영합니다.</title>
<style>
section {
width: 500px;	/* 너비 */
padding : 15px;	/* 테두리와 내용 사이의 대화 */
border : 5px solid gray;	/* 테두리 스타일 */
}
</style>
</head>
<body>

<div id="container">
	
	<!-- 사이트 소개 -->
	<section>
		<h2> Welcome Mollang Site </h2>
		<p>CSS는 HTML의 가장 기초적인 기술이다. </p>
	</section>
</div>
</body>
</html>

결과 확인하기

CSS에 대해 이렇게 설명하면 입문은 끝났다.

이쁜 테두리가 생기면서 평범했던 글자가 꾸며진 것을 확인 할 수 있다.

저작자표시

'Web > CSS' 카테고리의 다른 글

CSS, 지도 검색 목록 만들기 (0)	2021.11.11
CSS, 카카오 sample 지도, 목록 (0)	2021.11.10
[CSS ] display 감추기, 보이기 (0)	2021.09.14

작은 새의 날개짓