지금, 개발하기/CSS30 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] 전체 선택자, 태그 선택자 스타일 속성을 적용하는 요소를 'selector(선택자)'라고 부릅니다. 선택자를 이용하면 지정된 하나의 태그에 스타일을 지정해 줄 수 있습니다. 또는 선택자를 이용하여 여러개의 태그를 묶에서 스타일을 지정해 줄 수 있습니다. 이렇게 하면 한번에 여러 태그에 스타일을 적용할 수 있으니 간편하겠죠? 오늘 사용할 예시입니다. index.html만 작성하고, style.css는 비워두었습니다. 웹페이지에 아래와 같이 출력됩니다. 전체 선택자(universal selector) 전체 선택자는 HTML페이지의 모든 요소(태그)에 같은 CSS속성을 적용할 때 사용합니다. *(별표)는 전체 선택자로 *뒤에 속성과 속성값을 써주면 됩니다. * {속성1: 속성값1; 속성2: 속성값2; ...} * { color: blu.. 2021. 5. 17. HTML/CSS] 배경 이미지의 위치를 이동시키자 배경 이미지를 편집하다 보면 이미지의 위치를 조정하고 싶을 때가 있습니다. 그럴때는 background-position 속성으로 이미지가 표시되는 위치를 조절할 수 있습니다. backgound-position 속성 background-position 속성은 보통 수평 위치와 수직 위치 값을 둘 다 표시합니다. 첫번째로 지정한 값은 수평 위치 값, 두번째로 지정한 값은 수직 위치 값이됩니다. 만약 값을 하나만 표시한다면, 표시된 값을 수평 위치 값으로 간주하고 수직위치는 center로 간주합니다. 길이(px) 표시법 : 배경 이미지의 위치를 길이로 직접 지정합니다. 아래는 style.css 페이지에서 왼쪽 상단을 기준으로 가로 200px, 세로 200px의 위치에 이미지가 놓이도록 표시한 것입니다. div.. 2021. 5. 16. 이전 1 ··· 3 4 5 6 7 8 다음
