CSS / 선택자(Selector) / 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자
하위 선택자
하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다. 예를 들어
div blockquote
는 div 요소의 하위에 있는 blockqoute 요소를 선택합니다. 이때 div와 blockquote 사이에 요소가 더 있어도 선택이 됩니다. 즉
<div> <blockquote>...</blockquote> </div>
일 때도 blockquote를 선택하고,
<div>
<aside>
<blockquote>...</blockquote>
</aside>
</div>
일 때도 blockquote를 선택합니다.
자식 선택자
자식 선택자(Child Selector)는 특정 요소의 자식 요소를 선택합니다. 예를 들어
div > blockquote
는 div 요소의 자식 요소 중 blockqoute를 선택합니다. 주의할 점은 한단계 아래에 있는 요소만 선택한다는 것입니다. 즉
<div> <blockquote>...</blockquote> </div>
일 때는 blockquote를 선택하지만
<div>
<aside>
<blockquote>...</blockquote>
</aside>
</div>
일 때는 blockquote를 선택하지 않습니다.
형제 선택자
형제 선택자(Sibling Selector)는 어떤 요소의 형제 요소를 선택하는 선택자입니다. 예를 들어
h1 ~ p
는 h1 요소의 형제 요소 중 p 요소를 선택합니다.
인접 형제 선택자
인접 형제 선택자(Adjacent Sibling Selector)는 어떤 요소의 형제 요소 중 첫번째 요소를 선택합니다. 예를 들어
h1 + p
는 h1 요소의 형제 요소 중 첫번째 p 요소를 선택합니다.
Related Posts
여백에는 안쪽여백과 바깥여백이 있습니다. 안쪽여백은 padding 속성으로, 바깥여백은 margin 속성으로 정합니다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같습니다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 왼쪽 여백입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
가상 요소 가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다. 가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동합니다. ::first-line ::first-line은 요소의 첫번째 줄을 선택합니다. 예를 들어 p::first-line { color: red; } 는 p 요소의 첫번째 줄의 글자색을 빨간색으로 만듭니다. ::first-letter ::first-letter는 요소의 첫번째 문자를 선택합니다. 예를 들어 p::first-letter { ...
CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성
text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...
이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...
동영상을 배경으로 사용하면 좀 더 다이나믹하고 화려하게 웹페이지를 꾸밀 수 있습니다. 단, 네트워크 속도가 느리거나 컴퓨터 사양이 좋지 않거나 구 버전의 웹브라우저를 사용하면 문제가 생길 수 있으니, 신중히 결정하는 것이 좋습니다. 예제로 사용한 동영상 예제에서 사용한 동영상은 Pixabay에서 구했습니다. 상업적으로 사용 가능하고, 출처 표시를 하지 않아도 됩니다. https://pixabay.com/videos/network-loop-energy-technology-12716/ 전체 코드와 결과 다음은 간단하게 만든 예제의 ...
CSS / 애니메이션 / animation / animation-direction - 진행 방향 정하는 속성
animation-direction animation-direction은 애니메이션의 진행 방향 정하는 속성입니다. 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다. 문법 animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit normal : 기본값입니다. 정해진 순서로 진행합니다. reverse : 반대 순서로 진행합니다. alternate : 정해진 순서로 진행했다가 반대 순서로 진행합니다. alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행합니다. initial : ...
CSS / placeholder의 색, 글자 모양 등 꾸미기
placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다. 다음은 꾸미기 전의 input과 textarea입니다. <!doctype html> <html lang="ko"> <head> ...
CSS / 선택자(Selector) / :nth-child(), :nth-last-child()
:nth-child(), :nth-last-child() :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자입니다. :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셉니다. 인터넷 익스플로러는 IE 9 이상에서 사용할 수 있습니다. :nth-child() :nth-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다. 문법 :nth-child( an+b ) a와 b는 정수입니다. 0과 음수도 가능합니다. n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 ...
CSS / text-decoration / 선으로 텍스트를 꾸미는 속성
개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...
CSS / CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...