본문 바로가기

프로그래밍 공부/CSS3

 (25)
CSS3 - 반응 선택자 반응 선택자는 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자입니다. 사용자가 마우스를 특정한 태그 위에 올리면 hover 상태가 적용되고, 클릭하면 active 상태가 적용됩니다. 선택자 형태 설명 :active 사용자가 마우스로 클릭한 태그를 선택합니다. :hover 사용자가 마우스를 올린 태그를 선택합니다. User Action Selector 글자 위에 마우스를 올리면 빨간색이 적용되고 마우스로 클릭하면 파란색이 적용됩니다.
CSS3 - 동위 선택자 동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자입니다. 아래 예시1을 보면 알 수 있습니다. 동위 선택자를 사용하면 이러한 동위 상태에 있는 태그의 위치 관계를 파악할 수 있습니다. 선택자 형태 설명 선택자A + 선택자B 선택자A '바로' 뒤에 위치하는 선택자B를 선택합니다. 선택자A ~ 선택자B 선택자A 뒤에 위치하는 선택자B를 선택합니다. 동위 선택자를 사용해 만든 예시2를 참고하면 h1 + h2 선택자는 h1 태그 '바로' 뒤의 h2 태그에 적용이 되어 4개의 h2 태그중 h1 태그 바로 아래의 h2 태그가 color 속성에 red 값이 적용이 된 것을 알 수 있으며, h1 ~ h2 선택자는 h1 태그의 뒤에 있는 h2 태그에 적용이 되어 4개의 h2 태그 모두 backg..
CSS3 - 후손 선택자와 자손 선택자 후손 선택자와 자손 선택자는 특정 태그의 자손과 후손을 선택할 때 사용됩니다. 후손과 자손은 아래의 예시1을 보게되면 쉽게 이해를 할 수 있습니다. 후손 선택자 후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용합니다. 선택자 형태 설명 선택자A 선택자B 선택자A의 후손에 위치하는 선택자B를 선택합니다. 위의 예시2와 같이 #header(id="header") 태그 아래에 위치한 h1 태그에는 빨간색이 적용되고 #section(id="section") 태그 아래에 위치한 h1 태그는 주황색이 적용됩니다. 후손 선택자를 사용할 때 주의사항은 아래 예시3과 같이 #header(id="header") 태그의 후손에 위치하는 h1 태그와 #header(id="header") 태그의 후손에 위치하는 h..
CSS3 - 속성 선택자 속성 선택자를 사용하면 특정 속성을 가진 HTML 태그를 선택할 수 있습니다. 속성 선택자는 지금까지 배운 다른 선택자와 함께 사용하는 선택자입니다. 속성 선택자는 기본 속성 선택자와 문자열 속성 선택자로 나눌 수 있으며 기본 속성 선택자는 많이 사용하지만 문자열 속성 선택자는 특별한 경우에만 사용합니다. 기본 속성 선택자 선택자 형태 설명 선택자[속성] 특정한 속성이 있는 태그를 선택 선택자[속성=값][속성=값] 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택 input 태그는 이름이 모두 input이지만 type 속성값에 따라 형태가 달라집니다. 따라서 input 태그를 선택할 때는 기본속성 선택자를 많이 사용합니다. 아래 예시1은 기본 속성 선택자를 사용해 input 태그를 선택합니다. C..
CSS3 - 아이디 선택자와 클래스 선택자 아이디 선택자와 클래스 선택자는 스타일시트에서 가장 많이 사용하는 선택자입니다. 웹 페이지의 레이아웃을 구성하고 디자인을 적용할 때 사용되는 태그이므로 꼭 기억해주세요. 아이디 선택자 아이디 선택자는 특정한 id 속성을 가지고 있는 태그를 선택할 때 사용하는 선택자입니다. 선택자 형태 설명 #아이디 아이디 속성을 가지고 있는 태그를 선택합니다. 웹 표준에 "id 속성은 웹 페이지 내부에서 중복되면 안 된다"라는 규정이 있으므로 아이디 선택자는 특정한 하나의 태그를 선택할 때 사용합니다. 일반적으로 아래 예시1 처럼 공간 분할 태그에 id 속성을 적용하고 레이아웃을 구성합니다. 또한 id 속성은 중복이 되면 스타일시트에서는 문제가 되지 않지만 자바스크립트에서는 id 속성이 중복될 경우 문제가 발생합니다. ..
CSS3 - 태그 선택자 태그 선택자는 HTML 페이지 내부에서 특정 종류의 태그를 모두 선택할 때 사용하는 선택자입니다. 태그 선택자는 아래 예시1과 같이 사용합니다. 아래 코드는 h1 태그의 color 속성에 red 키워드를 적용하고 p 태그의 color 속성에 blue 키워드를 적용합니다. 여러개의 선택자를 한꺼번에 선택해서 스타일 속성을 적용할 때는 쉼표를 사용합니다. 예시2 는 여러 개의 태그 쉼표로 연결해 margin 속성과 padding 속성을 적용합니다.
CSS3 - 전체 선택자 HTML 문서 안에 있는 모든 태그를 선택할 때는 전체 선택자를 사용합니다. 선택자 형태 설명 * HTML 페이지 내부의 모든 태그를 선택합니다. 전체 선택자로 작성후 코드를 실행하면 아래 예시1의 결과를 알 수 있습니다. 일반적으로 전체 선택자를 사용하면 body 태그 내부에 있는 요소에만 스타일 속성이 적용되는 것처럼 보이지만 전체 선택자를 사용하면 html 태그를 포함해 head 태그, title 태그, style 태그까지 선택이 됩니다. 아래 예시2는 jQuery를 사용해 전체 선택자로 선택된 모든 태그에 스타일을 적용하는 코드입니다. html 태그도 전체 선택자의 적용 대상에 포함된다는 것을 꼭 기억해주세요.
CSS3 - 선택자 종류 개요 선택자 종류 선택자 형태 선택자 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header 클래스 선택자 .클래스 .item 후손 선택자 선택자 선택자 header h1 자손 선택자 선택자 > 선택자 header > h1 속성 선택자 선택자[속성=값] input[type=text] 선택자[속성~=값] div[data-role~=row] 선택자[속성|=값] div[data-role|=row] 선택자[속성^=값] div[data-role^=row] 선택자[속성$=값] div[data-role$=row] 선택자[속성*=값] div[data-role*=row] 동위 선택자 선택자 + 선택자 h1 + div 선택자 ~ 선택자 h1 ~ div 구조 선택자 선택자:first-child li:..

티스토리툴바