TIL 221205 nth-child(), html 텍스트 레벨 요소

🎆 오늘 한 것

• 수업 들은 것 중 생소한 것 정리하고 복습
• tailwind 반응형 적용해보기
• 구멍난 마크업 언어 지식 채워넣기 2 (이듬 강의)
• 리덕스 강의 두 개 봄
• 알고리즘 강의 딱. 하나 봄

🙄 오늘 하려고 했는데 못한 것

• 타입스크립트 책 읽기
• 딥다이브 안 읽음ㅎㅎ;

✨ 구조 선택자 nth-child()

even, odd, 2n 이런 건 알고 있었는데 뭐가 많더라 이것도

li:nth-child(n+3){}
/* 3번째 요소부터 적용시키겠다는 의미 */

li:nth-child(n+2){}
/* 첫번째꺼 제외하고 나머지에 전부 */

li:nth-child(-n+3){}
/* 3번째 요소까지만 */

li:nth-child(n+2):nth-child(-n+4){}
/* 2번부터 4번까지만 */

맨날 스타일 싹 다 먹여놓고 first-child 선택해서 특정 스타일만 빼주는 식으로 css를 두 줄 작성했는데 nth-child(n+1)를 사용하면 두 줄 쓸 필요없이 한 줄로 작성이 가능하다. 처음 알게 된 꿀팁!

nth-child() 연습해볼 수 있는 사이트

✨ tailwind 페이지 완성

이게 맞는지는 모르겠지만... 일단 반응형까지 완성했다. 예상보다 오래 걸리긴 했지만... 이틀정도 할애한 거니 나쁘지 않다고 생각한다.

테일윈드는 반응형 디폴트? 라고 해야되나... 디폴트 단위..? 하여튼 그게 min-width 더라. 나는 지금까지 max-width로만 해봐서 엄청 헤맸다ㅠㅠ 웹말고 모바일 화면부터 구현할 걸 싶었다.

오...?

css가 너무너무 길어지는데 이렇게 활용하는 게 아닌 것 같음... 최대한 쓸 데 없는 css 줄이려고 했는데도 쉽지가 않다. 빨리 스터디원들이랑 이야기 나눠보고싶다😥😥😥

현재 궁금한 점 : 원래 이렇게 css가 미친듯이 길어지나요...? 아니라면 저는 뭘 놓치고 있는 걸까요...

✨ 섹션,메인요소 / 텍스트 레벨 요소

개념은 알겠는데 정작 써야될 때 못 쓰고 있는 것들에 대해 가볍게 써봄

🎇 aside, section, article

🚀 aside

aside는 본문과 간접적으로만 연관된 영역, 즉 본문 내용의 추가 정보를 나타내는 요소,,, 지워도 본문 영역에 영향 X

본문이랑 직접적으로 연관된 내용이면 aside 사용은 지양하는 게 좋음
보통 광고 영역에 잘 쓰인다고 한다.

🚀 section

큰 카테고리를 분류할 때 사용. 일반적인 컨테이너 요소 X
문서 개요에서 나열되는 경우에만 적절하다고 함. 문서에서 목차처럼 개요표가 확실히 나올 수 있는 경우나 주제별로 그룹화된 컨텐츠를 묶을 때

ex. 메인페이지의 news 섹션, vod 섹션, 공지사항 섹션 뭐 이런 거

그냥 일반적으로 묶어주기만 할 거면 div나 span을 쓰는 게 맞음

🚀 article

페이지의 다른 페이지나 다른 영역에 언제든 독립적으로 갖다 붙일 수 있는 영역... 블로그 게시글, 신문 기사글 등등 이런 용도에 잘 쓰임

🎇 sup, sub, abbr, s, mark, small

🚀 sup, sub

- sup 윗첨자

a2 + b2 = c2

<p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>

위키사이트 볼 때

이런 각주 용도로 쓸 수도 있다고 한다 (정작 여기는 걍 a태그였음...)

- sup 아래첨자
C8H10N4O2

<p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>

🚀 mark

사용자 검색 결과에서 검색한 키워드를 시각적 하이라이트 줄 때 주로 사용

🚀 abbr

읽는 사람에게 익숙하지 않을 수 있는 줄임말 같은 거 사용할 때 <abbr> 주로 사용

🚀 s

strikethrough, 취소선. 더 이상 정확하지 않은 부분에 사용하라고 함.

아무거나 검색해서 가져온거

예시로 할인가 같은 거 쓸 때 15,000원 이런 식으로 적혀있는 걸 볼 수 있음

🚀 small

덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냄

🎆 내일 할 것

• 수업 들은 거 정리하고 복습
• 리덕스 강의 보기
• 타입스크립트 책 읽기
• 이듬 그룹핑 요소, 임베디드 요소, 테이블 요소 보기

📌 킵해놓을 todo

• preload / modulepreload / prefetch 공부... 언제하지?

📝 오늘의 일기

아휴 일주일 동안 조가 네번이나 짜졌는데(오늘도 또 수업 시간 후 스터디 조가 생겼음) 극내향인인 나는 정말 힘들었다. 조원분들이 싫다는 게 아니고 그냥 갑자기 너무 많은 새로운 사람을 마주하니까 기가 쫙!!! 빨려버림ㅠㅠ

대체 자기소개만 몇 번을 하는 거야~ 흑흑흑😂 저는 00살이고 00과를 졸업했구요, 퍼블리셔 어쩌고저쩌고를 하다가 프론트를 준비하게 되었습니다 어쩌고.... 대본 하나 만들어놓든지 해야지

그치만... 개발자... 커뮤니케이션 능력이 좋아야 할 수 있으니까... 사회성 기르기 연습을 할 수 있는 좋은 기회이라고 생각해야지😏😏...

오늘도 알차고 유익한 하루였다.

📌 오늘의 tmi(?)
우리의 자바스크립트 강의를 맡으실 범쌤은 자바스크립트 애니메이션 대박 고수시라고 함. 많이 배워야지

📌 메모

yarn add redux react-redux

까먹을 것 같아서 메모