WEB/CSS (7) 썸네일형 리스트형 의사 요소 HTML에서 접근할 수 없는 정보와 소스 문서에 존재하지않는 콘텐츠에 대한 참조가 가능한 수단 ‣ 사용방법 - '기본선택자::의사요소' 의사요소 설명 ::first-line 특정 요소를 사용하는 문단의 첫 번째 줄의 텍스트를 선택 ::first-letter 첫 번째 줄의 텍스트에서 첫 번째 글자를 선택 ::before 요소 내용의 맨 앞에 추가되는 내용과 스타일 지정 ::after 요소 내용의 맨 뒤에 추가되는 내용과 스타일 지정 Love is patient, love is kind. It does not envy, it does not boast, it is not proud. It is not rude, it is not self-seeking, it is not easily angered, it k.. 의사클래스 , 결합자, 의사요소 1. 의사 클래스 : 해당 요소에는 실제로 존재하지 않지만 해당요소에 클래스가 선언된 것처럼 간주하여 만든 선택자 - 사용방법 : '기본선택자:의사클래스' 구분 의사클래스 설명 링크 의사 클래스 :link 아직 방문한 적이 없는 링크를 선택 :visited 사용자에 의해 방문한 적이 있는 링크를 선택 사용자 동작 의사 클래스 :hover 사용자가 포인팅 장치로 특정 요소를 지정하는 동안에 적용 :active 사용자에 의해 요소가 활성화되는 동안에 적용 :focus 요소가 포커스를 가지고 있는 동안에 적용 이름을 입력하세요: 구글 네이버 다음 : 선택자를 문맥이나 요소의 구조를 기반으로 결합하는 방법 종류 • 자손 결합자 -> '선택자1 · 선택자2' • 자식 결합자 -> '선택자1 > 선택자2' • 인접.. Selector(선택자) 선택자 이름 선택자 형태 설명 전체 선택자 * 모든 요소에 스타일 적용 타입 선택자 요소명 지정한 요소에만 스타일 적용 클래스 선택자 요소명.클래스명 . 클래스명 지정한 클래스명을 사용한 요소에만 적용 아이디 선택자 요소명#아이디명 #아이디명 지정한 아이디명을 사용한 요소에만 적용 속성 선택자 요소명[속성] 지정한 속성에 해당하는 요소에만 적용 전체 선택자, 타입 선택자 • 전체(universal) 선택자 '*' 기호 사용 -> 문서의 문서 요소에 스타잉을 적용하는 경우 *{ color: red; } • 타입 선택자 스타일을 적용할 HTML요소의 이름을 직접 사용 table{color:blue} ul{ color:red; font-style: italic;} • 클래스 선택자 몇 개의 요소를 하나의 클래.. CSS 개요 CSS (Cascading Style Sheet) : 웹 문서에 글꼴, 색상, 여백과 같은 스타일을 적용하기 위한 간단한 메커니즘 장점 • 기능의 확장 및 다양한 스타일 제공 - HTML의 단순한 기능에 대해 CSS 를 통해 기능의 추가/변경 • 통일성 있는 웹 페이지 디자린 가능 - 한 번의 속성 정의 로 여러 요소/문서에 적용 가능 • 웹 문서의 내용과 스타일 정보의 분리 - 개별적 수정이 가능 = 문서의 가독성 향상, 용이한 수정 • 웹브라우저의 로딩 시간 단축 - 통일된 문서 양식이 사용을 통해 처리할 데이터의 양의 감소 CSS 정의 형식 선택자{속성: 값;} Seletor (선택자) : 스타일을 적용하려는 HTML의 요소 Declaration{선언부} : 각 선언은 세미콜론으로 구분 Proper.. css 활용 My Home Page My Home Page My Home Page Use CSS to make a yellow, 1 pixel thick, border around all paragraphs. This is a paragraph This is a paragraph This is a paragraph Use the correct HTML to make the text below into a link to "default.html" Visit our HTML tutorial. Use CSS to remove the underline from the link. Images Use the correct HTML attribute to make the link open in a new window. HTML .. CSS 이론: 선택자 심화학습 h1{color:red; font-size:10px} 속성을 나누는 ; h1 { color:red; font-size:10px } 이렇게 코드를 작성해도 된다. 글자 밑 밑줄 h2{ text-decoration:underline; } [테두리] header h1{ border:1px solid red; } CSS 이론 : 기본 문법 h1 {color:red} 선택자라는 것은 뒤쪽에 있는 color를 붉은 색으로 한다라는 것을 누구에게 적용시킨 것인가라는 것이기때문에 선택자라 한다. { } 서술은 어떤효과를 선택자에게 줄 것인가 라고 하는 내용이 기술되어 있는 곳이다. 이전 1 다음
