Today Topic : CSS basic
🗝 Keywords
✅ CSS 기본문법
✅ CSS 선언 방식
✅ 기본 선택자
✅ 복합선택자
✅ 꾸며주는 가상클래스 선택자
✅ 특정 상태를 나타내는 가상클래스 선택자
✅ 가상요소 선택자
✅ 속성 선택자
✅ 스타일 상속, 강제 상속
✅ 선택자 우선순위
1. CSS 기본문법
<!DOCTYPE html>
<html lang="en">
<head>
<style>
span {
font-size : 50px;
color : red;
}
/*주석*/
</style>
</head>
<body>
<span> ctaaag </span>
</body>
</html>🚀 선택자, 명령, 주석
- 선택자 { 속성: 값; }
- 선택자 { 속성: 값; 속성: 값; }
- 스타일 범위 시작과 끝은 중괄호로 표시하며, 여러 가지 속성이 한 선택자에 들어갈 수 있음.
- 주석처리는 커맨드 / 하면 자동으로 입력 됨.
2. CSS 선언 방식
2-1) 내장방식
<style>
div{
color: red;
margin: 20px;
}
</style>html 내부의 스타일태그에다가 선언하는 방식. 기본적으로 프론트엔드는 html/css/javascript를 분리한다.
2-2) 링크방식
<link rel="stylesheet" href="./css/main.css">외부 링크를 통해 css 적용하는 방법 : 병렬로 입력이 되는 방식. 즉 해당 링크에 있는 css가 동시에 적용됨
2-3) 인라인방식
<div style="color: red; magin: 20px;"></div>
- html 요소의 스타일 속성을 통해 직접 작성하는 방식. 선택자가 없음.
- html 인식에 있어 우선순위가 있기 때문에 추후 유지보수하는데 어려움을 겪을 수 있기 때문에 비추천
2-4) import 방식
- css 내의 다른 css 파일을 연결하는 방식. 직렬로 입력이 되는 방식으로 html에 메인으로 연결되어있는 css링크가 우선 반영되고, 순서대로 import된 css파일이 적용이 됨.
- 임포트 규칙 사용시에는 @import url("파일 경로")로 입력해야함.
3. 기본 선택자
* {
color: red;
}
abc {
color: red;
}
.class {
color: red;
}
#id {
color: red;
}
🚀 기본선택자
- 애스터리스크 : *는 모든 요소를 선택하는 선택자. 보통 복합 선택자와 함께 특정 영역의 모든 것을 선택할 때 사용된다.
- 태그선택자 : 태그이름을 입력하면 됨.
- 클래스선택자 : 클래스 속성 값에 대한 css 적용
- 아이디선택자 : id 속성 값에 대해서 css 적용
4. 복합선택자
<!DOCTYPE html>
<html lang="en">
<head>
<style>
span.orange {
color: red;
}
ul > .orange {
color:red;
}
div .orange {
color: red;
}
.orange + li {
color: orange;
}
.orange ~ li {
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class='orange'>오렌지</li>
<li>망고</li>
<li>사과</li>
</ul>
<div>당근</div>
<p>토마토</p>
</div>
<span class="orange">오렌지</span>
</body>
</html>🚀 복합선택자
- 일시선택자 : 선택자 두 개를 동시에 만족하는 요소를 선택하려면 tag.class(or id)를 이용해서 진행
- 자식선택자 : abc > xyz라면 선택자 abc의 자식요소 xyz를 선택하는 것. 그럴 경우에는 해당 클래스만 색깔이 바뀌게 됨
- 하위 선택자 : 선택자 abc의 하위요소 xyz 선택. '띄어쓰기'가 선택자의 기호. 그래서 띄어쓰기도 잘 써야함!!
- 인접 형제 선택자 :선택자 abc의 다음 형제 요소 xyz 하나를 선택. 즉 위에서는 망고만 오렌지색으로 바뀜
- 일반 형제 선택자 : 선택자 abc의 다음 형제 요소 xyz 모두를 선택. 즉 망고,사과 모두 빨간색으로 바뀜
5. 꾸며주는 가상클래스 선택자
5-1) hover
.box {
width: 100px;
height: 100px;
background-color: orange;
transition: 1s;
}
.box:hover {
width:300px;
background-color: royalblue;
}🚀 hover 가상 클래스선택자
- 선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택됨.
- 크기, 색상 등 다양하게 사용할 수 있음. 굉장히 많이 사용하니까 잘 알아둘 것
- 모든 가상클래스 선택자 앞에는 : 콜론이 붙게 됨.
🚀 transition
- 클래스 선택자에 트랜지션 효과를 만들게 되면 해당 클래스가 변화하는 속도를 지정할 수 있음.
- 위와 같은 경우에는 1초 동안 천천히 변화하는 효과를 줄 수 있다는 것.
5-2) active
a : active {
color: red;
}🚀 active 가상 클래스선택자
- active는 실제로 행동. 즉 마우스를 클릭을 할 때에만 적용이 됨.
- 마우스 클릭 버튼을 때면 원래 상태로 돌아옴
5-3) focus
<div class = "box" tabindex='-1'></div>
input:focus {
background-color: orange;
}
🚀 focus 가상클래스 선택자
- 포커스가 되면 특정 효과를 진행하게 됨. focus가 아닌 요소에 대해서는 적용이 안 됨.
- 만약 포커스가 안되는 요소에 tabindex 속성을 걸고 값을 -1을 넣어주면 가능함.
- 포커스는 동시에 작동하지 않고 한 페이지에서 클릭 한 부분에만 적용됨.
- 보통 인풋요소,셀렉트,textarea와 함께 사용이 됨. 인풋요소가 포커스되면 배경색상으
6. 특정 상태를 나타내는 가상클래스 선택자
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits span:first-child {
color:olive;
}
.fruits h3:last-child{
color:beige;
}
.fruits *:nth-child(2n) {
color: red;
}
.fruits *:nth-child(3) {
color: blue;
}
.fruits *:not(span) {
color: purple
}🚀 선택자:first-child
- .fruits span:first-child {} span 선택자가 형제 요소 중 첫째라면 선택하는 것.
- 만약 첫째가 아니면 해당 부분이 적용이 안됨
- 예를 들어 .fruits div:first-child 라고 하면 적용이 안되는 것
🚀 선택자:last-child
- .fruits h3:last-child {} last 선택자가 형제 요소 중
🚀 선택자:nth-child(n)
- .fruits *:nth-child(n) {} 선택자가 형제 요소중 (n)째라면 선택.
- 여기서 애스터리스크가 붙었기 때문에 전체 요소 중에서 2째 자식요소만 선택됨.
- 만약 n이라는 것에 2n 이런식으로 붙이면 n에 0부터 대입이 되어서 2의배수에 적용이 되는 것.
- 그렇다면 2n+1은? 홀수이다
- 그렇다면 n+2는? 첫번째를 제외하고 2번째 부터 적용
🚀 ABC:not(선택자)
- 선택자가 아닌 ABC요소 선택을 하는 것.
7. 가상요소 선택자
.box::before {
content: "앞!";
}
.box::after {
content: "뒤!";
}
.box::after {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: royalblue;
}🚀 .선택자::
- before는 선택자 내부 앞에 인라인(글자)요소 내용을 삽입
- after는 반대로 선택자 뒤에 인라인 요소를 삽입함.
- 내용을 명시할 때는 content 속성을 사용해야함. before,after를 쓸 때 꼭 들어가야함. content에 대한 내용을 비워두더라도 꼭 써야 before,after가 적용됨.
- 인라인 요소에 문자를 넣지 않고 블록요소로 바꿔서 크기,높이,색상을 설정해볼 수도 있음.
8. 속성 선택자
<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;
}
🚀 속성을 포함한 요소 선택
- [ ]안에 속성을 넣으면 해당 요소 선택을 할 수 있음
- [ ]안에 value를 넣어주면 특정 요소 중 value에 해당하는 부분만 선택할 수 있음.
- 대표적인 전역속성인 data를 이용해서도 특정 부분을 선택하는 것이 가능함.
9. 스타일 상속, 강제 상속
<div class='animal'>동물
<div class='tiger'>호랑이</div>
<div class='lion'>사자</div>
<div class='elephant'>코끼리</div>
</div>.animal {
color: red;
}🚀 스타일 상속
- 부모요소에 적용된 스타일은 상속 되어있는 자식요소에게 까지 적용이 된다.
- 상속되는 CSS속성은 보통 글자/문자 관련 속성 (단, 모든 글자/문자 속성은 아님!)
- 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:100px;
background-color:orange;
}
.child {
width:100px;
height:inherit;
background-color:inherit;
position: fixed
top:100px;
right:10px;
}🚀 강제 상속
- 부모요소에 자식요소의 크기가 따라서 가게 되는 것을 강제 상속임. 예를 들어, 위와 같이 높이를 설정했을 때 부모요소가 300px이기 때문에 자식요소는 본인이 갖고 있는 값을 무시하고, 300px이 적용됨.
- 그렇다면 height 값에 inherit를 붙이면 상속이 됨.
- position을 픽스하면 요소의 위치가 고정이 됨.
10. 선택자 우선순위
선택자 우선순위
- 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법
- 점수가 높은 선언이 우선함
- 점수가 같으면, 가장 마지막에 해석된 선언이 우선함!
- 인라인 작성이나, important는 나중에 수정이 거의 불가능하므로 왠만하면 사용하지 않기로
프로그래밍으로 지속가능한 세상을 꿈꾸며