스파르타 웹개발 수업에 대한 첫 기록이다.
처음엔 VSCode를 다운받아서 개발을 시작했다.
- 윈도우용 VSCode : https://update.code.visualstudio.com/1.73.1/win32-x64-user/stable
- MacOS용 VSCode : https://update.code.visualstudio.com/1.73.1/darwin/stable
- MacOS 실리콘칩 : https://update.code.visualstudio.com/1.73.1/darwin-arm64/stable
첫 수업 시작은 월요일이었지만 설 연휴가 겹쳐 늦게 1주차 공부를 시작했다.(오늘이 첫날..)
국비지원으로 신청한 웹개발종합반 수업은 온라인으로 진행된다.
온라인강의를 듣고 숙제를 하거나 실시간으로 튜터에게 물어볼 수 있는 시스템도 구비되어 있었다.(아직 써보진 않음)
100%수강하면 평생 온라인 강의 소장이라는 혜택이 존재한다 웬만하면 모두 수강하고 뒤에도 기억나지 않는 부분이나 이해가 어려운 부분을 다시 수강해보자.
처음엔 필수 설치 자료 설명이나 수업진행 설명등 0주차 과정 영상들부터 보게 되었는데 지금은 이게 하루에 8강의 씩만 볼 수 있도록 되어있어서 1주차 5강인 간단한 로그인 페이지 만들기도 수강하지 못한 상황이다...
일단 웹브라우저에 대해 배웠는데 웹브라우저의 원리는 일단 필요한 정보를 가져다가 보여주기만 하는게 웹 브라우저 입니다.
말 그대로 보여주는 기능만 하기 때문에 내부의 정보를 지우거나 수정할 수 없습니다.
브라우저 : 서버에 요청해서 html, CSS, Javascript를 받아와 그려주기만 한다.
html은 뼈대 CSS는 꾸미기 Javascript는 움직이기
html : 5
html에 필요한 기본코드준비 자동완성
html 간단한 태그 정리
- div : 문단을 나누는 태그
- h1 : 문서의 제목을 나타내주는 태그, 글자크기 조절 h2, h3로 조절(h4~h6)
- span : 특정글자를 감쌀때 사용하는 태그 (ex : 글 사이의 두 글자의 색만 변경)
- hr : 하이퍼링크 태그
- img : 이미지를 불러와 그리는 태그
- button : 버튼태그 누를 수 있는 버튼을 만들어주는 태그
- input : 텍스트를 받을 수 있는 textField를 만드는 태그
- p : 문단을 나타냄(줄바꿈)
<!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>자동정렬 단축키는 : 맥기준 option+shift+F(⌥+⇧+F)이다.
