[패캠]프론트엔드 - HTML 개요 / HTML 핵심 정리 / CSS 개요

📌 html

부모와 자식관계

자식 요소

• 바로 아래에 감싸고 있는 요소만을 지칭

하위(후손) 요소

• 감싸고 있는 모든 요소를 지칭

빈태그

• 빈태그 뒤에 /를 입력하는게 안정성이 높다
• 안 붙이면 나중에 프레임워크를 배울 때 오류가 나는 상황이 생길 수 있으니 붙이는 습관을 들이자

인라인 요소

• 글자처럼 취급된다고 생각하면 쉬움
• 인라인 태그를 줄바꿈하면 요소들의 사이에 띄어쓰기가 생김

<span>dd</span>
<span>aa</span>

<!--이러면 dd aa이렇게 띄어쓰기가 들어감-->

• 인라인 요소는 위아래 여백을 추가할 수 없다. (margin, padding 둘 다, 좌우는 가능)
• 자식요소로 블록요소를 사용할 수 없다

전역 속성

title

• 요소의 정보나 설명을 지정

style

• 요소에 적용할 스타일을 지정

data

• 요소에 데이터를 지정
• data-이름="데이터"

class, id

📌 css

선언 방식

@import방식(직렬 연결)

• css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식

@import url("./box.css");

• @import 코드가 읽히기 전까지는 파일이 html과 연결되지 않기 때문에 연결이 지연된다고 표현할 수 있다. 의도적으로 이를 유도하기 위해 사용할 수 있으나 잘 사용하지 않는다

내장 방식, 인라인 방식, 링크 방식(병렬 연결)

복합 선택자

일치 선택자

• 두 선택자를 동시에 만족하는 요소를 선택

span.orange {
	color: red;
}

/* span태그 안에 .orange클래스 */

자식선택자

• 자식 요소를 선택

ul > .orange {
	color: red;
}
/* ul태그의 자식 중 .orange클래스 */
/* 같은 .orange클래스를 가지고 있더라고 부모가 ul태그가 아니라면 선택되지 않는다 */

하위(후손) 선택자

• 하위 요소를 선택('띄어쓰기'가 선택자의 기호)

div .orange {
	color: red;
}

/* 일반적으로 하위 선택자를 많이 사용하고,
좀 더 특정해서 선택을 하고 싶으면 자식 선택자를 사용한다.*/

인접 형제 선택자

• 다음 형제 요소 하나를 선택

일반 형제 선택자

• 다음 형제 요소 모두를 선택

.orange + li {
	color: red;
}

/* .orange클래스 뒤에 li태그가 많더라도 가장 가까운 하나만 선택된다*/

.orange ~ li {
	color: red;
}

/* .orange클래서 뒤에 있는 모든 li태그가 선택된다(단, 형제요소만 선택)*/

가상 클래스

아래 세가지는 어떠한 행동을 했을 때 동작하게 하는 선택자이다

:hover

• 요소에 마우스를 올리면 동작

:active

• 요소를 마우스로 클릭하면 동작

:focus

• 요소가 포커스가 되면 동작
• html 대화형 콘텐츠에만 적용할 수 있다 (input, a button, label, select 등)
• tabindex 속성을 사용한 요소도 적용할 수 있다

<div tabindex="-1"></div>

다음의 가상 클래스 선택자는 요소를 선택하는 선택자이다

:nth-child(n)

• 형제 요소 중 (n)째라면 선택
• n은 0부터 시작한다

A:not(B)

• A를 선택하는데 그 중 B는 빼고 선택

가상 요소

::before

• 요소 내부의 앞 쪽에 내용(content)를 삽입
• 인라인 요소

::after

• 요소 내부의 뒤 쪽에 내용을 삽입
• 인라인 요소

속성 선택자

[ABC]

• 속성 ABC를 가진 요소를 선택
• disabled처럼 특정한 속성을 가진 경우에 적용하기 좋으나 type, name등 흔한 특성을 가진 요소에는 적합하지 않다

스타일 상속

• 부모 요소에 적용된 속성이 자식 요소에 적용되는 것
• 상속되는 css속성들은 모두 글자/문자에 관련된 속성이다
• 하지만 글자/문자에 관련된 모든 속성이 상속이 될 수 있는 것은 아니다

강제상속

• inherit 속성을 사용해 강제로 부모 요소의 속성을 상속할 수 있다

선택자 우선순위

• :not은 점수가 없다
• 가상 요소 = 태그
• 가상 클래스 = 클래스