이번 주에도 으쌰으쌰 2주 차 스터디를 진행했었다. 3주 차에서 강의 주제는 CSS. 처음 코딩 공부할 때엔 선택자를 작성하는 부분에서 많이 헷갈렸었다. 지금은 그래도 헷갈려하진않는다.. 정말 엄청난 발전.. 여튼 3주차는 CSS에 관한 강의였고 강의에서 배운 내용 중 개인적으로 중요하다고 생각했던 부분과 새로 알게된 부분, 정리하고 싶은 부분들만을 정리해보았다.
CSS
Cascade Style Sheet의 줄임말로 웹 페이지를 꾸미는 역할을 한다. HTML로 페이지를 제작한다면 CSS는 그 페이지를 꾸며주는 역할을 한다.
CSS를 사용하는 이유
웹 페이지의 스타일을 별도의 파일로 나눌 수 있어 전체 스타일을 쉽게 제어할 수 있다.
스타일을 일관성있게 유지할 수 있으며 그에 따른 유지 보수가 쉬워진다.
CSS 사용법
1. 요소에 직접 사용하기
<span>이 부분</span>을 두꺼운 핑크색으로!
2. head 태그 내 style 태그에 적용
<head>
<!-- 중략 -->
<style>
span {
font-weight: bold;
color: pink;
}
</style>
</head>
<body>
<span>이 부분</span>을 두꺼운 핑크색으로!
</body>
3. 별도의 CSS 파일에 분리
index.html
<head>
<!-- 중략 -->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<span>이 부분</span>을 두꺼운 핑크색으로!
</body>index.css
span {
font-weight: bold;
color: pink;
}
CSS 선택자
tag 선택자 : 문서 내 지명된 모든 태그에 적용
span { color : pink; }
h1 { color : salmon; }
p { margin : 20px; }
class 선택자 : 문서 내 다수 요소에 동일하게 적용될 수 있는 class 속성에 따라 적용( class 명을 동일하게 맞춘다)
.className { color : pink; }
.className2 { margin : 20px; }
/* 특정 태그에 해당 클래스가 있을 때 */
li.className3 { background-color: yellow; }
/* 하나 이상의 클래스 */
.className4.className5 { font-style: italic; }
id 선택자 : 문서 내 유일한 요소에 적용될 수 있는 id 속성에 따라 적용 ( 동일 이름을 하나 이상 사용시 오류 발생 )
#idName1 { background-color: yellowgreen; }
#idName2 { background-color: pink; }
전체 선택자 : 모든 태그에 적용
* { color : pink; }
CSS 우선순위
- 인라인 스타일 > id 선택자 > class 선택자 > 태그 선택자
- 구체적일수록 높은 순위이다.
- 같은 우선순위라면 다음에 오는 것(더 아랫줄)에 덮어쓴다.
#패스트캠퍼스 #내일배움카드 #K디지털크레딧 #바이트디그리 #프로그래밍기초
