안녕하세요 성조입니다.
평소에 CSS를 작업할 일이 생기면 필요한 태그들을 필요할 때 찾아서 사용하고 따로 복습하지 않아서 향후에 동일한 것들을 사용할 때 기억나지 않는 경우가 종종 있었습니다. 이번 포스팅을 시작으로 최대한 많은 기억을 남길 수 있도록 포스팅을 진행하면 좋을 것 같습니다.
INDEX
1. CSS란?
2. CSS의 특징과 장단점
3. CSS구조
CSS란?
"Cascading Style Sheets"의 약자로 CSS로 불린다. 이런 CSS는 HTML 또는 마크업 언어로 작성된 문서들이 웹상에 표현될 때 텍스트 색상, 글꼴, 스타일, 문단 간격, 크기, 배치 방법, 이미지, 레이아웃 설계 등 여러 가지를 제어하는데 사용되는 스타일 시트 언어이다.
HTML로 웹 페이지의 뼈대와 같은 전체 설계 구조를 만드는 마크업 언어이며, CSS는 HTML을 표현하는 모습을 제어하고 디자인에 필요한 모든 것들을 다루는 스타일 시트 언어이다. 여기서 자바스크립트(Javascript)는 HTML과 CSS로 만든 페이지를 동적으로 동작할 수 있도록 만들어주는 객체 기반의 언이이다.
여기서 주의해야 할 부분은 자바는 객체 지향 언어이고 자바스크립트는 객체 기반의 언어이다.
CSS의 특징과 장단점
CSS의 특징
현재는 CSS3을 채택해서 사용하는데 CSS3의 경우 기존 버전과 다르게 모듈 기반으로 개발되는 점이 특징이다. 이런 특징은 다양한 디바이스 기기에 맞춰 원하는 모습에 맞춰서 필요한 CSS3를 적용할 수 있는 것이 장점이다. css는 html의 일괄 제어와 글자 간격, 문자 간격등 다양하고 상세한 부분까지 제어할 수 있다.
CSS의 장점
CSS는 이전 표준 단계와 역호환이 되는 장점으로 CSS1, CSS2, CSS3가 존재한다면 CSS3은 CSS1, CSS2를 모두 지원하는 장점이 있다.
앞서 언급한 모듈화하는 것이 장점이라 생각한다.
CSS의 단점
과거에는 브라우저의 호환에 문제가 많이 있었다면 현재는 다양한 프레임워크의 발달로 생산성이 많이 떨어지는 것이 단점이라 생각된다.
CSS구조
html과 단순하게 사용하는 경우 <head> 태그 이내에 위치를 기재해야 한다.
설명 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<p>테스트 화면입니다.</p>
</body>
</html>
|
cs |
위와 같이 HTML 파일이 있다면 앞서 설명한 것과 같이 head에 값을 주소로 걸어 주거나 <style>태그를 활용하여 상태를 지정하는 경우도 있다.
간단하게 html에서 p 태그에 대해서 폰트하고 색상을 지정해 놓은 코드이다.
백엔드 개발자를 희망하고 있지만 어쩌다 보니 기획부터 디자인, DB 설계, 프론트, 백엔드 등을 담당하게 된 경험이 있어서 학습이 충분히 된다면 향후에 도움 되는 역량이라고 생각되네요. 이해하지 못하면 응용할 수 없다는 점이 생각났습니다. 백엔드 로드맵에도 HTML과 CSS는 존재하기 때문에 충분한 학습하고 본인 것으로 만드는데 있어서 나쁜 부분은 없다고 생각됩니다.
물론 프레임워크를 잘 사용하는 것도 중요하고 BootStrap이나 Tailwind CSS을 사용해서 강력하고 편리한 개발을 진행할 수 있으나, 유지 보수의 단점이 존재한다는 얘기를 접했습니다. 그래도 너무 좋은, 잘 만든 프레임워크이므로 향후에 시간이 된다면 포스팅을 진행할 예정입니다.
오답이나 문제가 있는 경우 언제든지 댓글 부탁드리겠습니다!
궁금하신 부분도 언제든 댓글 부탁드립니다!
감사합니다 다음 포스팅 때 뵙겠습니다!
- 참조 자료 -
http://wiki.hash.kr/index.php/CSS
CSS - 해시넷
CSS(Cascading Style Sheets) CSS(Cascading Style Sheets) CSS(씨에스에스)는 "Cascading Style Sheets"의 약자로서, 웹 문서의 색상, 폰트, 레이아웃 등을 표현하기 위해 사용하는 스타일 시트 언어이다. 씨에스에스라
wiki.hash.kr
https://www.w3schools.com/css/css_syntax.asp
CSS Syntax
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://ko.wikipedia.org/wiki/CSS
CSS - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로[1], HTML과 XHTML
ko.wikipedia.org
'Web Basic > CSS' 카테고리의 다른 글
| [CSS] Tailwind CSS 반응형 커스텀 사이즈 세팅하기 (5) | 2024.11.08 |
|---|---|
| [CSS] HTML & CSS 가볍게 페이지 하단 고정 메뉴 만들기 (2) | 2023.05.25 |
