지금, 개발하기/CSS29 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. HTML/CSS] 배경 이미지 반복? 배경 이미지 사이즈 변경? 이번에는 웹 문서의 배경을 어떻게 꾸미는지 알아보겠습니다. 배경에는 단순히 색상을 넣을 수도 있지만 이미지를 첨부해서 표현할 수도 있습니다. 이미지 파일을 이용해서 어떻게 배경 스타일을 꾸미는지 알아보도록 하겠습니다. 1. background-repreat 배경이미지의 반복 방법을 지정해주는 스타일입니다. 배경 이미지의 크기가 배경의 크기보다 작을 경우에는 기본적으로 반복(reapeat)해서 표현됩니다. background-repreat의 속성을 없애면 반복 방향을 지정 할 수도 있고, 아예 없애버릴 수도 있습니다. background-repreat: repeat / repeat-x /repeat-y / no- repeat / space / round // 요소의 전체 크기를 꽉 채울 때까지 x, y축을.. 2021. 5. 15. 이전 1 ··· 3 4 5 6 7 8 다음
