지금, 개발하기81 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. HTML/CSS] pt, em으로 폰트 크기 조절하기 페이지에 글자를 넣어서 사용할 때면 폰트 크기를 조절하고 싶을 때가 많습니다. CSS에서 글자의 크기를 조절하려면 font-size를 사용하면 됩니다. font-size의 단위에는 px, pt, em, %등이 있지만 가장 기본적인 방법을 사용해서 폰트크기를 조절해 보도록 하겠습니다. CSS에서 폰트 크기를 조절하는 대표적인 방법은 px, pt, em을 사용하는 것입니다. px과 pt는 절대적인 폰트의 크기를 조절할 수 있고, %와 em은 상대적인 폰트의 크기를 조절할 수 있습니다. 1. 폰트 크기 조절_ px px을 이용해서 모든 태그를 20px로 맞추어 보았습니다. 2. 폰트 크기 조절_ pt : 이번에는 pt를 사용해보겠습니다. 참고로 pt(point)는 px의 약 1.33배입니다. 3. 폰트 크기 .. 2021. 5. 14. 이전 1 ··· 14 15 16 17 18 19 20 21 다음
