CSS(Cascading Stylesheet)
CSS 첫 번째 단계
*스타일 기입 규칙
선택자 { 속성 : 속성값 }
/* 선택자 { 속성 : 속성값} */
span { color: red; }
CSS
복사
스타일 주석 : /* */
/*
스타일 코드가 아닌, 스타일 코드에 대한 설명 및 그외 내용들을 집어넣을 수 있는 주석
주석안의 내용은 코드에 적용되지 않는다.
*/
CSS
복사
*스타일 적용방법
외부 스타일시트 연결
<link rel="stylesheet" href="styles.css" />
HTML
복사
내부 스타일시트
<style>
span { color: red; }
</style>
HTML
복사
인라인 스타일
<p style="color:red;">인라인 스타일입니다</p>
HTML
복사
CSS 구성요소
*선택자
가상 클래스(:Pseudo-class) : 특정 상태에 있는 요소를 선택하는 선택자
:last-child | |
:only-child | |
:invalid | <input>이나 <form>내용의 유효성검사 시 false일 경우에 나타내는 가상클래스 |
:valid | <input>이나 <form>내용의 유효성검사 시 ture일 경우에 나타내는 가상클래스이다. |
동적가상 클래스 : 사용자가 요소와 상호 작용할 때 클래스가 요소에 추가된 것처럼 작동
:link | 방문하지 않은 링크 |
:visited | 방문한 링크 |
:hover | 마우스를 올렸을 때 |
:active | 요소를 활성화 시켰을 때 |
:focus | 요소에 초점이 맞추어 졌을 때 |
hover,active등의 요소가 적용된 스타일을 개발자 도구에서 확인하는법
개발자 도구 → 요소 → 스타일 → 필터인풋 옆에 :hov를 선택해 원하는 요소를 선택
가상 요소(::pseudo-element) : 완전히 새로운 HTML 요소를 마크업에 추가한 것처럼 작동
::before | |
::after | |
::first-line | 문장의 첫 줄 선택 |
::first-letter | 첫 글자 선택 |
CSS에서 ::before, ::after의 content 속성에 텍스트 문자열을 삽입하는 것은 일부 스크린 리더에서 액세스할 수 없고 나중에 다른 사람이 찾아서 편집하기 어려울 수 있다.
가상클래스와 가상요소들을 혼합해서 사용가능
article p:first-child::first-line { font-size: 120%; }
CSS
복사
가상클래스 및 가상요소 설명 링크 : https://mber.tistory.com/35
