1. CSS selector
HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다.
element에 style 지정을 위한 3가지 기본 선택자
- tag로 지정하기
<style> span { color : red; } </style>- id로 지정하기
<style>
#spantag { color : red; }
</style>
<body>
<span id="spantag"> HELLO World! </span>
</body>- class로 지정하기
<style>
.spanClass { color : red }
</style>
<body>
<span class="spanClass"> HELLO World! </span>
</body>
CSS Selector의 다양한 활용
- id, class 요소 선택자와 함께 활용
#myid { color : red }
div.myclassname { color : red }- 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)
h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }- 요소 선택 (공백) : 자손요소
- 아래 모든 span태그에 red색상이 적용됨
<div id="jisu"><div> <span> span tag </span></div> <span> span tag 2 </span> </div>
#jisu span { color : red }- 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.
- 아래는 span tag 2만 red 색상이 적용됩니다.
<div id="jisu"> <div> <span> span tag </span> </div> <span> span tag 2 </span> </div>
#jisu > span { color : red }- n번째 자식요소를 선택합니다. (nth-child)
- 첫번째 단락에 red 색상이 적용됩니다.
<div id="jisu">
<h2>단락 선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
<p>세번째 단락입니다</p>
<p>네번째 단락입니다</p>
</div>
#jisu > p:nth-child(2) { color : red }
* 주의 *
E:nth-child(n)는 부모의 n번째 자식인 E 요소
E:nth-of-type(n)은 같은 유형의 n번째 형제인 E요소
이기 때문에 p:nth-child(2) 가 첫번째 단락입니다. 를 빨갛게 칠한다.
2. 기본 스타일 변경하기
CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다.
이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다.
색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다.
font 색상 변경
- color : red;
- color : rgba(255, 0, 0, 0.5); // 마지막은 투명도
- color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법이죠.
font 사이즈 변경
- font-size : 16px;
- font-size : 1em; // 16px을 기준으로 1배, 2배, ... 상위 태그 속성을 통해 기준이 변경될 수도 있다.
배경색
- background-color : #ff0;
- background-image, position, repeat 등의 속성이 있습니다.
- background : #0000ff url(“.../gif”) no-repeat center top; //한 줄로 정의도 가능
글씨체/글꼴
- font-family:"Gulim";
- font-family : monospace;
웹 폰트
웹폰트는 브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드 받아 사용할 수 있는 방법입니다.
다양하고 예쁜 폰트들을 웹폰트로 사용할 수 있긴 하지만 다운로드를 받아야 한다는 단점이 있습니다.
다운로드 시간이 오래 걸리게 되면 화면에 노출되는 시간이 느려져 오히려 사용자에게 불편함을 느끼게 할 수 있는 것 입니다.
또한 다양한 해상도에서 깨지는 문제도 발생할 수 있습니다.
웹폰트는 수많은 종류가 있습니다.
대표적으로 구글 웹폰트가 있으며 최근에는 다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트도 등장했습니다.
(unicode영역 중 Private Use Area (PUA) 영역을 활용해서 제작)
또한 웹폰트 방식말고, 기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능합니다.
아래 unicode를 사용한 HTML 코드를 참고하세요.
<div> 안녕하세요 ☺</div> //☺ 웹 화면에는 웃음 표시가 표현되는 코드입니다.
Ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body > div {
font-size:16px;
background-color: #ff0;
font-family:"Gulim";
}
.myspan {
color : #f00;
font-size:2em;
}
</style>
</head>
<body>
<div>
<span class="myspan">my text is upper!</span>
</div>
</body>
</html>
'Programming > MERN' 카테고리의 다른 글
| Float 기반 샘플 레이아웃 (0) | 2020.12.23 |
|---|---|
| CSS 앨리먼트 배치방법 (0) | 2020.12.23 |
| CSS 적용방법 , 우선순위, 상속 (0) | 2020.12.22 |
| HTML 정리 (0) | 2020.12.22 |
| ! 인증 체크하기 ! (0) | 2020.11.10 |