CSS 공부는 '생활코딩! HTML+CSS+자바스크립트' 책을 보면서 공부하고 있다. 다음 글의 예제들도 모두 책에 있는 내용을 바탕으로 작성한 글이다.
그리고 CSS 실습을 하면서 사용한 예제는 밑의 링크에서 만들어 놓은 HTML 파일을 바탕으로 사용했다.
HTML 예제의 제목에 태그가 들어가서 위와 같이 링크를 걸 수밖에 없었다.
<style> 태그 추가
... 생략 ...
<head>
<title>WEB</title>
<meta charset="UTF-8">
<style>
</style>
</head>
... 생략 ...<style>이라는 태그는 HTML의 문법이며, 동시에 <style> 태그의 안쪽에 있는 내용은 CSS이기 때문에 CSS의 언어의 문법에 맞게 처리해야 한다.
CSS를 이용해 <a> 태그로 감싸진 글자 색을 빨간색으로 변경
... 생략 ...
<style>
a {
color:red;
}
</style>
... 생략 ...
<a> 태그의 밑줄 없애기, 제목 가운데 정렬 및 글자 크기 키우기
... 생략 ...
<style>
a {
color:red;
text-decoration: none;
}
h1 {
font-size: 45px;
text-align: center;
}
</style>
... 생략 ...
- <a> 태그를 걸면 해당 글자에 밑줄이 쳐져 있는데 이를 없애기 위해서는 'text-decoration: none;' CSS 코드를 추가해주면 된다.
- 글자의 정렬은 text-align을 사용하면 된다.
현재 머물고 있는 페이지의 링크를 빨간색으로 변경
<style>
a {
color: black;
text-decoration: none;
}
.active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
}
</style>
... 생략 ...
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html" class="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
- 현재 CSS 페이지를 보고있기 때문에 목차에 CSS 부분만 빨간색으로 글자색이 변경된 것을 확인할 수 있다.
- CSS 목차 코드부분에 class명을 active로 만들고 style 태그안에 active에 대한 CSS 코드를 추가하였다. 평소처럼 style 태그내에서 'active'로 코드를 만들면 웹페이지에 제대로 적용이 되지 않는다. 태그에 CSS를 걸고 싶은 경우에는 해당 태그의 이름을 바로 쓰면 되지만 Class 같은 경우에는 앞에 . 을 붙여줘야 한다.
- class로 이름짓지 않고 id로 이름을 짓는 방법도 있다. 이때 CSS에서는 #[id이름] 이런식으로 #을 붙여서 표현한다.
- 태그 선택자가 제일 약하고, 그 다음으로 강한 것이 클래스 선택자이고 그 다음으로 강한 것은 ID 선택자다. 예를들어 ID 선택자를 style 태그 내에서 맨 위에 쓰고 밑에 Class 선택자를 사용하게 되면 Class 선택자를 사용한 CSS는 ID 선택자의 CSS 때문에 먹히지 않게 된다.
<h1> 태그와 <a> 태그에 테두리 그리기
... 생략 ...
<style>
a {
color: black;
text-decoration: none;
border-width: 5px;
border-color: red;
border-style: solid;
}
.active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
border-width: 5px;
border-color: red;
border-style: solid;
}
</style>
... 생략 ...
- 위와 같이 <h1> 태그와 <a> 태그에 테두리를 그리게 되면 각 태그의 부피감을 알 수 있다.
- <h1> 태그는 화면 전체를 쓰고 <a> 태그는 화면 전체를 쓰지 않고, 자기 자신의 콘텐츠 크기만큼의 부피를 쓴다는 것을 알 수 있다.
- 화면 전체를 쓰는 태그들을 '블록 레벨 엘리먼트(Block Level Element)', 자기 자신의 콘텐츠 크기만큼 쓰는 태그들을 '인라인 엘리먼트(Inline Element)'라고 한다.
- 블록 레벨 엘리먼트라 하더라도 인라인 엘리먼트처럼 자신의 부피만큼 쓰게 할 수도 있다.
display: inline;위와 같이 display라는 속성을 이용하면 된다. 그리고 위의 코드는 <a>태그의 CSS와 <h1> 태그의 CSS가 중복되는 것을 확인할 수 있다.
a, h1 {
border-width: 5px;
border-color: red;
border-style: solid;
}위와 같이 선택자를 합쳐서 CSS를 작성할 수도 있다.
a, h1 {
border: 5px solid red;
}그리고 다시 위와 같이 CSS 코드를 더 줄일 수도 있다. 이때 5px, solid, red의 순서는 중요하지 않다.
padding 실습
padding과 margin에 대해서 실습을 하기 위해 새로운 html 파일을 만들었다.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8">
<style>
h1 {
border: 5px solid red;
}
</style>
</head>
<body>
<h1>WEB</h1>
</body>
</html>
위의 웹 페이지에서 WEB의 콘텐츠를 보면 콘텐츠와 테두리에 간격이 없고 여백이 없다. 이때 콘텐츠와 테두리 사이의 여백을 주고 싶다면 'padding' 값을 주면 된다.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8">
<style>
h1 {
border: 5px solid red;
padding: 20px;
}
</style>
</head>
<body>
<h1>WEB</h1>
</body>
</html>
margin 실습
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8">
<style>
h1 {
border: 5px solid red;
padding: 20px;
margin: 0;
}
</style>
</head>
<body>
<h1>WEB</h1>
<h1>WEB</h1>
</body>
</html>
- margin을 실습해보기 위해서 <h1> 태그를 하나 더 만들었다.
- 위의 웹 페이지를 보게 되면 WEB 콘텐츠의 테두리가 서로 겹쳐져있는 것을 확인할 수 있는데 이는 margin 값을 0으로 주었기 때문이다.
... 생략 ...
<style>
h1 {
border: 5px solid red;
padding: 20px;
margin: 20px;
}
</style>
... 생략 ...
위와 같이 margin에 값을 넣어주게 되면 그 값만큼 WEB 컨텐츠의 테두리가 서로 margin 값만큼 떨어져 있는 것을 확인 할 수 있다.
'WEB > CSS' 카테고리의 다른 글
| [CSS] 기본 속성 및 HTML 예제 파일 CSS 적용(실습_미디어쿼리)_(4) - 짱우의 코딩일기 - 티스토리 (0) | 2020.01.18 |
|---|---|
| [CSS] 기본 속성 및 HTML 예제 파일 CSS 적용(실습)_(3) - 짱우의 코딩일기 - 티스토리 (0) | 2020.01.17 |
| [CSS] 기본 속성 및 HTML 예제 파일 CSS 적용(실습)_(2) - 짱우의 코딩일기 - 티스토리 (0) | 2020.01.16 |
