CSS 기초 정리

티스토리 뷰

Web/CSS

CSS 기초 정리

HAN_PY 2020. 12. 28. 13:03

1. CSS란

CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

CSS는 웹페이지에서 스타일이나 레이아웃에 이용된다. 그리고 html 웹페이지 자체에서도 사용 가능하고, 따로 css 파일을 만들어서 불러오는 방식으로도 사용 가능하다. 매우 기초적인 것 중에 중요한 부분 위주로 정리해 보겠다. 그 이후에 CSS 구조 정리로 넘어가자

.html 문서와 같은 폴더에 있는 style.css을 불러오려면 아래의 코드를 head에 넣어주면 된다.

<link rel="stylesheet" href="styles.css">

이 <link> 요소는 브라우저에 rel 속성을 사용하여 스타일 시트를 위치시키고 시타일 시트의 취체에 href 속성 값으로 사용하도록 브라우저에 지시하는 것이다. html에 넣어보면 기본 코드는 아래와 같을 것이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

  </body>
</html>

아래의 예시를 보면서 좀 더 세부적으로 css를 html에 적용하는 법을 알아보자.

1.1 Applying CSS to your HTML

HTML에 CSS를 적용하는 방법에는 크게 3가지로 나눠진다.

1. External stylesheet(외부 스타일 시트)

외부 스타일 시트는 CSS를 `.css``. css`확장명이 있는 별도의 파일로 작성하고 HTML `<link>``<link>`요소에서 참조하는 것이다. 이때 초보자들은 같은 폴더 안에서 hanpy.html과 style.css를 만들어서 적용해보자.

#html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

#style.css
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

`href`속성은 `<link>`파일 시스템의 파일을 참조해야 한다.

2. Internal stylesheet(내부 스타일 시트)

내부 스타일 시트는 외부 CSS 파일이 없는 대신 head 안의 style에 CSS를 배치합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

웬만하면 쓰지 말고 첫 번째 방법을 사용하자. 왜냐하면 코드가 가독성이 떨어지기 때문이다.

3. inline stylesheet

인라인 스타일은 `style`속성 내에 포함된 하나의 요소에만 영향을 주는 CSS 선언입니다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

쓰는 것을 추천하진 않는다.

2. CSS 구문.

h1 { color:blue }

h1은 스타일을 넣기 위해 html의 요소를 정하는 것이다.
color:blue는 선언하는 곳이다.
color 은 프로퍼티(property)이다.
blue는 값(Value)이다.

h1 {
  color: red;
  font-size: 5em;
}

h1 이란 one headings로 우리가 스타일링하려는 타깃을 적은 것이다.
{} 대괄호 안에는 하나나 여려 개의 declarations가 있다.
declarations는 property와 value 쌍의 형태로 되어 있다.
:을 기준으로 왼쪽이 특성(property)이고 오른쪽이 값(value)이다.

p, li {
  color: green; 
  }

p 태그와 li 태그를 녹색으로 스타일링하기 위해 선택한 것이다.
, (쉼표)로 구분하여 여러 개의 tag를 한 번에 잡을 수 있다.

3. Selectors

Selector란 HTML 문서에 특정 부분에 스타일을 적용하기 위해 선택하는 것이다. id값이나 class를 이용하여 주로 선택을 하는데, 주로 class로 선택을 한다. id는 자바스크립트를 위해 일단 남겨놓자. 선택할 수 있는 방법의 예는 아래와 같다.

h1
a:link
. manythings
#onething
*
. box p
.box p:first-child
h1, h2,. intro

3.1 class 적용하기

html 코드가 길어지는 경우에 특정 tag만 스타일링하는 방법이 있다. tag안에 class를 넣는 것이다. 아래의 예제를 통해 알아보자.

<ul>
  <li> 항목 하나 </li>
  <li class="special"> 항목 2 </li>
  <li> 항목 <em> 3 개 </em> </li>
</ul>

위의 예는 ul tag안의 li 태그에 class를 첨가한 것이다. 위의 html 코드 예시에 아래의 css를 적용한다고 가정하고 풀이를 시작해 보겠다.

.special {
  color: orange;
  font-weight: bold;
}

<li class="special"> 항목 2 </li>처럼 class안에 special이 있는 곳에 style을 적용하는 코드이다.

li.special {
  color: orange;
  font-weight: bold;
}

바로 위에서는 모든 special 클래스에 적용이 되지만, 여기서는 li 태그 아래에 있는 special클래스만 적용된다.

li em {
  color: rebeccapurple;
}

li 내부에 속하는 em(li기준으로 자손 tag)만 적용된다.

h1 + p {
  font-size: 200%;
}

동일한 계층 구조에서 h1 다음에 p 오면 p만 2배로 사이즈를 키워준다.

4. a태그 효과 주기

# html의 예
<p>This is a paragraph of text. In the text is a <span>span element</span> and also a <a href="https://example.com">link</a>.</p>

구글에서 검색 후 보고 싶은 내용을 눌렀다면, 그 이후에는 색표시가 되는 것을 알 수 있다. 이러한 것들을 적용하기 위해서 css를 사용할 수 있다. 적용하는 예는 아래와 같다.

# CSS의 예
a:link {
  color: pink;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

link는 글자를 핑크로 바뀌 준다
visited는 방문 시 색을 녹색으로 바꿔준다.
hover은 마우스를 대면 밑줄이 없어진다.

5. 특징 모음

5.1 cascade and specificity(계단 및 특수성)

아래의 html의 element와 css를 표현한 것이다. 같은 element에 css가 적용될 때, html에는 무슨 색이 표현될지 생각해 보자.

# html
<p class="special">what color am I?</p>

# css
.special {
  color: red;
}

p {
  color: blue;
}

p selector에 위의 css와 같이 class와 p tag의 두 가지 요소가 적용된다. 과연 색은 red가 될까? blue가 될까? 결론부터 말하면 blue가 된다. 왜냐하면 CSS에서 정의된 것들은 위에서부터 순서대로 하나씩 정의되기 때문이다.

'Web > CSS' 카테고리의 다른 글

CSS layout(구조, 배치) flex 기초 정리 (0)	2022.02.12
CSS layout(구조, 배치) Grid 기초 정리 (0)	2022.02.09
CSS 글자 폰트(font) 스타일 기초 정리 (0)	2022.01.31
css 선택자 기초 정리 (0)	2022.01.25
css 초기 셋팅(초기화) (0)	2022.01.05

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

AI Platform / Web

티스토리 뷰