Practice_HTML

#확장 프로그램

1. live server
2. auto rename tag
3. beautify

#경로

상대경로
./ : 주변(생략가능)
../ : 상위 폴더

절대경로
http(https) : 원격
/(//)

#원래 있던 css reset하기

https://www.jsdelivr.com/package/npm/reset-css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

#Emmet 문법

div>ul>li*4{&}

<div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>

-> Emmet 문법으로 1234를 출력해봤음.

#태그 이름

<태그 class="이름"></태그> - 요소를 지칭하는 중복 가능한 이름

css에서 class는 .

<태그 id="이름"></태그> - 요소를 지칭하는 고유한 이름

css에서 id는 #

#@import - 직렬

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

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

#link - 병렬

#클래스 선택자

✔️ 일치 선택자, 복합
선택자를 동신에 만족하는 요소 선택

✔️ 자식 선택자, 복합
선택자의 자식 요소 선택

✔️ 하위(후손) 선택자, 복합
선택자의 하위 요소 선택. '띄어쓰기'가 기호임.

✔️ 인접 형제 선택자, 복합
선택자의 다음 형제 요소 중 하나 선택

✔️ 일반 형제 선택자, 복합

선택자의 다음 형제 요소 모두 선택

#가상클래스 선택자

✔️ hover

선택자 요소에 마우스 커서가 올라가 있는 동안 선택

✔️ active

선택자 요소에 마우스를 클릭하고 있는 동안 선택

✔️ focus

선택자 요소가 포커스되면 선택

✔️ first child

선택자가 형제 요소 중 첫째라면 선택

✔️ last child

선택자가 형제 요소 중 막내라면 선택

✔️ nth child

선택자가 형제 요소 중 n번째라면 선택

<div class="fruits">
	<span>딸기</span>  
	<span>사과</span>  //이 문장만 출력됨.
	<h3>망고</h3>  
</div>

.fruits *:nth-child(2){
	color:red;
}

• 2n : n은 0부터 시작(짝수번째만 선택)
• 2n+1 : n은 0부터 시작(홀수번째만 선택)

✔️ not 부정선택자

선택자가 아닌 다른 요소 선택

#가상 요소 선택자

✔️ before
선택자 요소의 내부 앞에 내용을 삽입.

✔️ after

선택자 요소의 내부 뒤에 내용을 삽입.

-> parent, child를 통해 상속 공부함.