본문 바로가기

Dev. Front-End/CSS

(3)
[CSS] 가상 클래스 선택자(link, visited, active, hover, text-decoration) ▶ 가상 클래스 선택자(link, visited, active, hover, text-decoration) ● 가상 클래스 선택자 : 선택자라는 것은 태그, id, class등과 같이 html문서에 존재하는것들을 지정하는것입니다. 반면에, 가상클래스 선택자는 어떤상태를 의미하고 이런 상태에는 태그, id, class처럼 html문서 상에 있는 것이 아닙니다. 예를 들어서 상태를 지정하는 가상 선택자에는 hover선택자, link선택자, visited선택자, active선택자가 있습니다. - link : 웹 문서에서 사용자가 방문하지 않았던 곳을 표시합니다. - visited : 웹 문서에서 사용자가 방문한 곳을 표시합니다. - hover : 웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타..
[CSS] id와 class(아이디와 클래스)의 개념 및 차이점 ▶ id와 class(아이디와 클래스)의 개념 및 차이점 ● class : 자주 사용되는 스타일에 적용하는 것이라고 생각하시면됩니다. 예를 들어서 빨강색 or 파란색 등 색상을 미리 지정하고 HTML에 적용시키는 방법입니다. css에서 정의하는 방법은 .class_name{속성명:속성값; 속성명:속성값;} 이런식으로 적용합니다. ● id : id는 class와 다른 형태입니다. css에서의 정의 방법은 #id_name{속성명: 속성값; 속성명:속성값;} 이런식으로 적용합니다. id 사용할때 중요한것은 class와 다르게 한페이지에서 한번만 사용이 가능합니다. id는 페이지 내에서 특정 위치나 태 그를 지정하는 것이기 때문에 오직 페이지내에서 한번만 사용할 수 있습니다. ● id와 Class의 차이점 : ..
[CSS] CSS의 개념이해 및 사용법 ( 간단한 실습 ) ▶ CSS의 개념이해 및 사용법 ( 간단한 실습 ) ● CSS란? : CSS라는 언어는 HTML이 기반입니다. HTML을 모른다면 CSS를 사용할 수 없습니다. 설명을 들으면서 찾아서 배운다면 문제가 안되지만, HTML의 기본적인 지식이 있으면 이해하기 수월합니다. HTML은 정보를 담고, CSS는 HTML의 정보들을 꾸며주는 디자인이라고 생각하시면 됩니다. 예를들어, 제목은 글자 크기도 크고 두껍게 표시하고 내용은 작은 글씨크기와 얇게 표시하고싶다면 HTML로 제목과 내용을 작성하고 CSS로 제목과 내용의 style을 꾸며줄수있습니다. ● CSS의 사용법 CSS는 기본 구조가 딱히 없기에, HTML의 사이에 을 넣어주고 꾸며주면 됩니다. 밑에 실습들을 통해 배워보겠습니다. Universal Select..