코드스테이츠 - 유어클래스 콘텐츠를 참고하여 작성하였습니다.

[Day 1]

2023년 6월 26일

Unit1 - [HTML] 기초

시멘틱 요소의 종류

• <article> : 독립적이고 자체 포함된 콘텐츠를 지정한다.
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
• <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
• <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.
• <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <ul>을 넣어 목록 형태로 사용한다.
• <main> : 문서의 주된 콘텐츠를 표시한다.
  
  

Unit2 - [CSS] 기초

attribute 선택자

attribute 선택자는 같은 속성을 가진 요소를 선택.

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식 선택자

header > div { }

<header>
	<div> <!-- 선택 -->
        <p>
            <div></div>
        </p>
	</div>
	<div> <!-- 선택 -->
        <p>
            <div></div>
        </p>
	</div>
</header>

후손 선택자

header div {}

<header>
    <div><!-- 선택 -->
        <p>
            <div><!-- !!선택!! -->
            </div>
        </p>
    </div>
    <div><!-- 선택 -->
        <p>
            <div><!-- !!선택!! -->
            </div>
        </p>
    </div>
</header>

형제 선택자

section ~ p { }

<header>
	<section></section>
    <p></p> <!-- 선택 -->
    <p></p> <!-- 선택 -->
    <p></p> <!-- 선택 -->
</header>

인접 형제 선택자

section + p { }

<section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택

<header>
    <section></section>
    <p></p> <!-- 선택 -->
    <p></p>

    <p></p>
</header>

가상 클래스 선택자

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

UI 요소 상태 선택자

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

구조 가상 클래스 선택자

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 선택자

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 선택자

input[type="text"]:valid { }
input[type="text"]:invalid { }

• :valid: 규칙에 맞는 값을 입력한 경우
• :invalid: 규칙에 맞지 않은 값을 입력한 경우