유튜버 코딩하는누나의 강의를 토대로 공부
■html 기본 정리 (코딩하는눈나)
html 코드
<!--
1. HTML은 head와 body로 나뉘어져있다.
2. HTML 자주쓰는 태그 6개: div, p, img/, input/, button, a
-->
<!-- 눈나 실습 시작 -->
<!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>html연습</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>내 이름은 오겡이</div> <!-- div 태그는 영역을 나누어준다 (줄바꿈) -->
<p>취미는 없어! </p> <!-- div 태그와 같지만 높이가 좀더 넓다 (줄바꿈) -->
<div>요로시꾸!!!!!</div>
<img src="금동이.jpg" width="550" height="400" /> <!-- img/는 단일로 쓴다. ex) img src "데이터"/ 형식-->
<div></div>
<input type="text"/> <!-- input / 은 검색창 기능이며 -->
<input type="number"/> <!-- type을 주면 값에 따라 받을 수 있는 데이터 종류가 달라진다.-->
<input type="password"/> <!-- type에 대해서는 구글링~!-->
<button> 로그인 </button> <!-- 버튼 만들어줌-->
<a href="https://www.slack.com"> 슬랙으로 가즈아 </a> <!-- a 태그는 하이퍼 링크 달 수 있음-->
</body>
</html>
■css 기본 정리 (코딩하는눈나)
ㆍ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>css연습</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="blue border-blue"> 우리 모두 모여라~ </p> <!-- class는 스페이스로 구분 해주면 여러 css 설정을 배치가능 -->
<img src="금동이.jpg" class="img-size"/> <!-- class로 사이즈 조정 -->
<div class="border-blue img-size margin-space padding-space"> Box </div>
</body>
</html>ㆍcss 파일
.blue {
color: blue;
background-color: yellow;
text-align: center;
}
/** border: 테두리 두께, 스타일 색깔 */
.border-blue {
border: 2px solid blue;
}
/** width: 이미지 사이즈 조정 */
.img-size {
width: 500px;
height: 400px;
}
/** margin: 요소 바깥쪽 공간(Space) 여백 정의 */
.margin-space {
margin-top: 40px;
margin-left: 100px;
margin-bottom: 150px;
}
/** padding: 요소 안쪽 공간(Space) 여백 정의 */
.padding-space {
padding-top: 40px;
padding-left: 50px;
}
※추가자료
'개발' 카테고리의 다른 글
| 파이썬3 연차 사용 확인 소스코드 (작성중) (0) | 2023.09.26 |
|---|---|
| 파이썬3 기초 정리 (0) | 2023.07.31 |
| 자바스크립트 실습3 : 연산자 (0) | 2023.02.21 |
| 자바스크립트 실습2: 클릭으로 글자 색 바꾸기 (0) | 2023.02.20 |
| 자바스크립트 실습1: 나이계산기 (0) | 2023.02.11 |
