CSS 기초 용어 정리 by 생활코딩

출처: 생활코딩 (https://opentutorials.org/)



용어 정리


표현 이름 태그 기능
<style> - HTML의 문법이면서 동시에 CSS라는 언어의 문법에 맞게 해석해서 처리해야 한다는 의미
태그명 {내용;} Selector, Declaration 해당 태그명의 모든 스타일을 내용대로 변경
style="속성:속성값" Property, Value 각 태그마다 개별 커스텀 스타일을 가능하게 함 (태그명1, 태그명2(Selector) 방식도 가능)
<div> Division 디자인 목적을 위해 사용하며 특별한 의미가 존재하지 않음
<span> - Inline element (줄 바꿈이 되지 않는 요소)
@media(조건) Media Query 조건에 따라 CSS가 동작하도록 함
<link rel="stylesheet" href="위치 및 파일명"> - 별도의 파일에 저장되어 있는 CSS를 다운받아 HTML 내에 그 코드가 있는 것처럼 동작하라는 의미



속성 정리


태그 표현 속성명 속성 기능
<style> (텍스트) color: 색상 혹은 색상코드 색상 변경
text-decoration: none 해당 태그에 대한 텍스트 장식(밑줄 표현 등)이 사라짐
text-decoration: underline 해당 태그에 대한 텍스트에 밑줄을 표시함
font-size: 숫자 px 텍스트의 크기 변경
text-align: center 해당 텍스트를 화면의 중앙으로 정렬
<style> (테두리) border-width: 숫자 px 테두리 두께 설정
border-color: 색상 혹은 색상코드 테두리 색상 변경
border-style: 테두리의 형태 실선, 단선, 점선 등을 설정
border-bottom 아래 쪽에만 테두리 표시
border: width (숫자 px) (테두리의 형태) (색상) 위와 동일한 의미의 통합 표현
<style> (화면) display: inline element의 크기만큼 화면을 부분적으로 사용
display: block element의 크기를 화면 전체적으로 사용
display: none element가 화면에서 사라짐
display: grid grid-template 등을 이용하기 위해 사용
padding: 숫자 px 박스 모델과 요소 간 숫자 크기만큼 여백을 만듦
margin: 숫자 px 서로 다른 박스 모델 혹은 요소 간 여백을 만듦
width 크기 px 혹은 비율 박스 모델 크기 조절
grid-template-columns: 숫자 px 1fr 하나의 줄에 두 개를 동시에 표시 (1fr: 나머지 공간을 모두 사용)
숫자 fr 화면 차지 비율 표현
<a> class=”saw” 한 번 이상 열어보았던 페이지에 대한 정의 클래스
class=”saw active” 현재 머물고 있는 페이지에 대한 정의 클래스
<style> (특수) .saw{} saw라는 클래스에 대한 CSS 정의 (함수 형식)
#active{} active라는 id 선택자에 대한 CSS 정의



기타 특징


  • CSS를 구성하는 중요한 요소에는 효과와 선택자가 있음
  • class 속성에는 여러 개의 값이 들어갈 수 있고 띄어쓰기로 구분함
    • 여러 개의 선택자를 통해 하나의 태그를 공동으로 제어할 수도 있음

  • 선택자 우선순위: id > 클래스 > 태그
    • 같은 것만 있다면 가장 나중에 오는 선택자가 가장 우선순위가 높으며, 각 id 값은 중복 없이 딱 하나만 존재해야 함

  • 화면의 전체를 쓰는 태그: Block level element
  • 화면의 일부를 쓰는 태그: Inline level element

  • 미디어 쿼리를 활용하면 화면의 크기 또는 스마트폰의 가로 모드, 세로 모드 등 여러 가지 화면들의 특성에 따라 어떠한 조건을 만족할 때만 CSS 내용이 동작하도록 할 수 있으며, 여러 가지 화면이 존재하는 세상에서 이 미디어 쿼리가 매우 중요한 역할을 한다고 할 수 있음

  • 중복되는 스타일 코드를 재사용하기 위해 css 확장자를 가지는 파일을 만들고 공통의 style 내용을 포함시키며, html에서는 링크를 통해 두 파일을 연결해 줌



CSS의 역사


최초 HTML이 등장하고 문서를 만들 수 있게 된 이후 사람들은 문서의 글꼴, 크기, 색상 또는 정렬 그리고 배경 등 웹페이지를 아름답게 만들고자 많은 고민을 하기 시작했다.

이에 HTML에 태그를 추가함으로써 어느 정도 구현을 하기는 했지만 한계점에 부딪혀 CSS라는 새로운 언어를 개발하였다.

지금은 쓰이진 않지만 이전엔 HTML에서 태그를 이용하여 폰트의 색깔을 변경하기도 했었다.

그런데 디자인은 매우 중요한 것이긴 하지만 디자인 자체가 정보라고 볼 수는 없으며, 웹페이지에 정보가 아닌 디자인에 대한 태그가 포함됨으로써 웹페이지의 가치가 현격하게 떨어졌다.

대량의 내용에 대해 디자인을 바꿔야 하는 경우 HTML 태그를 일일이 수정하는 것은 비효율적이고 시간이 많이 소요되기 때문에 CSS를 사용하여 쉽게 변경이 가능할 수 있도록 하였다. 즉, 중복된 코드를 단 하나의 코드를 통해 표현할 수 있게 되었다.



테스트 코드


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
<!doctype html>

<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p> Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>

<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>



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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body {
margin: 0;
}
h1 {
border-bottom:1px solid gray;

padding: 20px;
font-size: 60px;
text-align: center;
margin: 0;
}
a {
color: black;
text-decoration: none;
}
.saw {
color:red;
}
#active {
color:green;
}
ol {
border-right:1px solid gray;
width: 100px;
margin: 0;
padding: 30px;
}
#grid {
border: 1px solid gray;
display:grid;
grid-template-columns: 150px 1fr;
}
#grid ol {
padding-left: 33px;
}
#article {
padding-left: 25px;
}
@media(max-width: 800px) {
#grid {
display: block;
}
ol {
border-right: none;
}
h1 {
border-bottom: none;
}
}



내용 출처: 생활코딩 (https://opentutorials.org/course/3086)

Author

Alec J

Posted on

2020-02-25

Updated on

2021-02-09

Licensed under