ΛneOK v4 blog

일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.

# Side Menu

CSS 시작하기

2020. 3. 16., AneOK

Cascading Style Sheets

Cascading Style Sheets (CSS)는 documents가 사용자에게 어떻게 보일까를 기술하는 언어입니다. html문이 뼈대라면 css는 겉 피부 또는 확장이라고 할 수 있습니다.

CSS를 사용하면 웹 개발자와 디자이너 분리가 가능해지게 됩니다. 적용 방식은 4가지 있습니다.

<head>
  <style type="text/css">
      body{ margin:0; padding:0; }
  </style>
</head>

<head>
  <link rel="stylesheet" href="파일명.css" type="text/css">
</head>

<head>
  <style type="text/css">
    @import url(style.css);
  </style>
</head>

<body>
  <p style="height:100px; color:blue">
</body>

외부에서 파일을 호출할 경우에는 밑의 앳(@)명령문중 하나인 charset으로 utf-8 값을 설정하는 것이 좋습니다.

@charset "utf-8";   /* CSS의 @문으로 언어 인코딩을 utf-8로 설정합니다. */

Rule Set(Rule)은 HTML페이지 안의 특정 요소들을 어떻게 렌더링(Rendering)할 것인지 브라우저에 알려주는 CSS 문장입니다. 밑의 스타일 규칙이라고도 불리는 이 문장은 스타일에 관한 규칙들을 나타냅니다. rule set 자세히 알아보기

①

body /* 꾸미고자 하는 대상인 <body>요소를 선택합니다. 이를 `선택자`라고 합니다. */

`/* ... */`문은 설명을 적은 글이라서 생략 가능합니다.

②

body {   /* 여는 중괄호로 시작을 알립니다. */
  /* 꾸밀 선언문이 들어갈 부분입니다. */
} /* 닫는 중괄호로 끝을 나타냅니다. */

이제 대상을 선언하고 꾸미는 일만 남았습니다.

③

body {
  font-size : 75%; /*웹 브라우저의 기본 글짜 크기는 16px으로 75%(12px)로 설정 됩니다. */
}

지금까지 css 기초에 대하여 적어 보았습니다. 저도 기초가 없어서 고생을 한 것을 기억하니 이 글을 잘 적었다 싶네요.