<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS</title>
<style>
body{
margin: 20px;
}
.btn {
padding: 5px 10px;
border-radius: 10px;
}
.tomato{
background-color: tomato;
color: white;
}
.teal {
background-color: teal;
}
</style>
</head>
<body>
<span class="btn teal">Hello</span>
<span class="btn tomato">Hello</span>
<span class="btn teal">Hello</span>
<span class="btn tomato">Hello</span>
<span class="btn teal">Hello</span>
<span class="btn tomato">Hello</span>
<span class="btn teal">Hello</span>
</body>
</html>우리는 html 태그에 id 나 class와 같은 속성을 부여해줄수있다.
CSS는 우리가 코딩한 html태그를 선택하여, 그 태그가 안고있는 텍스트들을 예쁘게 만들어 줄 수 있다.
먼저 head 태그 내부에 style태그를 만든다. 우리는 이 style 태그 내부에 CSS 코드들을 작성한다.
그리고 여기서 css 코드로 꾸며줄 html태그를 선택해야하는데 이것을 우리는 선택자 라고 부른다.
먼저 이 게시글의 제목인 id 와 class 속성에 대해 알아야하는데, id 와 class 속성이 해주는 역할은 비슷하다.
그 태그에 이름을 붙여주는거라고 생각하면된다. 다른점은 id는 유일해야 한다는것이다. class는 겹쳐도 상관없다.
유일해야한다는것은.. 다른 태그에 중복된 id가 오면 안된다는 것이다.
<span id="tomato">Hello</span>
<span id="tomato">Hello</span>이렇게 두개의 아이디가 중복되면 안된다. 쉽게 생각하는법은 우리가 회원가입을 할때, 다른 사람이 사용중인 아이디를 사용할 수 없다는것과 비슷하다.
반면 위 코드처럼 class는 중복하여 사용할수있다. 그래서 class 를 이용해서 위처럼 간결한 코드를 작성할 수 있었던 것이다.
그리고 CSS에서 id 와 class를 선택할때 방법은 각각 다른데,
위 코드처럼 class 의 경우
.class{}이런식으로 앞에 . 을 붙여서 클래스를 선택하는것이라고 알려줘야한다.
id 같은 경우에는
#id{}앞에 #을 붙여서 id를 선택하는것이라고 알려줄 수 있다.
'프로그래밍 > HTML&CSS' 카테고리의 다른 글
| [HTML & CSS] position : fixed (0) | 2020.11.08 |
|---|---|
| [HTML&CSS]Flex box (0) | 2020.11.04 |
| 블럭과 인라인 (0) | 2020.10.18 |
| 웹페이지 탭창에 아이콘 넣기 (0) | 2020.10.15 |
| semantic HTML (0) | 2020.10.14 |