CSS 우선순위
내부 스타일 (internal style)
HTML 문서 내부에 style 태그를 사용하여 스타일을 지정하는 방법.
인라인 스타일 > 내부 스타일 > 외부 스타일
<style>
p {
color: pink;
background-color: yellow;
}
</style>style 태그 안에 스타일을 지정하면 되고,
스타일은 선택자 {속성:값;} 형태고 지정하며, 여러 개 스타일을 지정할 떄는 줄바꿈 또는 세미콜론(;)으로 구분한다.
외부 스타일(external style)
HTML 문서와는 별개의 파일에서 스타일을 지정하는 방법.
내부 스타일 보다는 우선순위가 낮지만, 인라인 스타일 보다는 우선 순위가 높음.
내부 스타일 > 외부스타일 > 인라인 스타일
이전에 설명한 CSS 파일을 HTML 문서에 로드하는 것이 바로 외부 스타일!
- CSS 파일만 따로 관리할 수 있어서 유지보수 용이
- 스타일을 중복해서 작성하지 않아도 되어 코드의 양을 줄일 수 있음
인라인 스타일 (inline style)
style 속성을 사용하여 스타일을 지정하는 방법.
다른 스타일 방법 보다 우선순위가 높아 덮어쓰기 쉬움.
<p style="color: blue; background-color: pink">인라인 스타일</p>
BUT!!!
스타일 수정 시, 모든 HTML 요소를 수정해야 하므로 유지보수가 어려움.
인라인 스타일은 가능한 사용하지 않는 것이 좋다.
우선순위 계산 방식
- 인라인 스타일 : 가장 높은 우선순위
- ID 선택자 : 높은 우선순위
- 클래스, 속성, 가상 클래스 선택자 : 중간 우선순위
- 태그 선택자 : 낮은 우선순위
- !important 를 사용하면 어떤 규칙보다 우선 적용됨.
CSS 박스 모델 (Box Model)
박스 모델은 모든 HTML 요소가 사각형 박스로 구성된다는 CSS 기본 개념이다.
각 박스는 4가지 영역으로 나눌 수 있다.
- content: 텍스트나 이미지가 들어가는 실제 내용 영역
- padding : 내용과 테두리 사이의 내부 여백
- border : 테두리, 요소의 경계를 나타냄
- margin : 요소 외부의 여백, 다른 요소와의 간격
실습 내용 (외부 스타일)
-
HTML
-
CSS
실습 내용 (내부 스타일)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 실습</title>
<style>
.box {
width: 40%;
padding: 10px;
border: 3px solid blue;
margin: 20px;
}
/* 2. 제목의 기본 색상은 녹색 */
h1 {
color: green; /* 이곳에 기본 제목 색상을 설정하세요 */
}
/* 3. 제목에 클래스 .highlight가 있을 때는 빨간색 */
.highlight {
color: red;
/* 이곳에 클래스 적용 시 제목 색상을 설정하세요 */
}
/* 4. id가 special인 경우 노란색 */
#special {
color: yellow !important;
/* 이곳에 id 적용 시 색상을 설정하세요 */
}
/* 5. 단위를 적절히 사용해 크기 및 글자 크기를 설정하세요 */
.content {
width: 60%; /* 50%로 박스 크기를 설정 */
font-size: 1.5em; /* 글자 크기 설정 */
}
</style>
</head>
<body>
<h1 class="highlight">박스 모델 실습</h1>
<h1 id="special">우선순위 실습</h1>
<div class="box content">
이곳은 박스 모델이 적용된 콘텐츠입니다.
</div>
</body>
</html>
*적용 이미지
P.s>> 한번 실습 끄적였다고 이제 잘 하겠지! 했는데 역시나 기억이 안난다...하면할수록 지식이 쌓이니까 복잡하고 헷갈리지만 공부하는 과정이다 생각하구 블로그 잘 정리해 나가자..
아직 블로그 내용도 나의 복잡한 머리를 보여주고 있는 것 같은데 이 또한 점차 간결해 지고 좋아지겠지. 성장해 나가는 과정이라고 생각하자!
#오즈코딩 #베이스캠프
