초보 개발자의 개발 블로그

가상 클래스 (pseudo-class) / 가상 요소 선택자 (pseudo-element) 가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다. 선택자:가상클래스 { 속성: 값; } :link, :visited, :hover, :active, :focus :link, 방문하지 않은 링크 :visited, 방문한 링크 :hover, 해당 요소에 커서가 위치할 때 :active, 요소가 활성화 되었거나 클릭 되었을 때 :focus, 해당 요소에 초점이 맞춰졌을 때 a:link { color: blue; } a:visited { color:purple; text-decoration: none; } a:hover {..

결합자 / 복합 선택자 (Combinators) 일치 결합자(Basic Combinator) 동시에 만족하는 요소 선택 span.orange { color : red; } 이건 오렌지가 아닙니다! 이건 오렌지가 아닙니다! 이건 오렌지 입니다!! 태그 선택자 span을 찾아 클래스 선택자 orange를 선택 자손 결합자 (Descendant Combinator) selectorA 하위의 모든 selectorB 요소 div span { color: red, } 이건 빨강입니다! 이건 빨강이 아닙니다. 이건 빨강입니다! 자식 결합자(Child Combinator) selectorA 바로 아래 selectorB 요소 div > span { color: red, } 이건 빨강입니다! 이건 빨강이 아닙니다. 이건 ..

선택자(Selectors) HTML 문서에서 특정한 요소를 선택하여 스타일링 하기 위해서는 반드시 선택자라는 개념이 필요하다. 기본 선택자 전체 선택자, 요소 선택자 class선택자, id 선택자, 속성 선택자 결합자 / 복합 선택자 (Combinators) 자손 결합자, 자식 결합자 일반 형제 결합자, 인접 형제 결합자 가상 클래스 / 요소 (pseudo class) 링크, 동적 가상 클래스 구조적 가상 클래스, 기타 가상 클래스, 가상 엘리먼트, 속성 선택자 전체선택자 (Universal Selector) HTML 페이지 내부의 모든 태그를 선택 요소 선택자 / 태그 선택자 (Type Selector) HTML 요소를 직접 지칭하는 가장 간단한 선택자 클래스 선택자 (Class Selector) 주어..

CSS란 무엇인가? CSS(Cascading System Sheets)는 스타일, 레이아웃 등을 통해 문서(HTMl)를 표시하는 방법을 지정하는 언어이다. HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 한다. CSS를 통해 정보(HTML)와 디자인(CSS)를 분리하여 관리할 수 있다. 정보를 수정하지 않고 디자인만 변경할 수 있다. 태그에 style 속성을 주면 소스코드가 지저분해 지는데, 분리하여 관리하게 되면 유지보수 및 가독성이 좋아진다. 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도할 수 있다. 시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석하도록 할 수 있다.(웹접근성) CSS 구문 CSS는 규칙 기..