CSS의 정의
Cascading Style Sheet
캐스캐이딩 스타일 시트 혹은 종속형 시트라고 부르며
Markup langage가 실제 표시되는 방법을 기술하는 언어로
HTML과 주로 쓰이며 XML에서도 사용 가능하다
웹사이트 스타일링의 종류
- Author Style
내가 작성하는 스타일링 (CSS파일), 가장 높은 우선순위 - User Style
사용자가 작성하는 스타일링 - Browser
브라우저에서 기본적으로 지정한 스타일링, 가장 낮은 우선순위 - !important
우선순위에 상관없이 가장 먼저 적용 (사용하지 않는것이 좋음)
CSS나 HTML이 잘못 구성되어있을 경우 적용됨
Selectors(선택자)
HTML에서 스타일링할 Tag를 고르는 규정하는 문법
Selectors를 규정하는 문법의 종류
- Universal (
*)
모든 요소를 선택 (페이지의 전체를 스타일링함)
작성 방법
* {
margins: 0px;
padding: 0px;
}- Type (
Tag)
특정 태그를 선택 (div를 작성하면 해당 태그에만 CSS가 적용)
Universal로 선택된 값보다 우선 적용됨
작성 방법
body {
padding: 10px;
font-size: 16px;
}- ID (
#)
특정 id를 선택, id는 고유의 값을 가져야 한다.
(값이 동일하면 안된다)
여러가지의 속성값을 가질 수 없다.
작성 방법
<div id="apple1">APPLE</div>
<div id="apple2">APPLE</div>#apple1 {
color: #ff0000;
}- Class (
.)
특정 class를 선택, 동일한 값을 가져도 선택할 수 있다.
(복수의 값 선택 가능)
여러가지 속성값을 가질 수 있다.
id와 달리 제한적이지 않기 때문에 자주 사용한다.
작성 방법
<div class="banana apple">I'm a BANANA</div>
<div class="banana apple tomato">I'm a BANANA</div>
<div class="banana apple tomato pineapple">I'm a BANANA</div>
<div class="banana apple tomato pineapple melon">I'm a BANANA</div>.banana {
color: #ffff00;
}- State(
:)
특정 상태를 선택, 같은 태그 중 마지막 태그만 선택하는 등
여러가지 상황에 사용할 수 있는 선택 방법이다
그만큼 많은 옵션을 가지고 있기때문에 자세한 옵션은
MDN에서 확인 가능하다
작성 방법
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</body>div:last-child {
color: #0000ff;
}- Attribute (
[])
특정 속성을 선택
속성의 시작을 포함하는 기호^[태그^="값"]
속성의 끝말을 포함하는 기호$[태그$="값"]
속성에 들어가는 단어를 포함하는 기호*[태그*="값]
속성 선택 방법에 대한 자세한 내용은 MDN에서 확인 가능
작성 방법
<input type="text" placeholder="First name" />
<input type="text" placeholder="Last name" />
<input type="password" placeholder="password" />input[placeholder~="name"] {
background-color: #00ff00;
}- Descendant ( ``스페이스바)
특정 자손을 선택, 선택 방법이 간단하며 자주 사용된다
Descendant에는 같이 사용 가능한 Combination이 있다
가장 많이 사용되는 것들은 >(부모 아래 자손) +(형제) ~ (형제와 형제)
작성 방법
<body>
<span>Hello</span>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Molestias sapiente neque sit? <span>inside</span>
</p>
</body>span {
color: #ff0000;
}
span p {
color: #0000ff;
}각 문법의 사용 가능한 속성값은 MDN에서 확인
CSS Selector 사용 연습은 아래 링크에서
BEM
Block Element Modifier
많은 엔지니어들이 CSS를 좀더 쉽게 읽기 위해
하나의 규칙을 정하고 CSS를 작성하는 것.
속성을 작성할때는 class만 사용하여 부모와 자식 형제를 구분한다.
작성 방법
<button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</button>.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button--state-danger {
color: #900;
}이렇게 작성하면 html에서 속성이 id였는지 class였는지 햇갈일 일이 줄어든다.
또한 부모 요소에 다수의 속성을 쓸때는 —(dash 2개)를 사용한다.
(button button—big button—blue)
이런 방식은 클래스 선언 종류가 많아진다는 단점이 있다.
다만 html만 봐도 어떻게 생긴 요소인지 어느정도 감을 잡을 수 있어
개인적으로는 BEM을 따르는것이 더 좋아 보인다.
Custom property (변수)
CSS를 정의하는 방법으로 문서 전반적으로 재사용할 임의의 값을 담는다.
브라우저중 IE(Internet Explorer)에서는 적용되지 않으며
자세한 사용 방법 및 적용 가능 브라우저는 MDN에서 확인 가능하다.
작성 방법은 아래와 같이 작성한다.
:root {
--main-color: #ff00ff;
}
div {
color: var(--main-color);
}변수 작성 시 주의 사항
- 변수 이름을 지을때는 제일 앞에 dash(-) 2개를 붙여 넣는다.
- 변수 이름에 빈공간이 없어야한다.
빈 공간은 모두 dash(-)로 채우는 것이 보기 좋다. - 변수를 사용할 때에는
var(...)과 같이 사용한다. - 반복적으로 사용되는 요소는 변수로 만들어두는것이 좋다.
Reset CSS
CSS에는 우리가 원하지 않아도 브라우저가 자동으로 적용시키는 속성이 있는데
이를 없애주는 방법이 있다. 이를 Reset CSS라고 하며 아래 링크를 통해
Reset CSS 속성을 확인 할 수있다. 이를 reset.css파일로 만들어서 CSS폴더에 같이 넣어주자
사용할때에는 스타일링을 하는 CSS파일에 아래와같이 넣어 사용하면 된다.
@import "reset.css";항상 시작하기 전 브라우저의 스타일을 모두 없애고
내가 직접 디자인 하는것이 더 좋다.
