1. CSS
CSS선언 방식
style을 HTML에 적용하는 방법
-
inline : html 태그 안에다가 삽입, 같은 속성을 추가하려 할 때 다른 방법보다 우선 적용된다.
inline이 가장 먼저 반응한다!
-
internal : style 태그로 지정하기. head안에 바로 넣는다. 별도의 css파일을 관리하지 않아도 된다. 브라우저가 요청을 보내지 않는다.
구조와 스타일이 섞여있어서, 유지, 보수, 관리가 어렵다.
- external : 외부파일(.css)로 지정하기. main.css
internal과 external은 우선순위가 동등하다.
겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.
selector(선택자)
property
value
{ }는 오브젝트를 표현함.
element.stype << inline값 반영
2. CSS 상속
부모 속성은 그대로, 자식 속성을 추가
상위에서 적용한 스타일은 하위에도 반영된다.
- 색상과 글자 크기 등은 그대로 상속된다.
- box-model 이라고 불리는 속성들(width, height, margin, padding, border), 즉 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않는다.
Cascading
CSS는 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다.
CSS Specificity
1) 선언방식에 따른 차이, 우선순위
inline > internal >= external
2) 동일한 것이면, 나중에 것이 적용된다. (코드 상 아래 위치)
3) 조금 더 구체적으로 표현된 것이 먼저 적용 - 점수를 더 준다.
body > span {
color: red;
}
span {
color: blue;
}red가 우선 적용.
4) id 값에는 class보다 더 높은 값을 부여해준다.
id(100) > class(10) > element(1)
<div id="a" class="b">
text...
</div>
#a {
color: red;
}
.b {
color: blue;
}
div {
color: green;
}red가 우선적용
class가 11개 적용되서 110점이 된다고 id가 보다 우선순위가 높지 않다.
금메달 갯수를 통해 우선결정이 되는 올림픽과 같이 id는 금메달, class는 은메달, tag는 동메달 라고 보면 된다.
3. CSS Selector
HTML의 요소를 tag, id, class, html 태그속성 등을 통해 쉽게 찾아주는 방법.
pattern 매칭을 시켜준다.
element에 style을 지정하기 위한 3가지 기본 선택자.
1) tag
span {
color: red;
}
<span> span tag </span>2) id
#myspan {
color: green;
}
또는
span#myspan {
color: green;
}
<span id="myspan"> span id </span>3) class
.spanClass {
color: purple;
}
또는
span.spanClass {
color: purple;
}
<span class="spanClass"> span class </span>-
id, class 요소 선택자와 함께 활용 가능
#myid {color: red;} div.myclassname {color: red;}
-
그룹 선택
h1, span, div {color: red;} h1, span, div#id {color: red;} h1.span, div.classname {color: red;}
-
하위 요소 선택 (공백)
<div id="kim"> <div> <span> span tag </span> </div> <span> span tag 2 <span> </div>#kim span {color: red;}kim 하위의 모든 span에 대해 red적용
-
자식 선택 (>)
#kim > span {color: red;}kim 바로 아래의 자식 span만 red색상 적용 (span tag 2)
-
n번째 자식요소를 선택(nth-child)
<dir id="nth"> <h2>select phrase</h2> <p>phrase1</p> <p>phrase2</p> <p>phrase3</p> <p>phrase4</p> </dir>#nth > p:nth-child(2) { color: brown; }phrase 1 이 brown 적용
nth-of-type : 같은 태그의 n번째를 찾아서 적용
-
nth-child : 태그 상관없이 n번째를 찾아서 적용 (자식 태그)
4. CSS 기본 style 변경하기
1) color
2) font-size:
1em 이 기본단위 (기본값은 16px이고, 상속받은 기본 픽셀값이 기본값이 될 수도 있다.)
2em, 1.5em 등등으로 쓸 수 있다.
<head>
<style>
body > div {
font-size: 32px;
}
.myspan {
/*color: rgba(255, 0, 0, 0.5);*/
color: #ff0000; /* 또는 #f00; */
font-size: 2em; /* 64px */
}
</style>
</head>
em은 M(폰트 중 가장 큰 값)을 표현한 것.
color는 개발자도구 element Tab들어가서, 원하는 색상 골라 rgba값 얻을 수 있다.
3) background
background-color: #ff0;
background-image, position, repeat
backgounrd: #0000ff url(".../gif") no-repeat center top; /* 한 줄로도 정의 가능 */
4) font-family
font-family: "Gulim", monospace, sans-serif;
컴마로 나열된 폰트는 앞에서부터 우선순위 적용되며, 해당 폰트가 깔려있지 않으면 다음 폰트가 우선순위가 된다.
웹 폰트
웹폰트는 브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드 받아 사용할 수 있는 방법입니다.
다양하고 예쁜 폰트들을 웹폰트로 사용할 수 있긴 하지만 다운로드를 받아야 한다는 단점이 있습니다.
다운로드 시간이 오래 걸리게 되면 화면에 노출되는 시간이 느려져 오히려 사용자에게 불편함을 느끼게 할 수 있는 것 입니다.
또한 다양한 해상도에서 깨지는 문제도 발생할 수 있습니다.
웹폰트는 수많은 종류가 있습니다.
대표적으로 구글 웹폰트가 있으며 최근에는 다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트도 등장했습니다.
(unicode영역 중 Private Use Area (PUA) 영역을 활용해서 제작)
또한 웹폰트 방식말고, 기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능합니다.
아래 unicode를 사용한 HTML 코드를 참고하세요.
<div> ☺ </div> //☺
[출처 - 부스트코스, 웹 프로그래밍]
'lang > HTML, CSS' 카테고리의 다른 글
| [CSS] 배치, 레이아웃 설계, float (1791) | 2019.10.05 |
|---|---|
| [HTML] 구조설계 (0) | 2019.10.05 |
| [HTML] 기초 (0) | 2019.10.05 |
댓글