반응형
1. HTML, CSS 알아보기
1. 기능 구현을 위해 배워야 할 언어
- JavaScript
- php
- C++
- Java
- Python
2. HTML(HyperText Markup Language)
- HTML은 문서의 글자 크기, 색, 모양, 그래픽, 링크 등을 정의하는 명령어로 홈페이지를 작성하는 데 쓰임.
- 사용하는 명령어로 태그(tag)는 껏쇠괄호 "< >"를 사용함.
<!DOCTYPE html>
<html lang="ko>
<head>
<div>
</div>
</head>
<body>
<div>
</div>
</body>
</html>3. CSS(Cascading Style Sheet)
- CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소
- 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소 담당
.card{
display: inline-block;
width: 1000px;
margin: 100px auto;
border: none;
border-radius: 10px;
padding: 10px;
background-color: #fff;
font-size: 30px;
text-align: center;
}- 여백의 구성 요소
- margin: margin이 포함된 점선의 바깥 테두리의 주황색 공백
- border: border가 포함된 바깥 테두리 선
- padding: padding이 포함된 점선의 바깥 테두리의 초록색 공백
4. 많이 쓰이는 HTML tag
2. DOCTYPE 선언하기
// index.html
<!DOCTYPE html>
<html lang="ko">
<!-- head tag: 해당 문서에 대한 정보인 meta data의 집합을 정의할때 사용 -->
<head>
<!-- meta tag: 웹 브라우저, 검색엔진, 웹 서비스에서 사용 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta tag "keyword": 검색 엔진에 안녕에 대한 웹페이지가 업로드 되도록 설정 -->
<meta name="keyowrd" content="안녕">
<!-- style.css 연동 -->
<link rel="stylesheet" href="sytle.css">
<title>Document</title>
</head>
<!-- body tag: HTML 문서의 text, link, img, list와 같은 content를 포함하는 영역 정의 -->
<body>
<!-- div tag는 특정 영역이나 구역을 정의할 때 사용 -->
<div>
안녕하세요
</div>
</body>
</html>// style.css
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}HTML에 사용되는 tag와 용도에 따른 tag의 사용법
HTML은 워드 작업이라면 CSS는 꾸며주는 작업 <link rel="stylesheet" href="sytle.css">
margin, padding, border의 이해
다음은 기본 게시판 만들기를 진행해보자.😊😊
반응형
'코딩배우기 > HTML, CSS' 카테고리의 다른 글
| 5. 디자인 게시판 만들기-VIEW (0) | 2022.07.20 |
|---|---|
| 4. 디자인 게시판 만들기-WRITE (0) | 2022.07.20 |
| 3. 디자인 게시판 만들기-BOARD (0) | 2022.07.20 |
| 2. 기본 게시판 만들기 (0) | 2022.07.19 |
| 배우는 HTML, CSS, JS (0) | 2022.07.19 |