CSS 02 기본 속성

12683 단어 CSSCSS

1. 색

css에서 색을 표현하는 방법은 3가지가 있고 이는 html에서 색을 표현하는 방법과 같다.
차이점은 html에서는

<h1 style="color:teal">색상 이름으로 표현된 청록색</h1>

이렇게 요소 안에서 속성을 불러왔다면, css에서는

<head>
	<meta charset="UTF-8">
	<title>CSS Colors</title>
	<style>
		.blue { color: blue; }
		.green { color: green; }
		.silver { color: silver; }
		.teal { color: teal; }
		.red { color: red; }
	</style>
</head>

<body>

	<h1 class="blue">색상 이름으로 표현된 파란색</h1>
	<h1 class="green">색상 이름으로 표현된 녹색</h1>
	<h1 class="silver">색상 이름으로 표현된 은색</h1>
	<h1 class="teal">색상 이름으로 표현된 청록색</h1>
	<h1 class="red">색상 이름으로 표현된 빨간색</h1>

</body>

이렇게 해당 요소에서 선택자를 선언하고 head태그의 style태그 안에서 선택자를 불러오고 거기서 속성을 써준다.

2. 배경 속성

background-color

  • 해당 HTML 요소의 배경색(background color)을 설정

background-image

  • HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정. 설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복

background-repeat

  • 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정.
  • background-repeat: repeat-x; => 수평반복 (y => 수직)**

background-position

  • 반복되지 않는 배경 이미지의 상대 위치(relative position) 설정
  • 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수 있고 이때 기준은 왼쪽 상단(left top)
  • background-position에서 사용할 수 있는 키워드 조합
      1. left top
      1. left center
      1. left bottom
      1. right top
      1. right center
      1. right bottom
      1. center top
      1. center center
      1. center bottom

background-attachment

  • 위치가 설정된 배경 이미지를 해당 위치에 고정
  • 스크롤 내려도 배경 안움직임
  • 위의 속성들을 한 줄에 적용할 수도 있음
<style>

    body { background: #FFCCCC url("/examples/images/img_man.png") 
    no-repeat left bottom fixed; }

</style>

3. 텍스트

color

  • 텍스트의 색상 설정 (font 안 붙음)
  • < body >태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용. 하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 < body >태그에 명시된 속성값보다 우선 적용

direction

  • 텍스트가 써지는 방향 설정
  • 기본적으로 왼쪽에서 오른쪽 방향
  • left-to-right(ltr) : 왼 -> 오
  • right-to-left(rtl) : 오 -> 왼

letter-spacing

  • 텍스트 내에서 글자 사이의 간격 설정

word-spacing

  • 텍스트 내에서 단어 사이의 간격 설정

text-indent

  • 단락의 첫 줄에 들여쓰기할지 안 할지 설정. 기본적으로 들여쓰기는 안 되어있음

text-align

  • 텍스트의 수평 방향 정렬 설정
  • left, right, center

text-decoration

  • 텍스트에 여러 가지 효과를 설정하거나 제거
  • overline, underline, line-through, none
  • text-decoration 속성값을 none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용

text-transform

  • 텍스트에 포함된 영문자에 대한 대소문자 설정
  • 모든 영문자를 대문자나 소문자로 변경
  • 단어의 첫 문자만을 대문자로 변경 가능
  • uppercase, lowercase, capitalize
  • 한글에는 아무 영향 없음

line-height

  • 텍스트의 줄 간격 설정

text-shadow

  • 텍스트에 간단한 그림자 효과
<head>
	<meta charset="UTF-8">
	<title>CSS Text</title>
	<style>
		p { text-shadow: 2px 2px lightgray; }
	</style>
</head>

<body>

	<h1>text-shadow 속성을 이용한 그림자 효과 설정</h1>
	<p>텍스트에 간단히 그림자 효과를 줄 수 있습니다!</p>

</body>

4. 글꼴

5. 링크

6. 리스트

7. 테이블

8. 이미지 스트라이프

[백준10250_파이썬(python)] - ACM 호텔
BOJ/16947) 서울 지하철 2호선

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage