List

• ol - ordered list
  : 목록에 숫자를 달아주는데, 자동으로 넘버링 해주어
  숫자를 쓰지 않아도 자동입력된다.
• ul - unordered list
  : 숫자 없는 목록
• li - 목록 아이템
  : 항상 ol, ul로 감싸주어야 한다

li태그의 스타일을 해제하고 싶을 땐
list-style: none; 속성을 적용하면 된다.

li를 감싸고있는 상위태그에 테두리 속성을 추가해주면
목록 옆에 세로줄이 있는 것 같은 효과를 줄 수 있다
(실제로 웹 개발에서 많이 쓰이는 방식이라고 한다)

홀수, 짝수 구분 선택자

selector는 tag, .class, #id 모두 가능
목록 요소의 가장 마지막 아이템 혹은 홀수, 짝수 아이템을 특정지을 수 있는 CSS!

table

하람아 table 태그는 질리도록 봐서 알지?
전에 제일 많이 만들었던 화면 중 하나가 테이블이 포함된 화면이었으니까!!!!

보고서 화면 만들 때 colspan, rowspan 생각하면 어으..
무튼!!

• th : table heading (가운데정렬, 굵음 효과)
• tr : table row
• td : table data

셀 병합

column은 열, row는 행!

(셀을 합쳤을 때에는 합쳐진 셀의 갯수만큼 태그들을 하나로 통일하고 지워줘야 한다)

• 기둥들을 합치고 싶다면? 👉🏻 colspan!
• 행을 합치고 싶다면? 👉🏻 rowspan!

input, Textarea

사용자가 직접 텍스트를 입력할 수 있는 태그!

• input
  : text, password, number 등의 type을 가지며,
  : placeholder로 도움말 효과를 줄 수 있다
  (실제 입력된 값은 X)
  : 시작태그, 끝태그 구성이 아님
  (하나의 태그 = 하나의 요소)

• textarea
  : input 보다 더 긴 텍스트를 입력받을 때

input, textarea, button 모두 inline 요소
👉🏻 각 태그들을 block 성질의 div로 감싼 뒤 사용하면 한 줄에 나오지 않고,
그렇지 않을 경우 쭉 한 줄로 나열해서 나오게 된다

특정 선택자로 값을 가져오고 싶을 때

input::placeholder {
  color: #bbb;
}

input[type="text"] {
  color: black;
}

input[type="text"]::placeholder {
  color: red;
}

콜론 두개를 붙여주면 selector를 만들어 줄 수 있다.
기억으로는 input 태그 외에도 다양한 경우에
해당 태그 내에 위치한 텍스트 혹은 값을 가져오고 싶을 때
특정 선택자를 사용했던 것 같다
(자세한건 내 네이버 블로그에 다 있다.. 피땀눈물 흘리며 얻은 경험)

:hover

button:hover {
  opacity: 0.8;  // 백분율. 0 입력 시 아예 안보임
  display: block;
}

해당 버튼 위에 마우스가 올라가면

• 해당 요소를 불투명하게 만드는 경우.
• 안보이던 요소를 보이게 해주는 경우(display:none; 처리 된 태그도 있어야함)

등등... 다양하다

-hover 대상 + 다른 요소에 효과 주는 예제
: https://www.w3schools.com/howto/howto_css_display_element_hover.asp

javascript로 했었을 때에는 훨씬 간단했던 것 같은데
CSS만으로 하니까 정말 더 복잡하고 비효율적인 느낌이었다.

(이래서 프론트엔드 개발이 그렇게 신나게 발전하는 듯. 갈수록 더 재미있고 편해지니..!)

아, Repl.it 과제 풀다가 hover 관련해서 멘붕이 왔었다.

나의 경우는 위와 다르게 부모관계로 span과 div가 존재했는데, 죽어도 효과가 안먹었다

그 이유는 바로 + 때문!
CSS에서+는 형제 관계를 나타낸다고 한다 (!!)
내가 원하는 대로 표현을 하려면 부모관계에서 사용되는 >를 사용해주어야 했다.