HTML13 HTML/CSS] 자식 선택자, 직속 자식 선택자 이번에는 연결 선택자인 '자식 선택자'와 '직속 자식 선택자'에 대해서 알아보도록 하겠습니다. 자식선택자(Children selector) 자식 선택자는 부모 요소에 포함된 자식들에게 스타일을 적용시킬 때 사용합니다. 우리는 아래 예제에서 content클래스를 부모로 가지고 있는 자식 요소들 중 b태그에 스타일을 적용시켜 보겠습니다 부모명 자식명 ... {} 자 기 소 개 안녕하세요 제 이름은 지금입니다 제 나이는 20살입니다 저는 코딩을 좋아합니다 .content b { font-size: 20px; color: green; } 직속자식 선택자(Direct children selector) 직속 자식 선택자는 말그대로 바로 아래에 있는 직속 자식에게만 적용이 됩니다. 그래서 아래 예제를 보면 conte.. 2021. 5. 22. HTML/CSS] 복수선택자, 여러조건 선택자 지난 시간에 이어 선택자를 공부해봅시다. 'selector(선택자)'란 이름 그대로 선택을 해서 특정 태그에 원하는 스타일을 적용해주는 요소를 말합니다. 선택자를 이용하면 하나 또는 여러개의 태그에 원하는 대로 스타일을 적용해 줄 수 있습니다. 복수 선택자 같은 스타일을 여러 태그에 적용하고 싶을 때가 있습니다. 이럴때는 적용하고 싶은 클래스들을 복수 선택해서 한번에 적용할 수 있는데요. 원하는 태그의 이름들을 쉼표(,)를 사용하여 나열하면 스타일을 한꺼번에 적용시킬 수 있습니다. 태그명1, 태그명2, 태그명3, ... 안녕, 나는 H1이야 안녕, 나는 H4라고해 첫번째 p태그 두번째 p태그 다시 첫번째 p태그 다시 두번째 p태그 다시 세번째 p태그 다시 네번째 p태그 .first, .second { c.. 2021. 5. 21. HTML/CSS] class-selector(클래스 선택자), id-selector(아이디 선택자) 지난 시간에 이어 선택자를 학습해 보겠습니다. 스타일 속성을 적용하는 요소를 'selector(선택자)'라고 부릅니다. 선택자를 이용하면 하나 또는 여러개의 태그에 스타일을 지정해 줄 수 있습니다. 원하는 대로 여러 태그에 한번에 스타일을 적용할 수 있으니 간편하겠죠? 오늘 사용할 예시입니다. index.html만 작성하고 style.css는 비워두었습니다. class 선택자(class-selector) : 특정 부분에만 스타일을 적용하고 싶을 땐, class 선택자를 사용합니다. 예를 들어 같은 p태그라도 두번째 단락에는 다른 색상을 적용하고 싶다면, class 선택자를 사용하면 됩니다. .content1 { color: gray; } .content2 { color: rgb(212, 57, 199);.. 2021. 5. 18. HTML/CSS] 전체 선택자, 태그 선택자 스타일 속성을 적용하는 요소를 'selector(선택자)'라고 부릅니다. 선택자를 이용하면 지정된 하나의 태그에 스타일을 지정해 줄 수 있습니다. 또는 선택자를 이용하여 여러개의 태그를 묶에서 스타일을 지정해 줄 수 있습니다. 이렇게 하면 한번에 여러 태그에 스타일을 적용할 수 있으니 간편하겠죠? 오늘 사용할 예시입니다. index.html만 작성하고, style.css는 비워두었습니다. 웹페이지에 아래와 같이 출력됩니다. 전체 선택자(universal selector) 전체 선택자는 HTML페이지의 모든 요소(태그)에 같은 CSS속성을 적용할 때 사용합니다. *(별표)는 전체 선택자로 *뒤에 속성과 속성값을 써주면 됩니다. * {속성1: 속성값1; 속성2: 속성값2; ...} * { color: blu.. 2021. 5. 17. 이전 1 2 3 4 다음
