프로그래밍/HTML 27

CSS 선택자(2)

5. 자식 선택자 (Child Selector)- 자식 선택자는 지정한 특정 요소의 직접적인 자식에 해당하는 특정 요소에 매치됩니다. 추가적으로 감싼 요소는 선택하지 않습니다.- 자식 선택자 기본문법 : 상위선택자>선택자 {속성: 값;} 6. 그룹 선택자 (Grouping Selector)- 그룹 선택자는 여러 선택자를 복합적으로 사용하여 다수의 요소를 선택할 수 있습니다.- 그룹 선택자 기본문법 : 선택자1, 선택자2, 선택자3 {속성: 값;}- 바로 위 예시에 사용된 css 파일에 group2, group3 클래스 옵션을 추가합니다. - 두 클래스의 배경색이 노란색으로 변경되었습니다. 7. 가상 클래스 선택자 (Pseudo Class Selector) - 가상 클래스 선택자는 실제로 클래스를 부여하지..

CSS 선택자(1)

1. 타입 선택자 (Type Selector) - 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다.- 타입 선택자 기본문법 : 태그 {속성: 값;} - html, css 파일 생성 - html 파일 작성 - html 파일 실행화면 - css 파일 작성 - html 파일에 css 파일 삽입 - 실제 렌더링 된 화면 2. 클래스 선택자 (Class Selector) - 특정 클래스 명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다.- 클래스 선택자 사용법은 타입 선택자 사용법과 흡사합니다. 태그 대신에 클래스명이 오고 클래스명 앞에 점(.)이 옵니다.- 클래스 선택자 기본문법 : .클래스 {속성: 값;} - 좀전의 css 문서에 greenColor 클래스를 추가합니다. - 좀전의 html ..

CSS 적용방법

1. In-Line 방식 - HTML 태그에 직접 Style 속성을 삽입하여 스타일을 적용하는 방법입니다.- 각 페이지마다 스타일이 기술되기에 직관적으로 바로바로 확인되지만 유지보수가 불편하다는 단점이 있습니다. 특별한 경우가 아니라면 사용을 자제하는 것이 좋습니다.- 예시 : ... 2. Embedded 방식- HTML 문서에 3. Import 방식 - css 파일에만 스타일을 기술합니다. Link 방식과 유사하지만 하나의 css 파일로 여러개의 웹사이트에 적용하거나 style 내부에서 다른 css를 불러올 수 있다는 개념이 다릅니다.- 낮은버전의 브라우저에서는 Import 방식을 인식하지 못하는 호환성 문제를 가지고 있습니다.- Link 방식보다 호환성과 속도면에서 뒤쳐집니다.- 예시 : 4. Lin..