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에서 사용할 수 있는 키워드 조합
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- 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. 이미지 스트라이프
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀