웹 개발 필수 요소 3가지
- HTML (HyperText Markup Language): 웹 브라우저에서 문서 및 웹 페이지가 표시되는 방법을 규정하는 언어이며, 어떠한 웹사이트에서든 블록(block)을 구성하는 데 사용되는 언어이기도 함. 웹사이트의 구조를 만들 수 있음.
- CSS (Cascading Stype Sheets): HTML로 만들어진 문서의 (컬러, 폰트 스타일, 레이아웃, 반응형 특징 등의) 스타일을 지정하는 방식을 규정하는 스타일 시트 언어. 시각적으로 보다 매력적으로 만드는 기능 제공.
- Javascript: 웹사이트가 로딩된 이후에 CSS와 HTML 구성요소들을 변경할 수 있게 해줌. 웹사이트를 보다 인터랙티브(interactive)하게 만들고 사용자의 참여율도 높일 수 있음.
HTML, CSS, Javascript 대체 뭐가 다른걸까?
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>head: 웹 페이지에 보이지 않지만 페이지에 대한 정보들을 담음.
body: 웹 페이지에 보이는 부분을 담음.
CSS
사용법
...
<style>
.temp {
color:
background-color:
font:
font-size:
background-image: url('') /* 따옴표 사이에 이미지 파일의 소스 */
background-position: /* 위치 */
background-size: cover /* 채우기 */
width: /* 가로(px) */
height: /* 세로(px) */
border-radius: /* 모서리(px) */
margin: /* 외부 여백(px), 상 우 하 좌 순으로 4방향 다 설정 가능. auto로 설정하면 가운데로 정렬해줌 */
padding: /* 내부 여백(px) */
text-align: /* 정렬 */
}
</style>
...
...
...
<h1 class="temp">THIS IS TEMP</h1>
...- style은 head 내부에 있어야 함.
- 스타일을 적용하고자 하는 태그의 class를 정의해주면 내용에 스타일이 적용됨.
- 폰트 가져오기:
1. https://fonts.google.com/?subset=korean 에서 원하는 폰트 클릭.
2. 스크롤 내리다가 'Select Regular 400' 클릭.
3. import 선택 후 \<style>\</style> 사이에 있는 내용을 \<style>의 시작 부분에 삽입.- font-family 복사 후 import 아래 줄에 삽입.
@import url('url')
* {
font-family: 'temp', font;
}남이 만들어놓은 CSS 코드 가져오기 & 사용법
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html><link> ~ <script>: 남의 CSS 코드 가져오기.
부트스트랩 컴포넌트 5.0
복붙으로 사용하기.
github에 웹 페이지 배포하기
- repository 생성
- uploading an existing file 클릭 (아마 업로드 없이 repository에서 바로 코딩 가능할듯?)
- index.html을 repository에 복붙
- Commit changes 클릭
- Settings -> Pages -> Branch: main -> Save
숙제
스파르타피디아의 포스팅박스 부분에 별점 추가하기
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>TIL
없음
COYG🔴⚪