6) 문서 구조 관련 선택자
<html>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
</div>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>
◆ 자손 선택자
div span { color: red; }자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 하고, 위 코드는 <div>의 자손 요소인 <span>을 선택하는 선택자다.
◆ 자식 선택자
div > h1 { color: red; }자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣고, 꺽쇠 기호와 선택자 기호 사이에 공백은 있거나 없어도 상관 없다. 위 코드는 <div>의 자식 요소인 <h1>를 선택하는 선택자다.
◆ 인접 형제 선택자
div + p { color: red; }인접 형제 선택자는 선택자 사이에 + 기호를 넣고, 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자로 자식 선택자와 마찬가지로 공백은 있거나 없어도 상관 없다.
정리
/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 "ul 요소" 선택 */
body > div table + ul { ... }위 코드처럼 문서 구조 관련 선택자는 더 복잡하게 사용할 수 있고, 유의할 점은 요소들이 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소라는 것이다.
7) 가상 선택자 1
◆ 가상 클래스(pseudo class)
가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스로, 우리가 직접 요소에 클래스를 선언하는 것이 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해주는 것이다.
예를 들어 <p>가 있다고 가정을 하면, 이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶을 때 가상 클래스가 없다면 이런 과정을 거치게 된다.
1. 임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다.
2. p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다.
3. p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다.
여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 이를 혼자 처리할 수 없어 어쩔 수 없이 다른 언어를 사용해야 하고, 이는 개발 비용이 들어가는 일이다. 그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고, 가상 클래스로 제어할 수 있게 했다.
:pseudo-class {
property: value;
}위처럼 가상 클래스는 :(콜론) 기호를 써서 나타내고, 가상 클래스를 이용하면 아래의 경우에도 CSS만으로 처리가 가능하므로 훨씬 효율적이다.
":hover 가상 클래스 선택자를 이용해서 스타일 규칙을 만든다. (hover는 마우스 커서가 올라갔을 때 적용이 되도록 정의되어 있다.)"
가상 클래스에는 여러 가지가 있으므로 아래 링크를 참고하길 바란다.
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
의사 클래스
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 ��
developer.mozilla.org
◆ 문서 구조와 관련된 가상 클래스
문서 구조와 관련된 가상 클래스는 first-child와 last-child 가상 클래스 선택자가 있다.
:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
첫 번째 <li>와 마지막 <li>에 가상 클래스가 적용되어, 실제 <li>에는 class 속성이 없지만 내부적으로 가상 클래스가 적용되어 마치 아래의 코드와 같이 동작하게 된다.
<ul>
<li class="first-child">HTML</li>
<li>CSS</li>
<li class="last-child">JS</li>
</ul>
◆ 앵커 요소와 관련된 가상 클래스
앵커 요소와 관련된 가상 클래스로는 :link와 :visited가 있고, 하이퍼 링크는 앵커 요소에 href 속성이 있는 것을 의미한다.
:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미 (주로 조금 진하게 색칠돼있음)
a:link {
color: blue;
}
a:visited {
color: gray;
}
◆ 사용자 동작과 관련된 가상 클래스
이 클래스들도 <a>에 주로 많이 쓰는데, <a>에만 쓸 수 있는 것은 아니며, 이 조건에 맞는 상황이 되는 요소들은 다 사용이 가능하다.
:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
<body>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.google.com">구글</a>
<a href="http://www.daum.net">다음</a>
</body>a:focus {
background-color: yellow
}
a:hover {
font-weight: bold
}
a:active {
color: hotpink;
}
:focus는 현재 입력 초점을 가진 요소에 적용되고, focus(초점)는 지금 현재 선택을 받는 것을 의미한다. 위 코드에서는 입력 초점을 갖게 될 때 background-color로 yellow가 적용된 것을 알 수 있다.
예를 들면 입력 폼 요소에 텍스트를 입력하려고 마우스 클릭해서 커서를 입력 폼 위에 올려놓으면 그때 입력 폼 요소가 초점을 받는 상태고, 또 키보드의 탭 키를 이용해서 요소를 탐색하다 보면 링크나 버튼에 점선 테두리가 이동하는 것을 볼 수 있는데, 점선 테두리가 위치하는 것도 초점을 받은 상태다.
:hover는 마우스 커서가 있는 요소에 적용되는데, 마우스를 올렸을 때를 의미한다. 위 코드에서는 마우스 커서를 올릴 때 font-weight가 bold로 적용되는 것을 알 수 있다.
:active는 사용자 입력으로 활성화된 요소를 의미하는데, <a>를 클릭할 때 또는 <button>를 눌렀을 때처럼 순간적으로 활성화된다. 위 코드에서는 color가 hotpink로 적용되어 글씨가 분홍색이 되는 것을 알 수 있다.
https://www.w3schools.com/css/css_pseudo_classes.asp
CSS Pseudo-classes
CSS Pseudo-classes What are Pseudo-classes? A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it g
www.w3schools.com
8) 가상 선택자 2
◆ 가상 요소(pseudo element)
가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있다. 가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있다.
선언 방법은 가상 클래스와 같게 :(콜론)을 사용하며, CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했지만, 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 한다.
::pseudo-element {
property: value;
}
::before : 가장 앞에 요소를 삽입
::after : 가장 뒤에 요소를 삽입
::first-line : 요소의 첫 번째 줄에 있는 텍스트
::first-letter : 블록 레벨 요소의 첫 번째 문자
<p>가상 선택자는 가상 클래스와 가상 요소가 있다.</p>p::before {
content: "###"
}
p::after {
content: "!!!"
}
p::first-line { ... }
p::first-letter { ... }before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용해야 하고, 실제 HTML 코드에는 나타나지 않지만, before와 after가 어떻게 동작하는지 이해를 돕기 위해 코드를 아래와 같이 변경했다.
<p>
<before>###</before>
가상 선택자는 가상 클래스와 가상 요소가 있다
<after>!!!</after>
</p>
실제 HTML 파일에서는 위 코드와 같이 before와 after가 눈에 보이지 않지만, 내부에서 이처럼 요소가 생성되고, first-line과 first-letter도 마찬가지다.
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
의사 요소
CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.
developer.mozilla.org
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048
반드시 기억해야 하는 CSS 선택자 30개
여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던 ��
code.tutsplus.com
https://www.edwith.org/boostcourse-cs-htmlcss/joinLectures/33592
[부스트코스] 비전공자를 위한 HTML/CSS 강좌소개 : edwith
- 부스트코스
www.edwith.org
위 3개의 내용은 부스트코스 무료 강의에서 들을 수 있습니다🥰
#HTML #CSS #HTMLCSS #HTML문법 #HTML태그 #HTML속성 #HTML태그중첩 #HTML빈태그 #HTML주석 #HTML문서구조 #HTML공부 #HTML연습 #HTML기초 #CSS선택자 #CSS문법 #CSS구문 #문서구조 #가상선택자 #가상클래스 #가상요소 #class #id #선택자 #속성선택자 #inline #internal #external #import #제목태그 #콘텐츠모델 #시멘틱웹 #시멘틱마크업 #HTML5 #HTML5시멘틱 #block #inline #h1 #단락태그 #p #개행 #br #텍스트표현태그 #앵커 #a #href #target #내부링크 #div #span #ul #ol #dl #img #src #alt #상대경로 #절대경로 #gif #jpg #png #table #tr #th #td #caption #thead #tbody #tfoot #colspan #rowspan #form #input #text #password #radio #checkbox #file #submit #reset #button #image #select #textarea #label #fileset #legend #article #aside #figure #figcaption #header #main #footer #mark #nav #section #summary #time #코딩 #코딩공부 #코딩연습 #코딩독학 #비전공자 #부스트코스 #부스트코스HTML #부스트코스강의 #edwith
'Programming > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] CSS - 속성 정의, 단위, 색상, background (0) | 2020.08.11 |
|---|---|
| [HTML/CSS] CSS - 구체성, 상속, Cascading (0) | 2020.08.10 |
| [HTML/CSS] CSS - 선택자 (0) | 2020.08.08 |
| [HTML/CSS] CSS 이해하기 (0) | 2020.08.08 |
| [HTML/CSS] HTML - 콘텐츠 모델, 시멘틱 마크업, HTML5 시멘틱 요소, Block-level & Inline-level (0) | 2020.08.03 |
댓글