스터디일지/CSS
[CSS] 기본 익히기 PART 1
똥쟁이핑크
2024. 3. 13. 09:14
CSS의 구조
선택자 - 꾸미고 싶은 태그(요소)
속성명 - 스타일의 종류
속성값 - 스타일
CSS 적용방법
인라인 스타일 - Inline Style Sheet
- 태그 안에 스타일을 명시하는 방법
- 여러개의 스타일을 적용할 때는 ;(세미콜론)을 사용한다
- 실무에서 잘 사용하지 않지만 정말로 바뀌지 않는 스타일이 있을 때 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inline style</title>
</head>
<body>
<h1 style="color: blue">제목</h1>
<div style="width: 100px; height: 100px; border: 1px solid red"></div>
</body>
</html>
내부 스타일 - Internal Style Sheet
- <head>태그 안에 <style>태그를 적어서 사용한다
- 내부 스타일 방법은 여러 html에 같은 스타일을 적용해야 할 때 적합하지 않다.
같은 스타일 코드를 복사 붙여넣기 해야 하는 번거로음이 있기 때문에 이럴때는 외부 스타일 방법을 적용해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Internal style</title>
<style>
h1 {
color: blue;
}
.content {
border: 2px solid red;
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<h1>헬스</h1>
<p class="content">헬스장에서 운동한다</p>
</body>
</html>
외부 스타일 - External Style Sheet
- 제일 많이 사용하는 방법
- 외부에 css 확장자를 만들어 사용한다.
- html 파일에 link 태그를 명시하고 href로 css의 경로를 불러와서 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>External style</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>코딩</h1>
<p class="article">우리는 코딩을 배우고 있다</p>
</body>
</html>/* CSS 파일 코드 */
h1 {
color: blue;
}
.article {
border: 1px solid black;
padding: 30px;
}
CSS 주석
메모를 남길 때 사용한다.
/* 메모할 내용 */
CSS 적용 우선 순위
사용자 !important > 제작자 !important > 제작자(내가 지정한 스타일) > 사용자 > 브라우저
주의사항 - !important는 제일 먼저 적용이 되기 때문에 주의해서 사용해야 한다.
Cascading 뜻
Cascading Style Sheet에서 Cascading 는 폭포라는 뜻이며 우선 순위에 맞게 연속적으로 적용되는 것을 의미한다.
HTML 은
- 제작자 스타일을 우선적용하고 그 다음에
- 브라우저 사용자 스타일을 적용한다.
- 마지막으로 브라우저 기본 스타일이 적용된다.
위의 3가지는 기억해두면 좋다
참고한 사이트
https://www.youtube.com/watch?v=JgolsnrdnGM&list=PLlaP-jSd-nK-ponbKDjrSn3BQG9MgHSKv&index=17