[CSS] 문법과 규칙

link717·2020년 8월 10일

CSS

목록 보기

5/9

🌼 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)를 정의하는 rel attribute가 필요하다. <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/

link717

Turtle Never stop

이전 포스트

[CSS] Display

다음 포스트