Today Topic : CSS basic

🗝 Keywords

✅ JS와 Web

✅ JS의 Server 활용(node.js)

✅ Html 태그 사용의 중요성

✅ Html outline

✅ 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는 나중에 수정이 거의 불가능하므로 왠만하면 사용하지 않기로

Author And Source

이 문제에 관하여(패스트캠퍼스 메가바이트스쿨 Day7 (2주차 화요일 - CSS basic)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ctaaag/패스트캠퍼스-메가바이트스쿨-Day7-2주차-화요일-CSS-basic

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

패스트캠퍼스 메가바이트스쿨 Day7 (2주차 화요일 - CSS basic)