- 오늘부터 코딩 1일
- 추가로 더 알아보기
- JavaScript
- php
- C++
- Java
- Python
- HTML은 문서의 글자 크기, 색, 모양, 그래픽, 링크 등을 정의하는 명령어로 홈페이지를 작성하는 데 쓰임.
- 사용하는 명령어로 태그(tag)는 껏쇠괄호 "< >"를 사용함.
<!DOCTYPE html>
<html lang="ko>
<head>
<div>
</div>
</head>
<body>
<div>
</div>
</body>
</html>
- 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이 포함된 점선의 바깥 테두리
// 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는 꾸며주는 작업
- margin, padding, border의 이해
다음 내용은 디자인 게시판꾸미기(https://zzcojoa.tistory.com/112) 에서 코드를 알아보자.