• 회원가입
  • 로그인
  • 구글아이디로 로그인

[selector] CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택자)

목차
  1. element,element 예제 - h1과 p요소 선택
  2. element,element 정의
  3. element,element 구문
  4. element,element 예제 - div 요소와 .hz 클래스 선택
element : 요소. (※ 특정 '선택자'로 보시면 됨.)

element,element 예제 - h1과 p요소 선택


<style>
h1,p {color:red;}
</style>

<h1>제목</h1>
<p>글 내용</p>
 
PS. 콤마 ( , ) 앞뒤에 공백 와도 상관 없음.
  • (예) h1 , p {color:red;} (O)
  • (예) h1, p {color:red;} (O) - 홈짱은 주로 이 방법 사용.
  • (예) h1 ,p {color:red;} (O)

 

element,element 정의

 

쉼표( , )로 나열된 선택자를 모두 선택.(= 병렬선택자)

 


 

1.

  • 요소와 요소를 쉼표(,)로 연결.
  • 쉼표(,) 앞뒤 공백 유무 상관없음.
  • element 자리엔 요소선택자뿐만 아니라, id/class 등 다른 선택자도 가능. (예) p,.hz {...}
  • 2개 이상 여러 선택자를 연결 가능. (예) p,h1,div {...}

 

2.

CSS1

 

3.

모든 브라우저 지원.

 

 

element,element 구문

 

element, element { CSS 선언; }

 


element,element 예제 - div 요소와 .hz 클래스 선택

 

<style>

div,.hz {color:red ; font-size:20px;}

</style>

 

<div>홈짱닷컴 Homzzang.com</div>

<p class="hz">홈페이지 강의</p>

 

결과보기



분류 제목
outline CSS - outline-color 속성 - 외곽선두께 (= 아웃라인컬러속성 = outline-color속성…
box CSS - width 속성 ★ - 너비 (= 가로길이 = width속성 = 위드스속성, 상속X)
box CSS - height 속성 ★ - 높이 (= 세로길이 = height속성 = 하이트속성) (※ vh, vw…
box CSS - min-width 속성 - 최소너비 (=최소가로길이 = min-width속성 = 민위드스속성)
box CSS - min-height 속성 - 최소높이 (= 최소세로길이 = min-height속성 = 민하이트속성…
box CSS - max-width 속성 - 최대너비 (= 최대가로길이 = max-width속성 = 맥스위드스속성)
box CSS - max-height 속성 - 최대높이 (= 최대세로길이 = max-height속성 = 맥스하이트속…
font CSS - font 속성 ★ - 글자스타일종합 (= font속성 = 글씨체 = 서체 = 글꼴 = 폰트속성, …
font CSS - font-size 속성 ★ - 글자크기 (= 글씨체크기= 글씨크기 = 서체크기= 글씨크기 = …
font CSS - font-family 속성 ★ - 글자종류 (= font-family속성 = 폰트패밀리속성 = 글…
font CSS - font-weight 속성 ★ - 글자굵기 (= font-weight속성 = 폰트굵기 = 글씨체굵…
font CSS - font-style 속성 - 글자기울기 (= 이텔릭체 여부 = 이탤릭 글씨체 = 글자 기울려쓰기 … 1
font CSS - font-variant 속성 - 작은 대문자 (= font-variant속성 = 폰트베리언트 = …
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
text CSS - direction 속성 - 텍스트방향 (= 텍스트진행방향 = direction속성 = 디렉션속성)…
text CSS - letter-spacing 속성 ★ - 글자 간격 사이사이 띄우기 ( 텍스트사이띄우기 = 문자 간…
text CSS - line-height 속성 ★ - 텍스트라인높이 (= line-height속성 = 텍스트줄높이 =…
text CSS - text-align 속성 ★ - 텍스트정렬 (= text-align속성 = 텍스트얼라인속성)
text CSS - text-decoration 속성 ★ - 텍스트라인 꾸미기 (= 밑줄/밑선, 가운데줄/취소선, 윗…
text CSS - text-indent 속성 ★★ - 단락 첫줄 텍스트 들여쓰기 (= text-indent속성 = …
4/25
목록
찾아주셔서 감사합니다. Since 2012