CSS란?
Cascading Style Sheets의 약자
우선순위를 가지고 적용되는 웹 페이지의 스타일을 정리해둔 문서
CSS 기능의 단위 -> 모듈(module)CSS의 역할
HTML -> 웹의 뼈대
CSS -> HTML을 꾸며줌
📌 스타일 명세서
선택자(셀렉터) {
프로퍼티: 벨류;
}인라인 방식
<!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></title>
</head>
<body>
<!-- 인라인 작성 -->
<h1 style="color: red;">hello world</h1>
</body>
</html>내부 스타일 시트
<!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></title>
<!-- 내부 css -->
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<!-- 파일 하나만 수정하면 됨 -->
<h1>hello world</h1>
</body>
</html>외부 스타일 시트
<!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">
<!-- 외부 css -->
<link rel="stylesheet" href="002.css">
<title></title>
</head>
<body>
<!-- 마크업과 CSS를 분리할 수 있어 좋음 -->
<h1>hello world</h1>
</body>
</html>RESET CSS
각각 브라우저마다 제공하는 스타일이 달라 기존 스타일을 초기화시켜줘야 한다.
벤더프리픽스 (Vendor-Prefix)
접두어+CSS속성 -> 비표준 / 실험적인 CSS 속성을 특정 브라우저에서 실행할 수 있도록 함
선택자
전체 선택자
/* 범용 선택자 */
* {
color: red;
}
타입 선택자
/* 타입 선택자
직접 지목한 경우가 우선순위가 더 높음 */
h1,
h2 {
color: green;
}
아이디 선택자
/* id 인 경우 # 사용 */
#one {
color: red
}
아이디는 같은 페이지 안에서 유일해야 함
<a> 태그에서 href="#one" 과 같이 연결하여 📌현재 페이지에서 이동하는 해쉬 링크 만들 수 있음
클래스 선택자
id 속성과 마찬가지로 해당 요소 식별할 때 사용
✏️ id -> 한 페이지에 하나만 존재
✏️ class -> 한 페이지에 여러개 존재 가능
/* class 인 경우 . 사용 */
.one {
color: red
}
선택자 우선순위
- 나중 선언 우선 원칙
- 명시도(구체성)의 원칙
- 중요성의 원칙
후자 선언 우선 원칙
동일한 선택자가 연속으로 사용된 경우 후자를 우선순위에 둔다.
명시도(Specificity)의 원칙
한 선택자보다 더 구체적으로 작성된 경우 구체적 작성한 선택자가 우선이 된다.
🤔 가중치
어떤 선택자가 더 구체적????
👉 id > class > 타입 순으로 스타일 적용
inline-style : 1000점
id : 100점
class : 10점
타입 : 1점
전체 선택자 : 0점
👉 class 선택자가 아무리 많다고 하더라도 id 선택자를 넘어가지 못한다.
👉 !important 속성값을 부여하면 다른 속성보다 더 우선적으로 적용됨
Box Model
- 콘텐츠 박스 : 요소의 콘텐츠 표시되는 영역 (width, heigth)
- 패딩 박스 : 콘텐츠와 테두리 사이의 공간
- 보더 박스 : 테두리
- 마진 박스 : 요소와 요소 사이의 공백 역할
박스의 유형
블록 박스
양 옆으로 100% 사용 (사용 가능한 공간을)
width, height 속성으로 컨트롤 가능
일반적으로 한 줄 차지
인라인 박스
컨텐츠 박스 크기만큼 가짐
새 줄로 행 바꾸지 않음
width, height 속성을 사용 X
자신이 필요한 부분만 차지
display : 박스의 유형 결정
외부 디스플레이 타입
외부 형제나 부모 배치에 영향을 미침
- inline : 인라인 박스로 박스의 유형 결정 (display:inline)
- block : 블록 박스로 유형 결정
- inline-block:inline : inline 속성 특징과 block 속성 특징 함께 존재
내부 디스플레이 타입
내부 자식 박스들의 배치에 영향을 미침
- flex : 내부 자식 요소들의 위치를 부모 안에서 X축/Y축 단방향으로 설정
- grid : 내부 자식 요소들의 위치를 부모 안에서 X축과 Y축 모두 이용하여 배치
border
-
border-width : 선 두께
- 길이 지정
- medium : 중간 굵기
- thin : 얇은 실선
- thick : 굵은 선
-
border-style : 선 모양
- none : 삭제
- solid : 직선
- dotted : 점선
- double : 이중선
- groove : 테두리가 오목하게 안쪽으로 파인 선
- ridge : 테두리가 볼록하게 나옴
- inset : 요소가 안으로 들어가 보임
- outset : 요소가 튀어나온 것처럼 보임
-
border-color : 선 색
- 1개 : 네 면 동일 색상
- 2개 : 상하, 좌우 적용
- 3개 : 상, 좌우, 하 적용
- 4개 : 상, 우, 하, 좌 적용 (위부터 시계방향)
radius
테두리의 꼭짓점을 둥글게 만든다.
border-top-left-radius: 50px; 상단 왼쪽 모서리를 둥글게
border-top-right-radius: 50px; 상단 오른쪽 모서리를 둥글게
border-bottom-left-radius: 50px; 하단 왼쪽 모서리를 둥글게
border-bottom-right-radius: 50px; 하단 오른쪽 모서리를 둥글게
느낀점
이번주는 CSS 특강과 직접 웹 페이지를 짜보면서 내가 부족한 부분들이 어딘지 알게 된 한 주라고 생각이 든다. 😂
분명 이번주도 열심히 복습해봐야겠다고 다짐했었는데 생각보다 수업들으며 특강듣느라 잘 이루지 못한 것 같다.
하지만 이번 연휴를 이용해서 추가적인 강의를 통해 HTML 부분을 완벽하게 마스터해보고 싶다!!!! 😂 😁😁 💪💪
함께 배워나가고 싶습니다!