기본 문법과 선택자의 역할
div { /*선택자*/
font-size: 20px; /*속성 : 값*/
color: red; /*속성 : 값*/
}- 선택자는 HTML에 CSS를 적용하기 위해 HTML의 특정 요소에 선택하는 사인이다. (div 태그에 디자인을 적용)
<div>
<h1>제목..</h1>
<p>본문..</p>
</div>h1 {
color: red;
}
p {
color: blue;
}
속성과 값
div {
color: red; /* 글자색은 빨강 */
font-size: 20px; /* 글자 크기는 20px */
width: 300px; /* 가로 너비는 300px */
margin: 20px; /* 바깥 여백은 20px */
padding: 10px 20px; /* 안쪽 여백은 위아래 10px, 좌우 20px */
position: absolute; /* 위치는 부모 요소 기준, 흠.. 이게 무슨 뜻일까? */
}- 속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용
- 속성과 값은 많이 아는 것이 중요하다.
선언방식
1. 태그에 직접 작성하기 (인라인)
- 선택자가 필요 없다.
<div style="color: red;">태그에 직접 작성1</div> <!-- red -->
<div style="color: red;">태그에 직접 작성2</div> <!-- red -->
<div style="color: red;">태그에 직접 작성3</div> <!-- red -->
<div style="color: red;">태그에 직접 작성4</div> <!-- red -->
2. HTML에 포함하기(내장)
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>HTML에 포함1</div> <!-- red -->
<div>HTML에 포함2</div> <!-- red -->
<div>HTML에 포함3</div> <!-- red -->
</body>
3. HTML 외부에서 불러오기
<!-- HTML 1 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body>/* main.css */
div {
color: red;
}
선택자
1. 태그로 찾기
/*<h1>은 글자색이 빨강이야!*/
h1 {
color: red;
}
/*<p>는 글자색이 파랑이야!*/
p {
color: blue;
}
2. 클래스로 찾기
/*class="title"은 글자색이 빨강이야!*/
.title {
color: red;
}
/*class="main-text"는 글자색이 파랑이야!*/
.main-text {
color: blue;
}<h1 class="title">제목1</h1> <!--red-->
<h1>제목2</h1>
<p class="main-text">본문1</p> <!--blue-->
<p>본문2</p>- 아래의 HTML 코드를 보면, 제목에는 titlr, 본문에는 main-text라는 별명을 지정
- .은 클래스를 나타내며 CSS의 .title은 HTML의 class="title"와 동일하다
속성1 - 크기
div {
width: 300px;
height: 150px;
font-size: 16px;
}
- width(가로 너비), height(세로 너비), font-size(글자 크기) 모두 px단위
속성2 - 여백
1. margin(요소의 바깥 여백)
- 바깥 여백은 요소와 요소 사이의 여백(거리,공간)을 생성할 때 사용
- margin은 위,아래, 좌,우 따로 설정 가능
div {
margin: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
2. padding(요소의 내부 여백)
- 내부여백은 자식 요소를 감싸는 여백을 의미한다.
- 방향을 지정하여 설정 가능
div {
padding: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
속성3 - 색상
- color(글자 색상), background(요소 색상)
div {
color: red;
background-color: red;
}
예제
GitHub페이지의 Header 이어서 만들기
- background-color를 설정해서 padding이나 margin 확인하면서 하기
<!DOCTYPE html>
<html lang="ko"> <!--한국어로 설정-->
<head>
<meta charset="UTF-8">
<title>GitHub</title>
<link rel="stylesheet" href="./main2.css">
</head>
<body>
<div class="header"> <!-- div는 의미가 없는 태그-->
<div class="container">
<div class="container-left clearfix">
<div class="logo">
<img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub logo">
</div> <!-- 로고-->
<div class="menu clearfix">
<div class="menu-item">Personal</div>
<div class="menu-item">Open Source</div>
<div class="menu-item">Business</div>
<div class="menu-item">Explore</div>
</div> <!--4개의 항목-->
</div>
</div>
</div>
</body>
</html>body{
margin:0;
padding:0;
}
.header{
background:white;
border-bottom:1px solid lightgray;
}
.container{ /*가운데로 몰아주기*/
width:600px;
margin:auto;
padding: 20px 0;
}
.container-left{ /*padding은 최상위보다는 하위버전에 적용*/
padding-top: 20px;
padding-bottom: 20px;
}
.logo{
float: left;
margin-right: 5px;
}
.logo img { /*img 태그는 logo와 menu사이에 있기에 생성자 순서도 HTML에 맞춰서 작성! 유지보수를 위해*/
/*logo 클래스 안에 있는 img태그!만!*/
display:block;
}
.menu{
float: left;
}
.menu-item{ /*글자를 수평으로--> 글자에 색상을 담지 않음(오류)*/
float: left;
/*margin-right: 10px; 글자들 띄어쓰기*/
padding:8px 10px;/*수직 가운데 정렬, 위아래 8px씩 패딩*/
/*위의 코드와 같은 내용
padding-top:8px;
padding-bottom:8px;
padding-left:10px;
padding-right:10px;
*/
}
.clearfix::after{ /*::는 가상요소선택자*/
content: "";
display: block;
clear:both;
}
앞으로...
HTML은 어떤 태그들이 있고 어떤 역할을 하는지 정도만 빠르게 훑고 넘어가기
CSS는 각 속성의 역할과 기본 값 숙지, position, float, flex 속성은 집중적으로 공부하고, grid는 개념 정도만 이해
'Front-end > Web' 카테고리의 다른 글
| HTML - 콘텐츠 구분 & 문자 콘텐츠 (0) | 2021.02.02 |
|---|---|
| HTML - 주요범위 & 메타데이터 (0) | 2021.02.02 |
| HTML (0) | 2021.02.01 |
| 개요 (0) | 2021.02.01 |
| 웹 애플리케이션 만들기 코드 (0) | 2020.09.07 |
댓글