1.HTML: 웹 뼈대 - 누가 누구 안에 있느냐가 중요!
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>구역</div>
<p>문단</p>
<ul> 순서가 지정되지 않는 항목(items)의 목록(list)를 나타내는 태그
<li> bullet point! 글머리 기호1 </li>
<li> bullet point! 글머리 기호2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>제목</h1>
<h2>소제목</h2>
<h3> h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr> 문단 수준 요소 사이의 주제를 구분하며 가로 구분선 표시
<span style="color:red">글자</span> 텍스트 스타일
<hr>
<a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
<hr>
<input type="text"/> 입력칸
<hr>
<button>버튼</button>
<hr>
<textarea>나는 무엇일까요?</textarea> 여러 줄의 입력칸
</body>
*태그 설명 참고 사이트: https://codingeverybody.kr
2.CSS: 웹 꾸미기 - 대상을 class로 명명하고 head에 style로 작성
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.mytitle {
color: red;
font-size: 40px;
}
.mybtn {
font-size: 12px;
color: white;
background-color: green;
}
.mytxt {
color: red;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p class="mytxt">ID: <input type="text" /></p>
<p class="mytxt">PW: <input type="text" /></p>
<button class="mybtn">로그인하기</button>
</body>
*자주 사용하는 CSS
배경관련
background-color
background-image
background-position
background-size
사이즈
width
height
폰트
font-size
font-weight 굵기
font-family 글꼴
color
간격
margin 내부 여백
padding 외부 여백
3.단축키 모음
-복사
macOS: command + C
-붙여넣기
macOS: command + V
-뒤로가기
macOS: command + Z
-고 라이브
macOS: command + B
-코드줄정렬
macOS: option + shift + F
-새로고침
macOS: command + R or F5
-저장
Windows: Ctrl + S
macOS: command + S
-전체선택
Windows: Ctrl + A
macOS: command + A
-들여쓰기
Tab
-들여쓰기 취소
Shift + Tab
-잘라내기
Windows: Ctrl + X
macOS: command + X
-콘솔창 줄바꿈
shift + enter
-코드정렬
Windows: Ctrl + Alt + L
macOS: option + command + L
-주석
Windows: Ctrl + /
macOS: command + / </aside>
4.구글폰트 사이트: https://fonts.google.com/?subset=korean
head - style 태그 안에 작성
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap')
* {
font-family: "Gowun Dodum", sans-serif;
}
5.부트스트랩 사이트(HTML, CSS 라이브러리): https://getbootstrap.com
head 태그 안에(title 아래에 작성)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
원하는 CSS를 복사하여 body에 작성
<button type="button" class="btn btn-primary">Primary</button>
'개발 > 부트캠프' 카테고리의 다른 글
| 사전캠프 : 웹개발 종합반 3 (0) | 2024.12.16 |
|---|---|
| 사전캠프 : 웹개발 종합반 2 (1) | 2024.12.13 |
| 사전캠프 Spring 퀘스트 2 (1) | 2024.12.06 |
| 사전캠프 Spring 퀘스트 1 (0) | 2024.12.05 |
| 사전캠프 : SQL 5_완강 (1) | 2024.11.26 |