0.목차
1.HTML 기초
1-1. !
1-2. id와 class
1-3. table element
2.CSS 기초
2-1. CSS 사용하는 이유
2-2. CSS특징
2-3. CSS 적용 방법
2-3-1. 인라인방식
2-3-2. head영역에 style추가
2-3-3. link를 이용해 외부파일 연결
2-4. CSS선택자
2-5. CSS 주요 속성
2-5-1. backgruoud-color
2-5-2. width 와 height
2-5-3. margin
2-5-4. padding
1.HTML기초
어제에 이어서 HTML기본 사용법에대해 공부했다.
1-1. !
html 문서를 생성하고
기본적으로 사용되어지는 형식을
'!' 로 간단하게 생성할 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
</body>
</html>'!' 를 입력하고 return 을 누르면 자동으로 생성된다.
1-2. id 와 class
element 에 id와 class 속성을 부여할 수 있다.
단, id는 해당 문서에서 유일한 값으로 설정해야한다.
class는 그룹을 만들기 위해 사용하는 경우가 대부분이라 같은 값을 입력 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div class="class"></div>
<span class="class"></span>
<div class="class"></div>
</body>
</html>1-3. table
html의 element 중 하나인 table은 주로 게시판을 만들 때 많이 사용되어 진다.
tr element, td element 와 같이 사용 되며
tr은 줄을 td는 칸을 생성한다.
<table boder="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
table 에 border속성을 부여하지 않으면 줄이 없는 표가 만들어진다.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
2.CSS 기초
2-0 CSS란
CSS란
Cascading
Style
Sheet
의 약자로 마크업을 다지인 하기 위해 작성된 언어 이다.
2-1. css를 사용하는 이유
markup language 만으로도 웹페이지를 만들수는 있지만,
HTML에서 스타일만 부분만 따로 관리 할 수 있고,
스타일의 서식을 공유해서 여러 웹페이지에 서식을 재사용할 수 있고, 통일 할 수 있다.
즉, 편의성을 높이기 위해 사용한다고 할 수 있다.
2-2. CSS의 특징
- CSS 내용은 object의 형태를 띄고 있다. (생긴 모양이 그렇다는 거지 object는 아니다!)
- CSS의 형태는 항상 key:value; 의 형태를 갖고 있다
- font-size : 12px;
- background-color : black;
- 끝에는 항상 세미콜론을 사용해서 끝나는 부분을 지정해 줘야한다.
- 끝나는 부분을 명시적으로 보여줘서 가독성을 높임
- 세미콜론이 없으면 컴퓨터가 이해를 못함.
2-3. CSS 적용방법
HTML 문서에 CSS를 적용하는 방법은 3가지가 있다.
- 인라인 스타일
- head 영역에 style 엘리먼트 사용
- link를 이용해 외부 CSS 파일과 연결
2-3-1. 인라인 스타일
HTML의 element 내부에 style 속성을 부여해서 CSS를 적용 할 수 있다.
<body>
<div style="font-size: 50px">안녕</div>
<div>안녕</div>
<div>안녕</div>
<div>안녕</div>
</body>
style 속성이 부여된 div 의 텍스트만 커진걸 확인 할 수 있다.
2-3-2. head 영역에 style 태그 사용
style 태그는 해드영역에 추가되며,
선택자를 이용해 CSS를 적용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>
#bigger {
font-size: 50px;
}
</style>
</head>
<body>
<div id="bigger">안녕</div>
<div>안녕</div>
<div>안녕</div>
<div>안녕</div>
</body>
</html>
id 선택자를 이용해 CSS를 적용하니 마찬가지로 첫번째 div의 텍스트만 커진거 확일 할 수 있다.
선택자에 대해선 2-4. 선택자에서 다시 다룰거임.
2-3-3. link를 이용해 외부파일 연결
html외부의 css문서를 연결 하기 위해선 link 태그를 사용해야 하며,
사용 순서는 아래와 같다.
- css 파일 생성
- 링크태그 입력
<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> <link rel="stylesheet" href="" type="text/css" /> </head> - href 속성에 연결할 css 파일의 경로 입력
<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> <link rel="stylesheet" href="./style.css" type="text/css" /> </head>
이렇게 해주면 html 문서에 css 파일이 연결 된다.
href 에 입력하는 경로는 절대경로와 상대경로를 이용하며,
절대경롤는 처음부터 모든 경로를 다 표기하고
상대경로는 현재 폴더를 기준으로 표기한다.
- '.' : 현재 폴더
- '..' : 이전 폴더
- '~/' : ~이름의 폴더로 이동
이후에는 css파일에서 작성하면 되는데,
작성 방법은 head영역에서 선언한 style 태그와 동일하다.
2-4. 선택자
head 영역에 있는 style 태그를 이용한 경우와
link를 이용해 외부 파일을 연결한 경우에는
선택자를 이용해 어떤 element에 스타일을 부여할지 지정 해줘야 한다.
아래에서 설명하는 것보다 다양한 선택자가 있지만 수업에서 다룬 선택자만 정리해보았다
태그 선택자: 특수 기호 없이 태그의 이름만으로 선택한다.
div { font-size: 16px; }
id 선택자
#id { font-size: 16px;
class 선택자
.class { font-size: 16px; }
자식 선택자
div > span { font-size: 20px; }2-5. CSS 주요 속성
CSS에서 주로 사용 되는 속성 중 수업에서 다룬 내용만 정리함.
css가 연결된 html은 아래와 같다
<body>
<div class="class">안녕</div>
<div class = "class">안녕하세요</div>
</body>
2-5-1 background-color
선택된 영역의 배경색을 넣어준다
.class {
background-color: darkolivegreen;
}
2-5-2. width 와 height
영역의 넓이(width)와 높이(height)를 지정해준다.
.class {
background-color: darkolivegreen;
width: 100px;
height: 100px;
}
2-5-3. font-size
누가봐도 텍스트 크기 변경해주는 것 처럼 생겼고,
실제로도 그렇다.
.class {
background-color: darkolivegreen;
width: 100px;
height: 100px;
font-size: 30px;
}
2-5-4. margin
영역 외부에 여백을 만들어 준다.
.class {
background-color: darkolivegreen;
width: 100px;
height: 100px;
font-size: 30px;
margin: 20px;
}
각 방향에 margin을 따로따로 지정해 줄수도 있다.
- margin : 20px 20px 20px 20px;
- margin-top : 20px;
- margin-bottom : 20px;
- margin-right : 20px;
- margin-left : 20px;
상하와 좌우를 묶어서 지정 해줄 수도 있다.
- margin : 20px 0;
- 이 경우는 영역의 위아래에 20px의 마진을 부여하고 좌우에는 마진을 부여하지 않는다.
2-5-5. padding
영역 내부에 공간을 부여해준다.
근데 부여해준 공간 만큼 영역의 크기가 커진다
콘텐트의 위치를 변경하기 위해 사용된다.
.class {
background-color: darkolivegreen;
width: 100px;
height: 100px;
font-size: 30px;
margin: 20px;
padding: 10px;
}
어.. 별차이 없어 보여도 사실 커진거임.
그리고 커진 만큼 내부 컨텐트와 영역 사이에 공간이 생겼다.
padding 사용시 영역이 커지는 현상 때문에
이전에는 width와 height 에서 padding의 크기 만큼 제외 했어야 했는데,
box-sizing이 생긴 이후로 그런 번거로움은 사라졌다.
.class {
background-color: darkolivegreen;
width: 100px;
height: 100px;
font-size: 30px;
margin: 20px;
padding: 10px;
box-sizing: border-box;
}
box-sizing: border-box를 이용하면
padding 과 border를 포함한 크기를
width와 height로 설정 해준다.
'경일 > HTML & CSS' 카테고리의 다른 글
| html, css 클론코딩 (0) | 2021.12.23 |
|---|---|
| block, inline, inline-block차이점/ 자식 element 사용/ html, css 클론코딩 (1) | 2021.12.22 |
| HTML 주요 element input (0) | 2021.12.20 |
| HTML 주요 element 1편 (0) | 2021.12.20 |
| HTML 이란 (0) | 2021.12.20 |
댓글