1. 기본 문법
<style>
a {
color: black;
}
</style>➡️웹페이지에 CSS 삽입하는 방법
1) style 태그
2) style 속성
Selector : 선택자
Declaration : 선언, 효과
Property : 속성
Value : 값
2. 선택자(Selector)의 기본
- .class : 같은 의도에 따라 그룹핑할 때
- #id : 중복 x
⭐우선순위⭐
#id > .class> 태그 선택자(element)
3. 박스 모델
1) display 속성의 기본값
<style>
h1 {
display: block; // block level element
display: inline; // inline element
display: none; // 태그 숨기기
}
</style>
2) CSS box model 정리
- padding : 콘텐츠와 테두리 사이의 간격
- margin: 테두리와 테두리 사이의 간격
- width : 콘텐츠의 폭
- height : 콘텐츠의 높이
+ 개발자도구(F12) - Styles 참고하기
4. 그리드
<div> 태그 : block level element
<span> 태그 : inline element
<style>
#grid{
display: grid;
grid-template-columns: 150px 1fr; //grid 형식을 column(열)으로 설정
}
</style>※ 화면 전체를 쓰게 자동으로 조정되는 단위 : fr
※ 참고
HTML, CSS, JS 의 기술 중에서 현재 웹페이지들이 그 기술을 얼마나 채택하고 있는지에 대한 통계
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
5. 미디어 쿼리(Media Query)
반응형 웹 / 반응형 디자인(Responsive Web) : 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 된다.
<style>
@media(min-width:800px) { // width > 800px 일 때, 아래의 코드 실행
div{
display:none;
}
}
</style>
6. html파일과 css파일 연결하기
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
</html>➡️중복의 제거
