CSS란?
Cascading Style Sheets 약자로,
HTML, XHTML, XML 같은 문서의 스타일을 꾸며주는 스타일 시트 언어입니다.
HTML과 CSS 설명
HTML(구조), CSS(스타일) 나눌수 있습니다.
HTML은 건축에서 건물의 철골 구조를 만드는 것과 비슷하고 어디에 위치할지 웹페이지의 기본적인 구조를 정의합니다. 이는 텍스트, 이미지, 링크 등의 콘텐츠가 어디에 위치할지를 정의합니다.
CSS는 마치 건축에서 외부 장식이나 인테리어 디자인을 하는 것과 비슷합니다. 건축가가 건물의 구조를 만든 후, 디자이너가 외부 모양과 내부를 꾸미는것 처럼, CSS는 HTML에서 정의된 구조를 스타일링하고 디자인합니다. 이는 색상, 폰트, 크기 간격 등의 스타일을 적용하여 웹 페이지를 더욱 시각적으로 매력적으로 만듭니다.
CSS의 주요기능
- 스타일 지정 : 글꼴, 색상, 크기, 간격 배치 등과 같은 다양한 속성을 조절하여 웹 페이지의 외관을 디자인하는 데 사용합니다.
- 레이아웃 제어 : 요소의 위치, 정렬, 플로팅 등을 조정하여 웹 페이지의 구조를 설계할 수 있습니다.
- 반응형 디자인 : CSS를 사용하면 웹 페이지를 다양한 화면 크기와 기기에 대해 반응형으로 만들 수 있습니다. 이는 미디어 쿼리와 같은 기능을 활용하여 다양한 디바이스에 맞게 스타일을 조정함으로써 가능합니다.
CSS의 작동방식
CSS는 규칙 기반 언어입니다. 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다. 아래 코드는 h1, p 태그를 css로 스타일을 적용해보았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:red;
font-size:5em;
}
p{
color:black;
}
</style>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>CSS를 사용하여 스타일을 지정할 수 있는 것이 너무 많습니다. 해서 토이프로젝트, 과제, 프로젝트를 통해서 필요한 스타일링을 디자인에따라 스터디해보는것을 목표로 해보겠습니다.
정리!
HTML은 웹 페이지의 기본적인 구조를 정의하고, CSS는 그 구조를 스타일링하여 디자인합니다.
다음 포스팅은 CSS 선택자 주제를 가지고 돌아오겠습니다. 개굴!
참고사이트!
https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/What_is_CSS
CSS 란 무엇인가? - Web 개발 학습하기 | MDN
CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동할까요? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 CSS에 대한 몇 가지 주요 용어를 다룹
developer.mozilla.org
https://aboooks.tistory.com/49
CSS란? (HTML과 CSS의 차이, CSS 작성법)
CSS란? (HTML과 CSS의 차이) CSS는 Cascading Style Sheets 약자로, HTML, XHTML, XML 같은 문서의 스타일를 꾸밀 때 사용하는 스타일 시트 언어입니다. HTML로 문서의 뼈대를 만들면 CSS는 이 문서의 화장을 맡고
aboooks.tistory.com