너와 나의 개발 고리

가상 클래스 선택자는 요소의 상태를 이용해 선택자를 지정하는 방법이다 형식) 기준 요소 : 가상 클래스 선택자 {/* CSS 코드 */} 가상 클래스 선택자가 매우 많지만 여기서는 자주 사용하는 가상 클래스 선택자 몇가지를 카테고리별로 정리하려고 한다 1. 링크 가상 클래스 선택자 a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법이다 종류 설명 : l i n k 한 번도 방문하지 않은 링크일 때 선택한다. : v i s i t e d 한 번이라도 방문한 적이 있는 링크일 때 선택한다. 아래의 예시를 보면 이해하기 쉽다 네이버 구글 코드를 실행하면 아래와 같은 결과를 볼 수 있다 2. 동적 가상 클래스 선택자 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법이다...

가상 요소 선택자는 HTML 문서에 명시적으로 작성된 구성 요소는 아니지만 마치 존재하는 것처럼 취급해 선택하는 선택자 지정 방법을 말한다. 앞에 :: 기호(콜론 2개)를 붙여서 사용하며, 기준 선택자와 함께 사용하는데 만약 기준 선택자를 생략하면 전체 선택자가 들어간 것으로 간주한다 형식) 기준 선택지::가상 요소 선택자{/* CSS 코드 */} 여러 가상요소 선택자 속성이 있지만 자주 사용하는 주요 가상 요소 선택자는 아래와 같다 종류 설명 ::befor 콘텐츠 앞의 공간을 선택한다. ::after 콘텐츠 뒤의 공간을 선택한다 ::befor 선택자는 기분 선택자 요소 앞의 공간을 선택하고, ::after 선택자는 기준 선택자 요소 뒤의 공간을 선택한다. 아래의 예시를 보면 이해하기가 쉽다 Hello ..

2023.07.21 - [CSS _HTML_JavaScript/CSS] - [CSS] CSS 기본 선택자 사용 조합 선택자는 앞서 정리한 기본 선택자와 함께 사용했을 때 선택자의 의미를 더 풍부하게 해 주는 선택자방법이다. 1. 그룹 선택자 그룹 선택자는 여러 선택자를 하나로 그룹 지을 때 사용한다. 선택자와 선택자는 , 기호로 구분한다. 형식) 선택자1, 선택자2, 선택자3, ... , 선택자n{/* CSS 코드 */} p{ color:red; } #title{ color:red; } .red{ color:red; } 위의 형식은 선택자는 다르지만 선언부는 똑같은 코드로 3개의 코드를 합치면 아래와 같다 p, #title, .red{ color:red; } 2. 자식 선택자 부모 요소의 하위에 있는 자..

기본 선택자를 간단하게 표로 정리하면 아래와 같다 전체선택자 *{ } 태그선택자 태그{ } 아이디선택자 #id{ } 클래스선택자 .class{ } 기본속성선택자 [속성]{/* CSS 코드 */} [속성=값]{/* CSS 코드 */} 1. 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 * 기호를 사용해 표시한다 형식) *{/* CSS 코드 */} 전체 선택자로 모든 요소의 텍스트를 파란색으로 지정하려면 다음과 같이 작성할 수 있다 전체 선택자 전체 선택자는 모든 요소를 한 번에 선택할 수 있습니다. 위의 코드를 실행하면 아래와 같이 나온다. 결과를 보면 단순히 h1, p 태그만 선택되었다고 생각할 수 있는데 전체 선택자는 h1, p, 태그를 비롯해 ..

작성한 CSS를 HTML 문서에 적용시키는 방법으로 대표적인 방법으로 3가지가 있다 1. 내부 스타일 시트 사용하기 내부 스타일 시트(internal style sheet)는 HTML 파일 내부에 CSS 코드를 작성하는 방법이다. HTML에서 제공하는 태그 중에 style 태그가 있는데 style 태그의 콘텐츠로 CSS 코드를 작성하면 된다. 실제 코드에서 내부 스타일 시트 방법으로 CSS를 적용할때는 아래와 같이 적용하면 된다. 내부 스타일 시트 style 태그를 사용하는 위치는 정해진 기준이 없지만 앞의 코드처럼 head 태그 안에 사용한다. 웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석하며 표시되는 내용은 body 태그 안에 작성한다. hea..

1. 문법 설정 CSS 문법은 크게 선택자와 선언부로 구분한다. 선택자는 CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역이다. 선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호({}) 안에 넣는다. 선언부에 작성하는 스타일은 반드시 속성과 값을 한쌍으로 작성한다. 이때 값의 뒤에 세미콜론(;)을 넣으면 여러 스타일을 연속해서 사용할 수 있다. 예를 들어 h1 태그의 텍스트 크기를 24px로, 색상을 빨간색으로 지정하고 싶다면 아래와 같이 작성할 수 있다. h1{ font-size:24px; color:red; } 2. 주석 CSS도 HTML 처럼 코드에 주석을 남길 수 있다. CSS에서는 주석 내용을 /*와 */ 사이에 작성한다 /* 주석 내용 */ HTML과 마찬..