[DAY2] CSS 기초

유진·2023년 7월 7일

CSS 기초

CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하기 위해 사용되는 스타일 시트 언어이다.

h1{
	color: blue;
    text-align: center;
    font-size: 20px;
}

h1 : Selector
{ ... } : Declaration block
color: blue; , ... : Declaration
color, text-align, font-size, ... : Property
blue, center, 20px , ... : Value

Inline, Internal, and External CSS

💡 보통의 경우 External CSS를 사용한다.

Inline CSS(인라인 CSS):

Inline CSS는 HTML 요소의 style 속성 내에 직접 CSS 규칙을 작성하는 방식이다.
```

<p style="color: blue; font-size: 16px;">인라인 CSS 예시</p>
```
인라인 CSS는 특정 요소에 직접 스타일을 적용하는 데 유용하지만, 재사용성과 유지보수성이 낮다. 일반적으로 작은 규모의 스타일링에 사용된다.

Internal CSS(내부 CSS):

Internal CSS는 <style> 태그를 사용하여 HTML 문서 내에 CSS 규칙을 포함하는 방식이다.

<style> 태그는 일반적으로 HTML 문서의 <head> 요소 내에 배치된다.

<!-- html -->
<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>내부 CSS 예시</p>
</body>

내부 CSS는 한 HTML 문서에서 여러 요소에 스타일을 적용하는 데 유용하다.
하지만 여러 HTML 문서에 동일한 스타일을 적용하려면 중복 작성해야 하므로 유지보수성이 떨어진다.

External CSS(외부 CSS):

External CSS는 별도의 CSS 파일을 작성하고, HTML 문서에서 <link> 태그를 사용하여 외부 CSS 파일을 연결하는 방식이다.

외부 CSS 파일은 .css 확장자를 가지며, HTML 문서와 별도로 저장되어 관리된다.

<!-- html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>외부 CSS 예시</p>
</body>

/* style.css */
p{
  color:blue;
}

외부 CSS는 여러 HTML 문서에서 재사용하고 일관된 스타일을 유지하는 데 유용하다. 스타일 시트의 변경이 필요한 경우에도 CSS 파일 하나만 수정하면 된다.

Text 스타일링 예시

다양한 속성들

h1{
  font-size: 26px;
  font-family: sans-serif; /* 글꼴 */
  text-transform: uppercase;
  font-style: italic;
	text-align: center; /* 텍스트가 페이지의 중앙에 위차하게 함. 엄밀히 말하면 부모 요소의 중앙. */
	line-height: 1.5; /* 줄 높이가 글꼴 사이즈의 1.5배가 된다는 뜻이다. 기본 값은 1 */
}

unordered list의 bullet point 없애기

<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

.related li{
  list-style: none;
}

Combining Selector와 Descendant Selector

Combining Selector

h1, h2, h3, h4, p, li{
  font-family: sans-serif;
}

Descendant Selector

/* (parent element) (child element)*/

footer p {
  font-size: 16px;
}

article header p{
  font-style: italic;
}

Id Selector와 Class

Id Selector #

<!--html-->

<p id="author">Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>

/* css */

#author {
  font-style: italic;
}

id 이름은 중복되선 안되고 한 번만 쓸 수 있다.

Class .

<!--html-->

<p class="related-author">By Jonas Schmedtmann</p>

/* css */

.related-author{
  font-size: 18px;
  font-weight: bold;
}

class는 같은 방식으로 여러 element를 스타일링 할 수 있다.

보통의 경우 id는 사용하지 않고 class를 기본으로 사용한다.

Color

RGB 표기법

rgb(0,255,255)
투명성을 포함한 rgba(0,255,255,0.3) (투명성을 alpha라고도 하기 때문에 rgba라고 하는 것)
0으로 갈 수록 희미해진다.
회색의 경우 모든 rgb 값이 동일하다는 특징이 있다.
진한 회색: rgb(69,69,69) #444444 #444
연한 회색: rgb(183,183,183) #b7b7b7
미묘한 회색: #f7f7f7

16진법 표기법

#00ffff → 같은 색에서 같은 문자를 가질 때 #0ff 라고 속기법으로 쓸 수도 있다.

예시

h1,h2,h3{
  color:#1098ad;
}

aside {
  background-color: #f7f7f7;
  border-top:5px solid #1098ad;
  border-bottom:5px solid #1098ad;
}

border는 다양한 value를 함께 넣을 수 있는 property이다.

Pseudo Class

first/last/nth-child

li:first-child{
  font-weight: bold;
}

li:last-child{
  font-style: italic;
}

li:nth-child(even){
  color: orange;
}

li:nth-child(2){
  color: red;
}

❗ first/last-child나 nth-child는 모든 타입에서 순서를 매긴다.

div p:first-child이면 div의 첫 번째 자식을 찾는데

아래를 보면 p는 첫 번째 자식이 아니다.
따라서 이 경우 selector로 설정해준 내용이 적용되지 않는다.
즉, 부모 요소 아래 다른 요소들이 섞여있는 경우 의사 클래스가 원하는대로 잘 작동하지 않을 수 있다.

같은 p 중에 첫 번째 자식을 찾고 싶은 것이면 nth-of-type을 사용하면
같은 타입끼리만 순서를 매기기 때문에 해결된다.

Styling Hyperlinks

a 선택자는 HTML 문서 내의 모든 링크를 선택한다.

a:link 선택자는 아직 방문되지 않은 링크를 선택힌다.

이 선택자는 링크를 방문하기 전의 상태에 스타일을 지정하고자 할 때 사용된다.

a:visited 선택자는 이미 방문한 링크를 선택하기 위한 CSS 선택자이다. 이 선택자는 사용자가 이미 클릭하여 방문한 링크에 스타일을 적용할 때 사용된다.

a:hover 선택자는 사용자가 링크(<a> 요소) 위로 마우스를 가져가는 동안의 상태를 선택하는 CSS 선택자이다. 이 선택자는 링크에 마우스 호버(hover)할 때의 스타일을 지정할 수 있다.

a:active 선택자는 사용자가 링크를 클릭한 직후의 상태를 선택하는 CSS 선택자이다. 이 선택자는 링크가 활성화된(active) 동안의 스타일을 지정할 수 있다.

a:link{
  color: #1098ad;
  text-decoration: none;
}

a:visited {
  color: #1098ad;
}

a:hover {
  color: orangered;
  font-weight: bold;
  text-decoration: underline wavy orangered;
}

a:active{
  background-color: black;
}