뇽안하세요!
오늘은 CSS에 대해 간단하게 알아볼게요
그럼 바로 시작합니다~
CSS란?
CSS(Cascading Style Sheets)는 스타일, 레이아웃 등 사용자의 문서를 표시하는 방법을 지정하는 언어입니다
기본적인 테스트 문서 스타일링을 할 때 사용되는데 그 예시로 색상, 크기 변경 또는 레이아웃 꾸미기를 생각하면 될 것 같네요!
CSS 구문 규칙
h1 {
color: blue;
font-size: 13px;
}먼저 스타일을 지정한 HTML Element를 선택하고, 중괄호를 열어서 key-value 형식으로 속성을 선언해주면 됩니다.
여러 속성을 지정할 땐, 하나의 속성 뒤에 세미콜론(j)을 붙여 하나의 지정이 끝임을 알립니다.
CSS 적용 방법
CSS를 적용하기 위해선 3가지 방법이 있습니다
-
외부 파일로 작성하여 link 걸기(외부 스타일)
CSS를 외부 파일로 작성하여 import 시키는 방식입니다``` # style.css div { background-color: skyblue; box-sizing: initial; } ```style.css를 작성했습니다.
이를 import 시키기 위해<html>의<head>에 작성해주면 되네요!<!DOCTYPE html> <html lang="ko-KR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>외부에서 css import 시키기</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> -
<html>내부<head>에 작성하기 (내부 스타일)
말 그대로<head>태그 안에 직접 작성해주는 방법이 있습니다<!DOCTYPE html> <html lang="ko-KR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>외부에서 css import 시키기</title> <style> div { background-color: skyblue; box-sizing: initial; } </style> </head> <body> </body> </html> -
Inline 방식
Inline 방식은<body>내 해당 태그에서 직접적으로 스타일링을 하는 방식입니다<div style="background-color: skyblue; box-sizing: initial;">
CSS는 정답이 없고 작성하는 사람마다 스타일이 다르기 때문에 자기가 원하는대로 사용할 수 있어요! 이에 대한 몇가지 예시를 볼까요?
# 개별적으로 적용하기
<body>
<div>
<p style="color: green"> 무야호~ </p>
<h1 style="color: green"> 무한~ </h1>
<span style="color: green"> 도전~ </span>
</div>
</body># 태그별로 적용하기
<head>
<style>
p {
color: green;
}
h1 {
color: green;
}
span {
color: green;
}
</style>
</head>
<body>
<div>
<p> 무야호~ </p>
<h1> 무한~ </h1>
<span> 도전~ </span>
</div>
</body># 그룹으로 적용하기
<head>
<style>
p, h1, span {
color: green;
}
</style>
</head>
<body>
<div>
<p> 무야호~ </p>
<h1> 무한~ </h1>
<span> 도전~ </span>
</div>
</body># 상속적으로 적용하기
<head>
<style>
div {
color: green;
}
</style>
</head>
<body>
<div>
<p> 무야호~ </p>
<h1> 무한~ </h1>
<span> 도전~ </span>
</div>
</body>상속
CSS에서 상속이라는 개념이 있는데, 부모가 가진 속성이 자식들에게도 적용되는 걸 뜻해요
물론, 모두 동일하게 적용되지 않고 상속되지 않는 속성들도 있답니다
상속되지 않는 속성들을 몇 가지 보면 <padding>, <margin>, <width>, <height> 등이 있어요
추가로 initial, inherit 같은 값이 있는데
initial 같은 경우, 부모와 동일하게 상속받겠다!
inherit 같은 경우, 브라우저의 기본 속성을 쓰겠다!
이정도만 알아도 뷰단 개발자와 소통하기 좀 더 수월하겠죠!?
저는 앱개발자 경험으로 앱에서 UI를 짜본 토대로 웹도 비슷하겠거니 했는데,
처음이라 그런지 생각보다 CSS가 많이 어려운데요!?
그래도 현업 경험상 목표인 백엔드 개발자가 되면 프론트 개발자와 소통할 일이 아예 없진 않을텐데
이정도는 알아두면 확실히 도움이 되겠죠?
오늘은 여기까지입니다.
글 읽어주는 분들 감사드리고
다음에도 또 봐요 안녕~ 🙃
뇽안하세요! 파이팅입니다 :)