TIL 07 | CSS selector

SammyJung·2021년 3월 16일
0
post-thumbnail

CSS를 공부하며 아주 기본적인 것인데 몰랐던 것들...이라 (스스로 생각했을 때) 간단한 것인데 몰랐어서 머리방망이 맞은 오늘 새롭게 알게된 것들을 정리한다!

부모와 자식 관계에 있는 태그를 CSS selector로 표기하는 방법

selector:first-child{ }
selector:last-child{ }
selector:nth-child(odd){ }
selector:nth-child(even){ }

여러개의 선택자를 지정하는 방법은 알고 있었는데,

부모 자식 관계에 있는 태그에서 첫번째 자식, 마지막 자식 그리고 홀수 짝수에 해당하는 각각을 지정할수 있는 표기 법이 있다는 것을 알게 되었다.

테이블 병합 (더이상 헷갈리지 말자)

행과 열을 나누는 tr td는 헷갈리지 않는데 이상하게도
계속 colspan 과 rowspan이 서로 결과가 헷갈리는 것...이다
개인적으로 왜인지 결과물을 보았을때 행과 열이 계속 헷갈려서 그냥 단순하게
병합 했을 때의 결과물 기준으로 기억하기로 하였다.

가로 병합(결과물기준 가로) - colspan(여러개의 열을 병합)
세로 병합(결과물기준 세로) - rowspan(여러개의 행을 병합)

input태그 placeholder에 스타일 적용

attribute인 placeholder에도 css의 selector에 표현 할 수 있다는 것

input::placeholder { color: pink; }

위와 같이 콜론 두개를 붙여서 selector를 만들어줄 수 있었다!
그렇지만 모든 속성값을 콜론으로 표현할수 있는 것은 아니다(주의주의!)

여러개의 input요소 중에서 text 타입인 input만 스타일을 입히고 싶다면?

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

클래스 이름 여러개 지정

<div class="english math>
english math 라고 클래스 이름을 지정했을 때 선택자로서 .english math 이렇게 하나의 선택자만을 지정한다고 착각했던 것이 있었다.!(id와의 개념의 혼동에서 빚어진 결과라 생각한다.)

위와 같은 경우 클래스 이름이 두개(english와 math) 이다. 공백으로 여러개의 클래스 네임을 연달아서 쓸 수 있다.
선택자에 .english{}만 Css를 적용하면 위의 해당 div에도 적용이 된다

함께 알아보는 클래스 네이밍 규칙

  • 시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외)
  • 네이밍의 조합은 '형태의미순서_상태'을 기본 순서로 사용한다.
    ex)btn_cancle_01_off.gif, msgbox-toggle-off
  • 네이밍 규칙의 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용한다.
  • 네이밍 규칙의 하이픈(-) 조합은CSS 네이밍에 사용하는 것을 권장한다. HTML 문서 안에서 언더스코어(_)의 조합은 form, input 엘리먼트등의 name 속성의 값을 사용하는 것을 권장한다. 이유는 클래스 네임이 자바스크립트의 변수 정의시 혼돈을 방지하기 위함이다.
  • 1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.
  • 동일한 이름의 네이밍의 경우 가장 뒤에 숫자를 사용하여 분류지어 사용할 수 있으며 첫번째 파일은 숫자를 생략하여 사용할 수 있다.
profile
안녕하세요! 프론트엔드 개발자 새미입니다:D

0개의 댓글