[CSS 정리 - 1] 기초 정리 - 셀렉터

오늘은 프로그래밍 관련 포스팅입니다!!


최근 HODLS.money 관련하여 Layout을 잡는데 생각보다 쉽지 않은 부분들이 있어서 다시한번 CSS에 대해서 정리를 해봅니다.

영상을 보면서 정리를 하고 있구요!!!
영상은 유튜버 드림코딩 by 엘리 님의 CSS 셀렉터, 기초 이론 정리. 포트폴리오 만드는 날까지! 글을 기반으로 합니다.

아는 부분도 다시 한번 전반적으로 정리한다는 마음으로 고고!!

CSS Documents Site!!!

https://developer.mozilla.org/ko/docs/Web/CSS/Reference


CSS(Cascading Style Sheet)

Selectors
  • * : 모든 elements
  • tag : div, img, input 등 elements들 명
  • #id : ID 로 정의된 element
  • .class : class로 정의된 element
  • : : state로 options, selected 등 state값
  • [] : 배열에 선택된 속성 값들만 적용하는 방법
* {
  color:black;
  font-weight:bold;
}

li {
  color:blue;
}

li#special {
  color:pink;
}

.red {
  background-color:yellow;
  width:100px;
  height:100px;
}

button:hover {
  color:red;
  background-color:beige;
}

a[href] {
  color:red;
}

/* = 뒤에 값과 일치하는 element를 선택 */
a[href="naver.com"] {
  color:gray;
}

/* ^를 넣으면 = 뒤에 값으로 시작하는 element를 선택 */
a[href^="google"] {
  color:yellowgreen;
}

/* $를 넣으면 = 뒤에 값으로 끝나는 element를 선택 */
a[href$=".net"] {
  color:purple;
}




결과물


마지막에 selectors에 대해서 제대로 공부를 했는지!! 게임 사이트 하나를 알려 주네요!!
보니까 재미있어 보여서 저도 참여를 해봅니다 ㅎㅎ

Selectors Game

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

@tipu curate

start success go! go! go! GOMCAM 20210523_0006190897.png

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 41.00%, steem power : 1807448.36, STU KRW : 1200.
@happyberrysboy staking status : 12340 KRWP
@happyberrysboy limit for KRWP voting service : 12.34 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 38.58 KRWP [55485219 - ce7dd3bcf797bf441ace0bf7cdf420ee49771549]

올해 목표에 코딩공부도 있었는데 강의만 몇 개 듣고 다 휘발되어 기억에서 사라졌네요;;;ㅠㅠ
파이팅입니다 햅뽀이님~!

오옷!!! 개발까이꺼 해볼만 하실겁니다!! 추천드려봅니다!! ㅎㅎ

즐거운 하루 보내세요~

독거형님도 행운 가득한 하루 되십시오!!