Language/Css (5) 썸네일형 리스트형 css 선택자(2) 가상 클래스 선택자 : 가상 클래스 선택자는 요소의 상태나 특정 조건을 만족하는 요소를 선택합니다. 사용자 인터렉션 관련 선택자 :hover 마우스를 올렸을 때button:hover{ background-color: blue;} :focus 요소가 포커스를 받을 때input:focus{ border:2px solid blus;} :active 요소가 클릭 되었을 대a:active{ color:red;} 구조 관련 선택자 :first-child 부모 안에서 첫 번째 자식 요소 선택p:first-child{ font-weight:bold;} :last-child 부모 안에서 마지막 자식 요소 선택p:last-child{ color:blue;} :nth-child(n) n번째 자식 요소 선.. CSS 선택자 기본선택자 전체 선택자(*)모든 요소를 선택*{ margin: 0; padding: 0;}태그선택자(tag)특정 태그를 선택p{ color:blue;}클래스 선택자 (.class)특정 클래스명을 가진 요소를 선택.box{ background-color:gray;}아이디 선택자 (#id)특정 ID를 가진 요소를 선택#header{ font-size:20px;}속성 선택자특정 속성을 가진 요소를 선택하는 선택자input[type="text"]{ border:1px solid black;} 그룹 선택자 (A, B)여러 개의 요소를 한 번에 선택 h1, h2, h3 { font-weight:bold;} 후손 및 자식 선택자후손 선택자 (A B) A요소 안에 모든 B요소 선택div p{ .. Css 단위 CSS 에서의 단위스타일을 정의할 때 값의 크기나 길이를 설정하는 데 사용한다.여러종류의 단위가 있으며, 각각 특정 용도에 맞게 사용된다.CSS에서의 단위는 크게 절대 단위(Absolute Units)와 상대 단위(Relative Units)로 구분된다.절대 단위(Abosolute Units)절대 단위는 화면에서 크기가 고정되어 있어 화면 해상도나 화면 크기에 상관없이 일정한 크기를 가지는 단위이다.하지만 화면 크기나 해상도에 따라 다르게 보일 수 있다.px (픽셀)px는 가장많이 사용되는 단위로, 화면상의 1픽셀을 의미한다.화면 해상도에 따라 픽셀 크기가 다를 수 있지만, 웹에서 크기를 정확하게 지정하려면 픽셀을 사용 한다.h1{ font-size: 16px;} pt(포인트)pt는 인쇄용 디자인에서.. CSS color 속성 알아보기 css에서 color 속성텍스트의 색상을 설정하는 데 사용한다. 이 속성은 html 요소의 텍스트 색상을 변경 할 수 있다.color 속성은 텍스트 뿐만 아니라, 링크, 버튼 등의 텍스트가 있는 모든 요소에 적용 할 수 있다.css color 속성 사용법element { color:value;}* element : 색상을 적용할 html 요소* value: 색상을 지정하는 값 이 값은 다양한 형식으로 제공 할 수 있다.css color 속성 값 지정 방법색상이름( color name) css에서 미리 정의된 색상 이름을 사용 할 수 있다. 예) red, blue, greenp { color: red;}rgb (red, green, blue) 값rg함수는 빨강, 초록, 파랑 색상의 값을 0~25.. css란? CSS란웹 페이지의 스타일을 정의하는 언어이다. CSS의 주요기능스타일 지정 : 텍스트 색상, 배경, 글꼴, 크기, 줄 간격, 테두리 등의 다양한 스타일을 지정 할 수 있다.레이아웃 설정 : 요소들을 화면에서 어떻게 배치할지를 결정합니다. 예를 들어, flexbox, grid 등을 사용하여 레이아웃을 구성할 수 있다 반응형 디자인 : 화면 크기에 따라 디자인을 자동으로 조정하여 모바일, 태블릿, 데스크탑 등 다양한 기기에서 적절안 디자인을 제공한다.애니메이션 및 전환 : css를 사용하여 요소가 변할 때 애니메이션을 추가하거나 부드러운 전환 효과를 적용 한다. CSS 문법CSS는 기본적으로 선택자(selector)와 .. 이전 1 다음