TIL 005 | CSS Basics
정보를 담을 수 있는 언어가 html이었다면 여기에 스타일을 더해주는 언어는 css이다. Cascading Style Sheets(css)에 대해서 정리해보자.
CSS Basics
1. 기본문법
selector {
property : value;
}
selector 스타일을 적용하고 싶은 html element나 class를 선택할 수 있다.property 적용하고자 하는 속성을 결정할 수 있다. (color, border 등)value 구체적인 속성의 값을 결정할 수 있다.
2. 적용법
Inline Style Sheet
<p style="color:red;"> 문장 </p>
selector {
property : value;
}selector 스타일을 적용하고 싶은 html element나 class를 선택할 수 있다.property 적용하고자 하는 속성을 결정할 수 있다. (color, border 등)value 구체적인 속성의 값을 결정할 수 있다.<p style="color:red;"> 문장 </p>css를 html에 적용하는 방법 중에서 가장 권장하고 싶지 않은 방법이다. Inline Style Sheet로 작성된 스타일의 경우에 다른 방법으로 적용된 스타일보다 우선적으로 적용되기 때문에 수정이 불편하고 html과 style sheet를 분리한다는 의도에도 적합하지 않다.
Internal Style Sheet
<head>
<style>
<p> {
color: red;
{
</style>
</head>이 방법 역시 html 문서 안에 style sheet를 작성하는 방법으로 <head> 태그 안에 <style> element를 작성하고 그 안에 selector를 사용해 작성할 수 있다. 위의 방법에 비해 여러 개의 element를 한 번에 선택하고 사용할 수 있다는 장점이 있다. 다만, 이 방법 역시 html과 style sheet를 함께 작성하게 된다는 단점이 있다.
External Style Sheet
<head>
<link href="directory/style.css" rel="stylesheet" type="text/css">
</head>따로 style sheet를 css 형식으로 작성을 한 다음에 html에서 링크해서 불러오는 방식이다. 여러 개의 html 문서에 적용할 수 있다는 장점이 있고 html과 style sheet를 분리했기 때문에 유지 보수 측면에서도 좋다.
Selector
h1{
color: red;
}
.class{
color: blue;
}
#id{
color: green;
}
*{
box-sizing: border-box;
}
h1{
color: red;
}
.class{
color: blue;
}
#id{
color: green;
}
*{
box-sizing: border-box;
} element selector html element를 선택하여 스타일을 적용할 수 있다.
class selector html에서 부여한 class를 선택하여 스타일을 적용할 수 있다. class의 경우에는 여러번 사용이 가능하다.
id selector html에서 부여한 id를 선택하여 스타일을 적용할 수 있다. id의 경우에는 한 html에서 중복되어서는 안된다.
all selector html 전체에 적용할 스타일이 있을 때 사용하는 선택자이다.
1. Child, Descendant & Sibiling Combinators
<!-- html -->
<body>
<section>
<h1>TIL</h1>
<ul>
<li class="numberone">
<h1>name</h1>
<p>jeny</p>
</li>
<li>
<h1>name</h1>
<p>rose</p>
</li>
<li>
<h1>name</h1>
<p>risa</p>
</li>
</ul>
</section>
</body>/* css */
section h1{
color: blue;
}
section > h1{
color: red;
}
.numberone ~ li > p{
color: green;
}
.numberone + li > p{
color: yellow;
}parent descendants 사이에 공백을 두고 작성하면 부모 요소의 자손 요소들을 선택하게 된다.
parent > child 부모 요소가 직접 감싸고 있는 자식 요소를 선택할 때 사용한다.
parent ~ sibiling 부모 요소가 감싸고 있는 다음 형제 요소 모두를 선택한다.
parent + sibiling 바로 다음 형제 요소만 선택한다.
2. Structural Pseudo-classes
li:first-child{
color: #0066ff;
}
li:last-child{
color: #ff4949;
}
li:nth-child(2){
color: #ffc82c;
}첫번 째, 마지막, 특정 순서 등을 지정할 수 있는 구조적 가상 클래스 선택자를 통해서 원하는 요소를 선택할 수 있다.
3. 우선도
Selector의 경우에 id > class > element 의 순서로 우선도를 가지고 있다. 또한, 강제적으로 스타일을 적용하고 싶은 경우에는 !important를 사용할 수 있다. 이에 주의하여 css selector를 사용해야 한다.
Author And Source
이 문제에 관하여(TIL 005 | CSS Basics), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jun_n3/TIL-005-CSS-Basics저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
