일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 상대경로
- 코딩공부
- 함수
- 연결자
- object
- HTMLSTUDY
- appendChild
- document.querySelector
- const
- combinator
- 결합자
- 공부일지
- 절대경로
- src
- TiL
- Selector
- padStart
- 속성선택자
- advancedwebranking
- 선택자
- Append
- padEnd
- 생활코딩
- 복합선택자
- function
- CSS
- Let
- argument
- 인자
- HTML
- Today
- Total
목록CSS (4)
능히 할수있다!

∙속성 선택자(Attribute Selector) - 태그 내의 특정 속성들을 선택함. 조건값을 부여하여 다양한 활용이 가능함 '선택자[속성]' a[target]{ color: red; } /* 'a'태그에 'target' 속성을 가진 요소를 선택함 */ '선택자[속성="값"]' a[href="https://www.tistory.com/"]{ color: green; } /* 'a'태그에 'href'속성 값이 "https://www.tistory.com/"인 모든 요소를 선택함 */ '선택자[속성~="값"]' a[title~="Selector"]{ color= red; } a[title~="Reference"]{ font-size= 35px; } /* 'a'태그의 'title' 속성값에 'Selector..

CSS 연결자는 결합자 또는 복합 선택자 등으로도 불리며, 두개의 선택자를 사용할 때 선택자 간의 관계를 설명하는 역할을 한다. 크게 4가지(자식/후손 선택자와, 일반/인접 형제 선택자)로 나뉜다. ∙자식 선택자(Child Selector) '선택자1 > 선택자2' - 선택자1(자신)보다 한 단계 아래 존재하는 선택자2(자식)를 선택 div > p{ color: blue; text-align: center; } /* div의 자식(자손)요소 중 p요소를 선택함 */ ∙후손 선택자(Descendant Selector) '선택자1 선택자2' - 선택자1(자신)보다 아래 존재하는 모든 선택자2(후손)을 선택 div p{ color: red; background-color: yellow; } /* div요소 ..

생활코딩 강좌를 듣던 중 선택자(Selector)의 종류와 다양한 활용법이 궁금해져 찾아보고 알게 된 내용들을 나누어 정리해보려고 한다 ∙전체 선택자(Universal Selector) - HTML 문서 내의 모든 요소를 선택함. 브라우저 과부하 위험이 있어 사용을 권장하지 않음 *{ color: red; padding: 20px; } ∙태그 선택자(Type Selector) - HTML 문서 내의 태그를 선택자로 지정하여, 지정된 이름을 가진 모든 태그를 선택함 p{ font-size: 20px; text-align: center; } /* 모든 'p'태그를 선택 함 */ ∙클래스 선택자(Class Selector) - 'class'속성 값을 가진 요소들을 선택함. 최대한 html태그 내에서 선택자를 ..

생활코딩 강좌에서 알게된 이 사이트. 이 곳에 전세계 여러 웹페이지에 사용된 HTML 태그의 사용 빈도수를 조사한 자료가 있는데, 그 자료를 바탕으로 태그를 정리해보려 한다 ∙HTML : 페이지의 시작과 끝. HTML문서 전체를 감싸준다 ∙HEAD : 머리말 부분. , 등의 태그가 들어가고 CSS와 JavaScript를 연결해준다 한 문서에 하나의태그만 존재 ∙BODY : 브라우저에 표현 될 내용들을 나타내는 곳. 한 문서에 하나의태그만 존재 ∙TITLE : 웹사이트 상단에 표시 될 제목 ∙META : 문서에 대한 메타데이터(데이터의 데이터)를 정의내림. 태그 내에 위치 ∙DIV : Division. 단독으로는 아무 기능이 없고, 주로 CSS, JavaScript 작업을 위한 컨테이너로 활용 ∙A ..