내가 몰랐던 CSS, HTML

1<sup>st</sup>, 2<sup>nd</sup>

H<sub>2</sub>O, x<sub>n</sub>

<table>
    <caption>1에서 9까지의 숫자들</caption>
		...
  </table>

전화 <a href="tel:010-1234-5678">010-1234-5678</a>

<input 
      id="fileIp"
      type="file"
      accept="image/png, image/jpeg"
      multiple
    >

<select id="shopping">
    <optgroup label="과일">
      <option value="f_apl">사과</option>
      <option value="f_grp">포도</option>
      <option value="f_org">오렌지</option>
    </optgroup>
    <optgroup label="채소">
      <option value="v_crt">당근</option>
      <option value="v_tmt">토마토</option>
      <option value="v_ept">가지</option>
    </optgroup>
    <optgroup label="육류">
      <option value="m_bef">소고기</option>
      <option value="m_prk">돼지고기</option>
      <option value="m_ckn">닭고기</option>
    </optgroup>
  </select>

/* 자식(1촌 자손) 결합자 */
.outer > li {
  color: dodgerblue;
}

/* 뒤따르는 모든 동생들 결합자 */
.starter ~ li {
  font-style: italic;
}

/* 뒤따르는 바로 다음 동생 결합자 */
.starter + li {
  font-weight: bold;
}

/* 첫 번째, 마지막 요소 가상 클래스 */
ol li:first-child,
ol li:last-child {
  color: yellowgreen;
}

/* ~가 아닌 요소 가상 클래스 */
.outer > li:not(:last-child) {
  text-decoration: line-through;
}

ul:not(.outer) li {
  font-weight: bold;
}

/* ~번째 요소 가상 클래스 */
/* #, #n, #n+#, odd, even 등 시도해보기 */
ol li:nth-child(3) {
  font-weight: bold;
  color: deeppink;
}

p {
  /* capitalize, uppercase, lowercase */
  text-transform: none;
}

ul {
  list-style: circle; // "👉" custom 가능
}

/* li별로 지정하는 것도 가능 */
ul > li:first-child {
  list-style: "🚩 "
}

ol {
  list-style: lower-alpha;
}

<div style="order: 2;">1</div>

/* 속성 값을 기준으로 선택 */
a[href="https://binary01.me"] {
  color: #ff4e00;
  font-weight: bold;
}

/* 특정 속성이 있는 요소 선택 */
input[disabled]+label {
  color: lightgray;
  text-decoration: line-through;
}

/* 속성값이 특정 텍스트를 포함하는 요소 */
span[class*="item"] {
  text-decoration: underline;
}

/* 속성값이 특정 텍스트로 시작하는 요소 */
span[class^="fruit"] {
  color: tomato;
}
span[class^="vege"] {
  color: olivedrab;
}

/* 속성값이 특정 텍스트로 끝나는 요소 */
span[class$="-1"] {
  font-weight: bold;
}

/* 체크된 것 */
input[type=radio]:checked+label {
  color: tomato;
  font-weight: bold;
}

/* 활성화된 것 */
input[type=radio]:enabled+label {
  text-decoration: underline;
}

/* 비활성화된 것 */
input[type=radio]:disabled+label {
  color: lightgray;
  text-decoration: line-through;
}

/* 인풋 등이 클릭되어 포커스된(입력을 받는) 상태 */
input[type="text"]:focus {
  /* border 밖의 선 (박스 요소가 아님) */
  outline: 2px solid dodgerblue;
}

/* 필수 입력요소 */
input:required {
  border-color: orangered;
}

/* 값이 유효한 입력요소 */
input[type="email"]:valid {
  border-color: green;
}

/* 값이 무효한 입력요소 */
input[type="email"]:not(:valid) {
  border-color: purple;
}

[class*="focus"]:focus {
  outline: 2px solid deeppink;
}
.tab-focus:focus,
.no-focus:focus {
  outline: none;
}

/* 탭으로 포커스된 요소에 적용 */
/* 브라우저 지원 확인 */
[class*="tab-focus"]:focus-visible {
  outline: 2px solid dodgerblue;
}

/* 부모 요소 내 첫 번째 ~요소 */
b:first-of-type {
  text-decoration: overline;
}

/* 부모 요소 내 마지막 ~요소 */
i:last-of-type {
  text-decoration: line-through;
}

/* 부모 요소 내 N번째 ~요소 */
b:nth-of-type(2) {
  text-decoration: underline;
}

/* 부모 요소 내 유일한 ~요소 */
div :only-of-type {
  text-decoration: overline line-through underline;
}

/* 부모 요소 내 종류 무관 유일한 요소 (독자) */
div :only-child {
  text-decoration: wavy underline tomato;
}

<main>
    <nav>nav</nav>
    <aside>aside</aside>
    <section class="sec-1">.sec-1</section>
    <section class="sec-2">
      .sec-2
      <div>
        살어리 살어리랏다<br>쳥산애 살어리랏다<br>멀위랑 다래랑 먹고<br> 쳥산애 살어리랏다<br>얄리얄리 얄랑셩<br>얄라리 얄라<br>
        우러라 우러라 새여<br>자고 니러 우러라 새여<br>널라와 시름 한 나도<br>자고 니러 우니로라<br>얄리얄리 얄라셩<br>얄라리 얄라<br>
        가던 새 가던 새 본다<br>믈 아래 가던 새 본다<br>잉무든 장글란 가지고<br>믈 아래 가던 새 본다<br>얄리얄리 얄라셩<br>얄라리 얄라
      </div>
    </section>
    <section class="sec-3">.sec-3</section>
    <footer>footer</footer>
  </main>

body { margin: 0; }
main { width: 100vw; }

main > * {
  padding: 0.8em;
  color: slateblue;
  background-color: lavender;
}
.sec-2 div {
  margin: 2em;
  padding: 1.6em;
  line-height: 2.8em;
  font-family: serif;
  color: #555;
  background-color: white;
}

main {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: 80px 200px auto 200px;
  gap: 12px;
}

nav {
  grid-column: 1 / -1;
}
aside {
  grid-column: 1;
  grid-row: 2 / span 2;
}
.sec-1 {
  grid-column: 2 / -1;
}
footer {
  grid-column: 1 / -1;
}

<section class="result">
      <section style="scroll-snap-type: y;">
        <div class="_1" style="scroll-snap-align: start;"></div>
        <div class="_2"></div>
        <div class="_3"></div>
        <div class="_4"></div>
        <div class="_5"></div>
        <div class="_6"></div>
        <div class="_7"></div>
        <div class="_8"></div>
        <div class="_9"></div>
        <div class="_10"></div>
      </section>
</section>