# css selector

bzeromo

⚡ HTML & CSS > 다 아는 내용이지만 정리 느낌으로... 📌 HTML 🔷 Hyper Text Markup Language 웹페이지를 작성하기 위한 언어 Hyper Text: 참조를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 Markup: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어 .html(확장자)를 가짐. 태그는 대소문자 구분이 없음. 엔터, 스페이스바, 탭이 적용되지 않음. ⭐ HTML 구성요소 🔷 태그 (Tag) HTML의 요소는 태그와 내용으로 구성 시작태그/종료태그로 쌍을 이루거나 시작 태그만 존재하는 태그도 있다. 각각의 시작태그는 속성과 속성값을 가질 수 있다. 🔷 주석 주석의 내용은 브라우저에 출력이 되지 않는다. HTML tag의 내용을 설명하기 위한 용도로 사용한다. 🔷 기본 구조 -

violet0585

상속 자손 결합자 (공백) 하위에 있는 태그, 즉 자식 태그들로 범위를 좁혀서 선택 자식 결합자 (>) 바로 아래 자식 태그만 좁혀서 선택 형제 일반 형제 결합자 (-) 내 뒤에 있는 형제 선택 (형제 = 같은레벨) ex) span ~ p : span 뒤에 있는 p 인접 형제 결합자 (+) 바로 뒤에 있는 형제만 선택 ex) span + p : span 바로 뒤의 p만 선택 형제를 선택할 때는 '순서가 중요하다! 선택자 1의 '뒤에'있는 선택자2를 선택 [선택자1]-[선택자2]

x5foddl

CSS 셀렉터의 우선순위 class 와 id를 동시에 가지는 html 요소라면? stye="" 1순위 #id 2순위 .class 3순위 p 4순위 display: block; display: block 뜻 : 가로행을 전부 차지해주세요 부모태그에 font-size 줘도 잘 먹는 이유? 일부 스타일은 inherit(상속) 되기 때문! 📒오늘의 숙제 👉 div 에 shadow 주기 >문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위

just-do-justin

제이쿼리의 특성 엘리먼트 선택 및 제어에 용이 > $(css 셀렉터).메소드() > ex) . -> class / # -> id 해당 css 셀렉터가 가리키는 모든 엘리먼트에 원하는 메소드(jquery가 제공하는 api)를 동작시킬 수 있습니다. 그리고 모든 제이쿼리 메소드들은 해당 메소드가 동작을 마치고 리턴될 때 자신이 제어했던 엘리먼트를 리턴하기 때문에, 메소드를 연속적으로 꼬리를 무는 것처럼 연결해서 사용할 수 있습니다. 이를 '체인'이라고 부릅니다. 크로스 브라우징 이슈 해결 웹 브라우저에 따라 지원해주는 메소드 및 api가 달라서 발생하는 이슈를 제이쿼리가 알아서 처리해주는 기능이 있습니다. 오늘의 개발지식 스크립트 언어 스크립트 언어는 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 의미합니다. 스크립트 언어는 응용 프로그램과 독립적으로 사용되며, 응용 프로그램을 구성하고 있는 언어와도 다른 언어로 사용되어, 최종 사용자가 응용

vieowf23r

섹션7: 선택자 Selector 선택자 스타일을 적용할 요소를 선택하는 몇가지 방법 Element Selector Class Selector ID Selector Descendent Selector CSS Specificity: 우선순위 selector: 선택자. 적용할 대상을 선택하는 것. Universal selector : 전부다 선택하기 Element selector : 요소 선택자 이미지, 버튼 등 요소를 선택 Seletor List: 여러개 선택 h1과 h2 둘다 적용 ID Selector id는 label과 input을 연결할 뿐 아니라 CSS의 모든 요소에 훅을 제공한다. CSS가 하나의 요소를 뽑아내도록 하는 것. 특정 부분만 골라서 CSS 적용할 수 있다. id는 띄어쓰기가 없어야하고 짧으면서 의미가 담겨있어야한다. css파일에서는 이렇게 #뒤에 id를 써서 id selector를 표현한다.

fejigu

👉🏻 CS 스터디 2주차, 이번주에는 CSS selector의 작동 원리 + CSS 적용 우선순위에 대한 학습 및 발표를 맡아서 학습을 하게 되었다. 1주차 다른 팀원분들의 발표를 들으면서, 단순히 발표 준비만 해오신 것이 아니라, 10분이랑 시간 동안 제대로 이해하시고 설명해주신다는 것이 느껴져 좋은 자극이 되었다. 공부를 하면서 알게 된 부분인데, 많은 분들이 기술 면접 답변으로 준비하시는 내용이였고, 이번 기회에 제대로 알아둬야겠다는 생각이 든다. #. CSS selector의 작동 원리 🔎 CSS selector란? selector, 즉 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다 📍그럼 CSS selector는 어떠한 원리로 동작할까? 이런 선택자는 크게 4가지로 분류할 수 있다. ID : #header, #foo

s2s2hyun

4) 후손 셀렉터 부모 태그 안에 있는 모든 하위 태그를 하위 요소 , 후손 요소라고 부름 부모 태그 안에 있는 모든 태그 중에 selector2 를 선택 ex) 5) 자식 셀렉터 : > 로 표시 부모 태그 (selector1) 안에 있는 바로 다음 레벨의 태그 중에 selector2를 선택 selector1 > selector2 ex) 6) 가상 클래스 종류 link :방문하지 않은 링크가 적용된 요소(예 : a 태그로 링크가 적용된 요소가 한번도 클릭되지 않은 경우) visited : 방문한 링크가 적용된 요소 (예:a 태그로 링크가 적용된 요소가 한번이라도 클릭된 경우) hover : 특정 요소에 마우스가 올라간 상태 active : 링크 요소를 클릭한 상태 (예: a 태그로 링크가 적용된 요소를 마우스로 클릭하고 있는 상태) focus : 특정 요소에 포커스가 있는 상태(예: input 박스 안에 꿈뻑꿈뻑 표시가 보이는 상태)

mocci

CSS 선택자 우선순위 스타일시트를 작성할 때 element, id, class 등을 사용하여 요소를 선택하는데 이때 우선순위가 있다. 우선순위는 각각의 선택자 점수표로 매겨진다. a = 선택자 중 id의 수를 세어 100자리에 놓는다. b = 선택자 중 class와 가상클래스(pseudo)의 수를 세어 10자리에 놓는다. c = 선택자 중 element의 수를 세어 1의 자리에 놓는다. d = 가상 element는 무시한다. 선택자 점수 표 선택자|a(=100)|b(=10)|c(=1)|우선순위 점수 합계 -|:-:|:-:|:-:|:-: * { }|0|0|0|0 li { }|0|0|1|1 ul li { }|0|0|2|2 ul ol+li { }|0|0|3|3 li.num { }|0|1|1|11 ul+ol li.num { }|0|1|3|13 li.num.list { }|0|2|1|21 #wrap { }|1|0|0|1

xmun74

CSS Units 단위 MDN, W3S 절대단위 px pixels 인쇄와 같이 화면의 사이즈가 정해진 경우에만 유리. 값이 고정된 절대단위여서 사용자 접근성 한계가 있다. pt points 등 상대단위 em, ex, rem, vw, vh, % 등 rem은 root 글자 크기에 따라 변경된다 1rem = 기본글자크기 / 2rem = 기본글자크기의 2배 100vw, 100vh 화면을 가득 채우며 스크롤 할때 사용 박스 1. block 화면 전체

tootb

css (cascading style sheets) 웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 웹사이트 사용자가 html문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할 프론트엔드 개발자에게 요구되는 css역량 컴포넌트 기능별로 묶어서 제작 화면의 구성이나 배치 (레이아웃 디자인) 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 (선택) 정렬이나 배색에 대한 감각 (선택) UX에 대해 고민해보고 UX가 잘 적용된 웹이나 앱을 분석해 본 경험 셀렉터: id & 클래스 id #으로 선택 한 문서에 단 하나의 요소에만 적용 특정 요소에 이름을 붙이는 데 사용 class .으로 선택 동일한 값을 갖는 요소 많음 스타일

daymoon_

CSS Diner? > 🤔 문제 링크 : CSS Diner CSS Selector에 대해 연습할 수 있는 사이트 📑 답안 🍽️ 단계 1 : plate 🍽️ 단계 2 : bento 🍽️ 단계 3 : #fancy > 📌 참고자료 디지털노마드 클래스(class)와 아이디(id)의 차이점 id : id를 지칭할 경우 #(샾)을 사용한다. class : c

banana

http://localhost:8080/javascript/ex04/exam10-6.html scores[0] = new createScore("홍길동", 100, 100, 100); new로 생성된 객체의 주소가 this에 들어감 ① 기본 객체를 생성 ← new ② createScore가 초기화 시킴 ③ 초기화 시킨 객체를 리턴 기본 객체에 name, kor, eng, math 등등 추가하는 거 exam10-6은 객체를 바깥에서 만들어서 객체를 만들어서 초기화시킨다는 측면에서는 10-6번이 더 직관적이고 명확해서 이 방법을 더 많이 쓴다. 함수명이 저러면 모름 개발자들 사이에서 관례적으로 함수 이름이 대문자 7) 생성자 역할을 하는 함수의 이름은 대문자로 시작한다. 생성자 이름은 객체의 용도를 표

daekyeong

리액트에서 컴포넌트를 스타일링할 때는 아래와 같이 다양한 방식을 사용할 수 있다. 일반 CSS: 컴포넌트를 스타일링하는 가장 기본적인 방법이다. Sass: 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 쉽게 작성하도록 해준다. CSS Module: 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 파일마다 고유한이름을 자동으로 생성해주는 옵션이다. styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 1. 일반 CSS 🌟 create-react-app으로 생성된 프로젝트는 일반 CSS 방식으로 만들어져 있다. CSS를 작성할 때 가장 중요한 것은 **CSS 클래스

djdu4496

오늘의 생각 Split | CSS selector 학습 목표 - CSS selector 오늘 할 일 위투브 클론코딩(~#03 "express"마무리) 벨로그 TIL | May_27th Keyword 시리즈 포스팅 1개 variousError 시리즈 포스팅 1개

hangoook

CSS selector css는 모르면 정말 아무것도 쓸수 없기때문에 공부를 많이 해야한다. css selector mdn 링크를 통해 공부를 많이 해야겠다. CSS property css property mdn 링크

karuiner

TIL 각각의 branch 유지하며 코드 작성 환경 만들기.(성공) css selector 의 범위 용어는 MDN을 기준으로 작성하였다. Universal selector (범용 선택자) : html 페이지 내부 모든요소에 같은 css 속성을 적용한다. type selector (Type 선택자) 지정된 타입에 적용한다(tag) Class selector (Class 선택자) 지정된 클래스에 적용한다. id selector (id 선택자) 지정된 id에 적용한다. Attribute selector (속성 선택자) 지정된 속성이 포함된 요소를 선택함(예시 title이 포함된 a를 선택) Descendant combinator (하위 결합자) article아래의 모든 p를 선택한다. Child combinator (자식 결합자) article 바로 아래의 p를 선택한다. Adjace

tkdfo93

아침부터 진행된 오피스아워 여러가지 질문들과 답변들이 오고갔다. 역시 수강생들 대부분 scope와 closure에서 해메고있는 듯 보였다. 역시 어렵다 그치만 꼭 정복해야할 대상이다. 오피스아워가 끝나고 어제 시작한 Koans를 완성할 차례이다. 역시 머리가 아팠다. 다끝마치고 3시에 Koans에 대한 Sprint Review가 있었다. 출제자 분께서 설명 해주시는데 출제자분 스펙은 삼전에서 5년 동안 근무하고 나오셔서 지금은 교수를 하고있다고 ... 그래서 그런지 설명에서 내공이 대단하단 걸 느꼈다. 정말 주의깊게 듣고 마지막 일정인 CSS selector 체크포인트 문제를 풀었다. 자바스크립트만 매일 복습 하다보니 CSS는 조금 생소했다. 분명히 같이 복습 했어야 했는데 나는 심각한 똥손이라 나의 결과물이 꼴보기 싫어서 복습을 하지않았다. 문제를 푸는데 조금 힘겨웠다;;;; 알게된 몇가지 선택자(selector) 들을 보자. | Selector | Example

saemsol

CSS Cascading Style Sheet → HTML 문서에 있는 요소들에다가 스타일을 입히는 것이다. 🎨 → CSS 는 프로그래밍 언어가 아니고 markup 언어도 아닌 Style sheet language 이다. CSS Syntax selector property property value ✨ semicolon (;) 으로 선언을 끝마쳐야 한다!!! ✨ css는 규칙기반 언어이므로 ex color: green; 의 규칙으로 선언을 명시한다. ✨ CSS 에서의 comme

hyacinta

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. CSS selector CSS selector(이하 선택자)는 HTML 파일에서 작성한 엘리먼트들을 선택하는 것을 말한다. 이 선택자는 태그명, 아이디, 클래스 등으로 선택할 수 있다. 기본 선택자 * : (전체 선택자) 내부의 모든 요소를 선택 태그명 : (태그 선택자) 태그 이름을 선택자로 선택 #아이디이름 : (아이디 선택자) 아이디 이름을 선택자로 선택 .클래스이름 : (클래스 선택자) 클래스 이름을 선택자로 선택 복합 선택자 일치 선택자 : 선택자1선택자2를 복합적으로 선택 (두가지가 동시에 만족되어야 하며, 선택자가 붙어 있음) 자식 선택자 : 선택자1 > 선택자2 선택자1의 자식 선택자를 찾아서 선택 후손(하위) 선택자 : 선택자1 선택자2 선택자1 속에 있는 모든 요소 중에서 선택자2를 찾아서 선택 인접 형제 요소 선

muchogusto

1. 일반 형제 연결자 (~, 선택기 레벨 4) https://www.w3.org/TR/selectors-3/#general-sibling-combinators https://www.w3.org/TR/selectors-4/#general-sibling-combinators 예제 위의 CSS 셀렉터".a ~ .b")의 의미는 "a 클래스 다음에 오는 b 클래스"라는 의미! a 클래스 이전의 b 클래스는 셀렉되지 않음에 주의! "&::placeholder"에서 "::"은 무엇인가? CSS Se