본 내용은 Dream Coding Academy의 강의 내용입니다 Go to Dream Coding
CSS_Basic1
- #1 의미 정의, 선택자(selectors),스타일링
- #2 헷갈리는 컨셉
- #3 CSS 꽃: Flex box
- 의미 정의
- CSS (Cascading Style Sheet)
- cascade: 계속 연속해서 떨어지는
- 클라이언트의 버튼을 클릭했을 경우를 생각하면
- 우선적으로 해당 Style이 적용된게 있는지 확인
- 없으면 브라우저의 기본적용 Style 사용
- 세부적인 정의가 있는지 확인한다!
- Cascading 우선순위
- Author Style (CSS)
- User Style (사용자가 브라우저에서 설정: ex 다크모드)
- Browser
- !important를 사용하면 이러한 연결고리를 끊고 사용할 수 있다(구조상 잘 맞지 않을 때 사용한다: 가능하면 피해서 사용!!)
- 선택자(selectors)
- CSS 문법
selector {
property: value;
}
- * : Universal
*{
color:green;
}
- Tag(ex: div): type
li{
color: blue;
}
- 구체적으로 Tag가까이에 적용된 CSS가 우선순위로 적용됨
- 예시: * 과 li를 동시에 적용하면 li의 값이 보여진다
- #id : ID
#special{
color: pink;
}
li#special{
color: blue;
}
- li tag셀렉터보다 li#special가 우선적용된다
- .class: Class
.red{
width: 100px;
height: 100px;
background: yellow;
}
//버튼
button:hover {
color: red;
background: beige;
}
- div는 값이 없으면 보이지 않기 때문에 width,height를 입력해줌
- : State
- [ ]:Attribute
// a 태그중 href속성을 갖고있는 것만 선택
a[href]{
color: purple;
}
// a 태그중 href속성을 갖고있고 "naver.com"인 것만 선택
a[href="naver.com"]{
color: purple;
}
// a 태그중 href속성을 갖고있고 "naver"로 시작하는 것만 선택
a[href^="naver"]{
color: purple;
}
// a 태그중 href속성을 갖고있고 ".com"으로 끝나는 것만 선택
a[href$=".com"]{
color: purple;
}
- div 추가 설명
.red{
width: 100px;
height: 100px;
padding: 20px 0px; //(상하,좌우) (상 우 하 좌) (전체)
margin: 20px;
border: 2px dashed red;
//border-width: 2px;
//border-style: solid;
//border-color: pink;
background: yellow;
}
- MDN의 CSS reference에서 자세한 설명 확인가능
-Game을 통해 재밌게 익히기
-
HTML 실습코드
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<h1 id="special">Hello</h1>
<button>button 1</button>
<button>button 2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="naver.com">Naver</a>
<a href="google.com">Google</a>
<a></a>
</body>
</html>
