🌼 CSS
CSS는 Cascading Style Sheets로 웹 개발자가 기본 형태의 서식을 가진 HTML 코드에 시각적인 효과를 줄 때 사용하는 도구이다. 기존의 HTML 태그에도 스타일 요소를 줄 수 있는 것들이 있었으나 문서의 구조를 표현하는 태그로 그것을 구현하는 것에는 한계와 복잡도가 올라가는 문제가 있어 CSS가 생겨나게 되었다.
⭐️ 동일 태그일 경우, CSS 스타일의 적용 우선순위: Inline > Internal > External
🌼 Inline CSS
style: HTML 코드 안에서 CSS 스타일을 직접 적용하고 싶을 때 사용한다. 1개 이상의 style 효과를 주고 싶을 때는 semicolon(;)으로 구분하여 추가할 수 있다. 단, HTML 코드와 섞여서 사용하면 코드 가독성이 낮아지므로 사용을 지양하는 것이 좋다.
<p style="color: red; font-size: 20px;">I'm learning to code!</p>🌼 Internal CSS
<style>: HTML 파일 안에서 각 태그별로 CSS 스타일을 적용하고 싶을 때 사용한다. 인라인 CSS에 비해서 공통된 태그에 한 번의 코드로 스타일을 한 번에 적용할 수 있다는 장점이 있지만 인라인 CSS와 마찬가지로 코드 가독성이 낮아지므로 사용을 지양하는 것이 좋다.
<head>
<style>
body {
background-color: blue;
}
hr {
height: 2px;
background-color: white;
border-style: none;
}
</style>
</head>
<body>
<!-- hr 태그의 경우, 브라우저에 기본으로 적용된 스타일이 있다. -->
<!-- 각 태그에 브라우저별 기본 스타일을 참고해서 스타일을 적용해야 한다. -->
<hr>
</body>🌼 External CSS
<link>: CSS 코드와 HTML 파일을 연결하여 적용할 때 사용한다. 반드시HTML <head>사이에 있어야하며 CSS 파일의 위치 정보를 담고 있는href와 파일의 속성 정보를(css/text) 담고있는type그리고 HMTL 파일과의 관계(relationship)를 정의하는relattribute가 필요하다.<link>태그를 사용하면 전체적인 html 파일에 사용된 태그들에게 동일한 스타일을 적용할 수 있다.
<head>
<link href="./style.css" type="text/css" rel="stylesheet">
<title>Vacation World</title>
</head>🌼 user agent style sheet
주요한 웹사이트는 기본형태의 style sheet를 갖고 있는데 그것을 부르는 명칭이다. 이것은 개발자가 새로운 디자인을 적용 할 때, 코드 적용을 더 어렵게 만들기 때문에 이러한 기본값은 무효화 하는 것이 좋다.
body {
background-color: #FFF;
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
}🌼 CSS 문법과 규칙
-
selector: CSS 문법에서selector는 누구(who)에 해당하는 정보를 의미한다. 즉, 어떤 태그에 스타일을 줄 것인지에 대한 부분을 말한다. -
property: CSS 문법에서property는 무엇(what)에 해당하는 정보를 의미한다. 즉, 스타일을 적용할 속성에 대한 부분을 말한다. -
value: CSS 문법에서value는 어떻게(how)에 해당하는 정보를 의미한다. 즉, 어떤 스타일을 적용할 것인지에 대한 정의에 대한 부분을 말한다.
selector {
property : value;
}🌼 Selector
셀렉터의 우선순위는 다음과 같다. 구체적/선순위 ← <id<class<tag → 포괄적/후순위, 스타일 적용시 id의 우선순위를 덮어쓰기 위해서는 또 다른 id를 추가하는 방법 밖에 없다. 향후 쉬운 코드작성을 위해서는 id 보다는 태그 셀렉터를 사용하는 것이 좋다.
-
*: HTML 파일에 사용된 모든 태그에 공통된(Universal) 스타일을 적용할 때 사용한다. -
태그 이름: HTML의 특정 태그를 선택하여 스타일을 적용할 때 사용한다. -
.className: HTML에서 스타일을 일괄적으로 적용할 대상을 묶을때 사용한다. 한 개의 태그에 클래스를 2개 이상 가질 경우, 각 클래스별로 스타일을 적용할 수 있다.
(id 보다 포괄적으로 사용한다.)
<img src="https://s3.amazonaws.com/codecademy content/courses.jpeg" />
<!-- className은 띄어쓰기로 구분된다. -->
<h1 class="title uppercase">Top Vacation Spots</h1>/*className별로 스타일 효과를 줄 수 있다.*/
.title {
color: teal;
}
.uppercase {
text-transform: uppercase;
}-
#id: 태그에 사용되는 Unique한 구분자로 특정한 태그에 스타일을 적용할 때 사용한다. (class보다 개괄적으로 사용한다.) -
태그 이름:state: 화면상의 태그에 특정 상태가 감지됐을 때, 해당 이벤트에서의 스타일을 적용할 때 사용된다. 이 때 state를 pseudo-class라고 부른다.(ex. button:hover) -
태그 이름[attribute 이름]: 태그 안, 특정 속성에 스타일을 적용할 때 사용한다. (ex. a[href])
chaining selectors: 한개의 HTML 태그가 2개 이상의 css 셀렉터를 가질 수 있는데 두 개 이상의 셀렉터 조합을 의미한다. 이런 경우 셀렉터는 전부 붙혀서 사용한다.
h1.special {
font-family: cursive;
}multiple selector: 반복적인 코드 사용을 피하기 위해 동일한 스타일을 사용하는 경우, selector를 ","로 구분하여 연결된 셀렉터 조합을 의미한다. css 코드를 간결하게 만들기 위해 사용한다.
h1, h2, h3 {
font-size: 16px;
}nested elements: 클래스 혹은 아이디 등으로 정의된 요소의 하위요소를 의미하며 해당 요소에 스타일을 적용해야 할 경우, 셀렉터는 공백으로 구분한다. 아래의 예시에서 최종 적용되는 것은 종속된 리스트 태그이다.
<ul class='main-list'>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>.main-list li {
font-family: cursive;
}!important: 요소가 얼마나 구체적으로 정의 되었는지와 상관없이 모든 스타일 적용 규칙을 덮어 쓸 수 있는 최상위 코드이다. 일단 한 번 사용되면 다른 코드로 덮어쓰기 매우 어렵다. css의 유연성을 위해 사용을 지양하는 것이 좋다.
p {
color: blue !important;
}
.main p {
color: red;
}출처: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors, https://youtu.be/gGebK7lWnCk, https://flukeout.github.io/
