안녕하세요. CSS강사 코딩하는 고양이입니다.
오늘은 을 배워볼 거예요.
시작하기 전에 초기 설정을 해주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
</body>
</html>이것을 복사하세요.
1. CSS는 무엇인가요?
CSS란, 웹사이트를 디자인하는 코드라고 생각하면 됩니다.
HTML이 밑그림이라면
CSS는 정교하게 그리는 것과 같습니다.
그리고 나중에 배울 javascript는 동작을 주는 것이라고 생각하면 됩니다.
2. 스타일의 의미
제가 만든 우리나라 이슈 사이트입니다.
그런 사이트를 만들기 위해서는 CSS가 필요합니다.
CSS는 <style> 안에 속성을 넣는 개념입니다.
3. 속성의 종류
속성의 종류는 굉장히 많지만 오늘은 기초만 배울 겁니다.
| 속성 | 설명 |
| width | 가로 길이 |
| height | 세로 길이 |
| margin | 바깥쪽 여백 |
| padding | 안쪽 여백 |
| background-color | 배경 색상 |
| color | 글씨 색상 |
| font-size | 글씨 크기 |
| text-decoration | 글자 꾸밈 |
| border | 테두리 꾸밈 |
4. CSS로 만들 수 있는 것
4-1. 불편한 여백 삭제
내용을 작성할 때 불편하게 여백이 남은 경우가 있습니다.
그럴 때는 <style> 태그 안에 *{margin: 0; padding: 0;}을 작성해야 합니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;} /*불편한 여백 없애는 코드*/
dl{background-color: greenyellow;} /*여백을 확인하기 위한 배경 색상 선택*/
</style>
</head>
<body>
<dl>
<dt>코딩하는 고양이</dt>
<dd>
코딩하는 고양이는 고양이다
</dd>
</dl>
</body>
</html>실행 결과
4-2. 불편한 꾸밈 삭제
만약 목록태그의 점을 지우고 싶다면
ul {text-decoration: none:}을 써주세요
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;} /*불편한 여백 없애는 코드*/
ul{text-decoration: none;} /*불편한 점을 없애는 코드*/
</style>
</head>
<body>
<ul>
<li>하이하이</li>
<li>하이하이</li>
<li>하이하이</li>
</ul>
</body>
</html>실행 결과
그리고 이걸로 링크 태그 줄도 없앨 수 있습니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;} /*불편한 여백 없애는 코드*/
a{text-decoration: none;} /*불편한 밑줄을 없애는 코드*/
</style>
</head>
<body>
<a href="#">링크</a>
</body>
</html>실행 결과
4-3. 그 외의 기능
글씨를 중앙에 위치할 수 있거나
이미지를 가로로 정렬할 수 있고
심지어 칸에 넘어가는 글을 숨길수도 있습니다.
이건 여러분이 해보세요!
오늘의 문제!
1번 문제
배경 전체를 검은색으로 나타내시오
힌트 : body, background-color
2번 문제
링크의 글씨 색상을 검은색으로 나타내시오
힌트 : a, color
1번 모범답안
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;} /*불편한 여백 없애는 코드*/
body{background-color: #000000;} /*여백을 확인하기 위한 배경 색상 선택*/
</style>
</head>
<body>
</body>
</html>정답 기준 : body와 background-color를 사용했다.
2번 답
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
a{color: #000000;}
</style>
</head>
<body>
<a href="#">아히</a>
</body>
</html>정답 기준 : color 속성을 검은색으로 설정했다. a태그를 사용했다
오늘은 여기까지 ㅂㅂ
'HTML, CSS > 이론' 카테고리의 다른 글
| [HTML/CSS] 6. CSS의 필수 속성 (1) | 2023.03.24 |
|---|---|
| [HTML/CSS] 5. 표 태그 (0) | 2023.03.23 |
| [HTML] 3. 이미지 태그와 링크 태그 (2) | 2023.03.21 |
| [HTML] 2. 목록 태그와 설명 태그 (1) | 2023.03.20 |
| [HTML] 1. 텍스트 태그 (0) | 2023.03.19 |