속성 선택자(Selector)
이제 선택자 심화부분을 배워보자!
1. emmet에서 사용했던 방법(p[one=two])
처럼 Class의 특징을 가지고 선택자를 지정할 수 있다!
예시:
*/a태그의 url을 직접 지정하여 select/*
a[href="http://www.paullab.co.kr"]
{
font-size: 48px;
}
*/class명을 직접 지정하여 select(물론 이렇게 쓸 일은 없다. 보통은 ".클래스명" 을 사용.)/*
p[class="paullab"] {
font-size: 48px;
}CSS Combinator
자세한 내용은 아래 참고
https://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
FLEX
직관적으로 FLEX 개념 확인하기
https://codepen.io/enxaneta/full/adLPwv
Flexbox playground
...
codepen.io
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
실습하며 FLEX 개념 확인하기
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'IT,Programming > TIL' 카테고리의 다른 글
| 리엑트에서 카카오톡 API 공유 시 에러발생.(Helmet, undefined) (0) | 2022.08.05 |
|---|---|
| 리엑트에서 카카오톡 메세지 공유 API 사용 방법 (0) | 2022.08.05 |
| 프론트엔드 개발자가 되기 전에 알았으면 좋았을 20가지 (0) | 2022.06.17 |
| TIL_네트워크 7계층 (0) | 2022.03.01 |