본문 바로가기
Front-End/HTML , CSS

CSS란 무엇인가? (CSS)

dailycoding777 2024. 1. 6. 14:52

웹페이지를 꾸며주는 도구라고 보면 된다.

 

CSS 약자부터 들어가겠다.

Cascading : 폭포같은 , 계속되는 , 연속적인

Syle : 멋을 내다

Sheet : (종이나 문서) 한장.

=> 연속적으로 스타일을 정희하는 문서이다.

 

CSS사용 방법은 다음과 같다.

내부 스타일 시트 (Internal Style Sheet)

외부 스타일 시트 (External Style Sheet)

인라인 스타일 (Inline Styles)

예를 살펴 보겠다.

---------------------------------------

내부 스타일 시트 (Internal Style Sheet)

문서 내에 head 태그 안에 사용하는 방법

<style>
/* CSS 스타일 정의 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333333;
}
</style>

 

----------------------------------------

외부 스타일 시트 (External Style Sheet)

우리가 html 만들때 제목.html 이렇게 만들지 않는가?

Index.html 파일을 만들듯이 css도 만들어 주면 된다.

 

vscode에 새파일 눌러서 이름을 style.css로 만들어준다.

index.html에 head태그에 style.css를 넣어주면 연결이 될테고

넣고 싶은 속성을 거기 안에다 넣어주면 되는 것이야

<head>
<link rel="stylesheet" href="styles.css">
</head>

 

-------------------------------------------

인라인 스타일 (Inline Styles)

HTML 요소에 직접 스타일 속성을 사용하여 스타일을 정의한다.

<body>
<h1 style="color: #333333; font-family: Arial, sans-serif;">Hello, CSS!</h1>
<p style="background-color: #f4f4f4;">This is a paragraph.</p>
</body>

p태그에 style을 바로 넣는거지.

 

실질적으론 인라인은 잘안쓰고 외부스타일,내부스타일 정도만 쓰는 거 같다.

'Front-End > HTML , CSS' 카테고리의 다른 글

박스모델(box model)  (0) 2024.01.09
선택자 유형  (0) 2024.01.09
meta(HTML)  (0) 2024.01.06
input(HTML)  (0) 2024.01.06
form , label(HTML)  (0) 2024.01.05

'Front-End/HTML , CSS' Related Articles

티스토리툴바