Basic CSS
Learn!
- CSS 기본문법
- 선언 방식
- 기본 선택자
- 복합 선택자
- 가상 클래스 선택자
- 가상 요소 선택자
- 속성 선택자
- 스타일 상속
- 선택자의 우선순위
1. 기본 문법
<html lang="ko">
<head>
<style>
/* 주석 작성 */
div {
margin : 30px;
color : blue;
}
</style>
</head>
<body>
<div> hello </div>
</body>
</html>- 선택자 {속성:값;}
- 선택자 {속성:값; 속성:값;}
- 중괄호로 스타일 범위의 시작과 끝을 표시하며, 여러 속성이 하나의 선택자에 들어갈 수 있다.
- command + / : 주석 작성
2. CSS 선언 방식
1) 내장 방식
<style> div{ color: red; margin: 20px; } </style>
- html의 style이란 태그 내부에다가 작성함.
- But 유지보수를 위해서도 html/css/javascript를 분리하여 관리하는것이 좋음
2) 인라인 방식
<div style="color: red; magin: 20px;"></div>
- html 요소의
스타일 속성에 직접 작성하는 방식(선택자 없음) - 인라인 방식으로 작성하게 되면 우선순위가 너무 높아지기 때문에 유지보수하기 굉장히 어려워서 권장하지 않음
3) 링크 방식
<link rel="stylesheet" href="./css/main.css">
- link 태그로 외부 CSS 문서를 가져와서 연결하는 방식
- 병렬 입력 방식
4) import 방식
@import url("파일경로")- CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식.
- 직렬 연결 방식
- html에 메인으로 연결되어있는 css링크가 우선 적용되고, 그 css 링크에서 import된 css파일이 적용이 됨.
3. 기본 선택자
* { color: red; } abc { color: red; } .class { color: red; } #id { color: red; }
*(에스터리스크): 모든 요소를 선택하는 선택자태그 선택자: 태그 이름을 입력하는 선택자클래스 선택자: 클래스 속성의 값이.클래스이름인 요소 선택아이디 선택자: id 속성의 값이#id이름인 요소 선택
4. 복합 선택자
<div> <ul> <li>사과</li> <li>딸기</li> <li class='orange'>오렌지</li> <li>망고</li> <li>사과</li> </ul> <div>당근</div> <p>토마토</p> </div> <span class="orange">오렌지</span>
일치 선택자: 선택자 두개를 동시에 만족하는 요소 선택- span.orange{color: red;}
- 태그 선택자를 앞에적고 클래스나 아이디 선택자가 뒤에 와야함
자식 선택자:- ul > .orange {color: red;}
- 클래스가 오렌지인 요소를 먼저 찾음
- ul 태그의 자식 요소인것을 찾아서 적용함
하위 선택자: '띄어쓰기'가 선택자의 기호!- div .orange{color: red;}
- 클래스가 오렌지인 요소를 먼저 찾음
- 조상요소에 div태그가 있는것을 찾음
인접 형제 선택자:- .orange + li {color: red;}
- .orange 선택자의 다음 형제요소
li하나를 선택 - 망고라는 글자가 빨간색으로 변경됨
일반 형제 선택자:- .orange ~ li {color: red;}
- .orange 선택자의 다음 형제 요소
li모두를 선택 - 망고, 사과, 오렌지 모두 빨간색으로 변경됨
5. 가상클래스 선택자
1) hover
.box { width: 100px; height: 100px; background-color: orange; transition: 1s; } .box:hover { width:300px; background-color: royalblue; }
- 선택자 ABC요소에 마우스 커서가 올라가 있는 동안 적용됨.
2) active
a : active { color: red; }
- 마우스를 클릭하고 있는동안 적용됨
- 클릭 버튼을 누르지 않으면 원래 상태로 돌아옴
3) focus
input:focus { background-color: orange; }
- focus가 될 수 있는 요소 : HTML 대화형 콘텐츠
- input, a, button, label, select ...
- tabindex 속성에 -1값을 넣으면 focus가 안되는 요소에도 적용 가능함
4) 선택자:first-child, last-child, nth-child(n)
<div class="fruits"> <span>딸기</span> <span>수박</span> <div>오렌지</div> <p>망고</p> <h3>사과</h3> </div>
first-child
- .fruits span:first-child {} span 선택자가 형제 요소 중 첫째라면 선택
last-child
- .fruits h3:last-child {}: 형제 요소들중 막내를 찾는데 그 막내가 h3여야하고 fruits 클래스의 후손이어야한다.
nth-child
- .fruits *:nth-child(n) {}: 선택자가 형제 요소중 (n)째라면 선택.
*전체선택자가 붙어있기때문에 .fruits 클래스의 모든 하위요소를 뜻함- .fruits *:nth-child(n): n은 0부터 시작함!
- .fruits *:nth-child(2n) : 2의 배수(짝수)
- 2n + 1 = 홀수
- n + 2 = 첫번째요소를 건너뛰고 2번째 요소부터 적용
:not(부정선택자)
- .fruits *:not(span) {} : .fruits의 모든 하위 요소들 중
span 태그가 아닌것을 선택
6. 가상요소 선택자
.box::before { content: "앞!"; } .box::after { content: "뒤!"; } .box::after { content: ""; display: block; width: 30px; height: 30px; background-color: royalblue; }
ABC::before: 선택자 ABC 요소의 내부 앞에 내용을 삽입ABC::after: 선택자 ABC 요소의 내부 뒤에 내용을 삽입- 내용 삽입시에는 content 속성을 사용함
- content는 내용을 비워두더라도 필수적인 속성임
::before, ::after: 가상의 인라인 요소
7. 속성 선택자
<input type="text" value="HEROPY"> <input type='password' value='1234'> <input type='text' value='ABCD' disabled> <span data-fruit-name="apple">사과</span>[type] { color: red; } [type="password"]{ color: red; } [data-fruit-name]{ color: red; }
- [ ]안에 속성의 이름을 넣으면 해당 요소 선택을 할 수 있다
- [ ]안에 ATTR=VALUE를 넣어주면 특정 속성 중 value에 해당하는 부분만 선택할 수 있다.
- 전역속성인 data를 이용해서도 속성 선택자 활용이 가능하다.
8. 스타일 상속
스타일 상속
<div class='animal'>동물 <div class='tiger'>호랑이</div> <div class='lion'>사자</div> <div class='elephant'>코끼리</div> </div>.animal { color: blue; }
부모요소에 적용된 스타일은 자식요소에도 상속되어 적용된다.
상속되는 CSS속성은 보통 글자/문자 관련 속성 (BUT 모든 글자/문자 속성은 아님!)
- font-style : 글자 기울기
- font-weight : 글자 두께
- font-size : 글자 크기
- line-height : 줄 높이
- font-family : 폰트(서체)
- color : 글자 색상
- text-align : 정렬
강제 상속
<div class="parent"> <div class="child"></div> </div>.parent { width:300px; height:200px; background-color: red; } .child { width:100px; height:inherit; background-color:inherit; position: fixed top:100px; right:10px; }
- 상속되지 않는 속성도
inherit이라는 값을 사용하여 강제 상속 시킬 수 있다. - 자식에게는 적용되지만 후손에게는 적용되지 않음
- 위의 코드에서 height 값은 자동으로 상속되지 않기 때문에 부모의 높이와 자식의 높이를 맞추고 싶을때 사용할 수 있다.
9. 선택자 우선순위
우선순위란?
- 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법
- 점수가 높은 선언이 우선함!
- 점수가 같으면, 가장 마지막에 해석된 선언이 우선함!
- 되도록이면 인라인작성이나, !important는 사용하지 않는것이 좋다(수정이 매우 어려워짐)
- !important
- 인라인 선언
- ID 선택자
- Class 선택자
- 태그 선택자
- 전체 선택자
be driven