DevOps:leehi9817

종속 선택자 태그, 클래스, 아이디 선택자가 결합된 형태의 선택자에 속성을 지정하는 방식입니다. 연속하여 붙인 선택자들 모두에 해당하는 경우에만 적용됩니다. 하위 선택자 선택자 내부의 자손 선택자에 속성을 지정하는 방식입니다. 자식 선택자 선택자 내부의 자식 선택자에 속성을 지정하는 방식입니다. 하위 선택자 VS 자식 선택자 자손 선택자는 자신의 하위 노드들 중 해당하는 노드를 모두 선택하는 방식입니다. 자식의 자식인 자손들까지 포함하는 개념입니다. 자식 선택자는 자신의 하위 노드들 중 자식 노드만 선택하는 방식입니다. 바로 아래 계층인 자식만 선택되며 자손들은 포함하지 않습니다. 따라서 자손 선택자는 자식 선택자를 포함하는 개념으로 볼 수 있습니다.

선택자에는 기본적으로 태그, 클래스, 아이디 선택자 등이 있으며 그 외에 종속, 하위, 전체, 그룹 선택자 등이 웹 개발 실무에서 많이 사용된다. 태그 선택자 태그 선택자는 HTML 태그를 선택자로 사용하여 속성을 지정하는 방식이다. 예시로는 h1, h2, li 등이 있다. 태그 선택자 예시 h2, th 태그를 선택자로 사용하여 폰트 크기와 배경 색깔을 변경하는 코드이다. 클래스 선택자 사용자가 직접 이름(class)을 만들어 선택자로 속성을 지정하는 방식이다. .(점)으로 시작하고 첫문자는 영문자로 시작해야하며, 대소문자를 구별합니다. 클래스 선택자는 클래스 속성에서 같은 클래스 이름을 가진 엘리멘트들이 적용 대상이 됩니다. 클래스 선택자 예시 green이라는 클래스를 만들어 h2 태그 두개에 적용하였..

html 문서에 css를 적용하려면 먼저 html 파일과 css 파일이 필요하다. 파일이 준비되면 html 파일의 head 부분에 다음 코드를 입력하여 css 파일을 임포트하면 된다. 예시로 다음 css 파일을 html 파일에 적용해보자. color 기능을 사용하여 h2(제목)와 li(항목) 부분의 폰트 색을 변경하였다. 스타일을 지정하는 코드의 형식은 다음과 같다. p { color: #FFFFFF; } p의 부분에는 변경할 컨텐츠의 형식(h2, li 등)을 넣고, color 부분에는 원하는 기능(background-color 등)을 넣으면 된다. 위의 코드를 사용하면 html 파일의 h2 태그와 li 태그 부분에 색상 변경 효과가 적용된다.