카테고리 없음

[1주차] 스파르타코딩클럽 웹개발 종합반 1주차 1 (1-4까지)

tft4rollz 2022. 10. 18. 14:28

어쩌다보니 운 좋게(?) 스파르타코딩클럽 내일배움캠프 4기에 합격하였고

본격적으로 시작하기 전에 무조건 웹개발 종합반 강의를 전부 들으라고 하셨기에 이제부터 차근차근 시작하려고 한다.

 

1주차 1강의에서는 서버/클라이언트/웹의 동작 개념에 대해 배웠고

HTML = 뼈대, CSS = 꾸미기 JS = 움직이기 라고 알려주셨다. 

이 세개를 전부 만들면 네이버 같은 웹사이트를 만들 수 있다고 하셨다.

브라우저의 역할은 받아온 친구들을 그대로 우리 눈에 그려주기만 한다.

 

1주차 2강의는 파이참 설치/젯브레인 회원가입/aws 회원가입 방법에 대해 배웠고

 

1주차 3강의는 파이참을 이용해 HTML의 기초를 배웠다.

<div> 는 구역을 나누는 태그이며, <p> 는 문단을 나누는 태그, <ul> 과 <li> 은 글자 왼쪽에 점이 생기는 태그

<h1>은 제목을 나타내는 태그이며, 페이지마다 하나씩 꼭 써주는게 좋다.

<h2>는 소제목이며 <h3>~<h6>은 각자의 역할이 있긴 하지만 잘 안쓰인다.

<span> 태그는 특정 글자를 꾸밀때(색칠된 글자)를 쓰이는 태그. <span style="color:red"> 이런식으로 사용

<a> 태그는 웹사이트로 이동시켜 주는 태그(하이퍼링크) <a herf="링크 주소"> 이런식으로 사용

<img> 태그는 이미지를 넣어주는 태그 <img src="이미지 링크"> 로 사용

<button> 태그는 버튼을 넣어주는 태그 <button>버튼입니다</button> 로 사용

그 밖에도 <input> 태그, <textarea> 태그가 있는데 이건 자세하게 설명을 안해줘서 생략..

<input> 태그는 <input type="text" /> 로 사용

 

1주차 4강의는 HTML를 이용 한 간단한 로그인 페이지를 만들어보는 법을 배웠다.

줄이 안맞을때 줄을 맞추고 싶은 부분을 드래그한 후 Ctrl+Alt+L 을 누르면 줄이 맞춰진다.

줄을 정렬할때는 정렬하고 싶은 부분을 드래그 한 후 TAP 키를 누르면 오른쪽으로 맞춰진다. (정말 많이 쓰임)

반대로 Shift + Tab을 하면 왼쪽으로 다시 온다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
</head>
<body>
  <h1>로그인 페이지</h1>
  <p>ID: <input type="text"></p>
  <p>PW: <input type="text"></p>
  <button>로그인하기</button>
</body>
</html>

파이참을 이용해  간단한 로그인 페이지를 만들어 보았다.

처음에 <input type="text">를 안쓰고 그냥 <input>으로 했는데 잘 되서 이건 줄 알았는데 아니었다.. 

나머지는 블로그에 옮겨가며 적은 것들 참고해서 강사님이 코드 짜신거랑 똑같았다. ㅎㅎㅎ

이렇게라도 한번 만들어보니 재밌다. 5개월 뒤에도 이런 재밌는 기분이었으면 좋을 것 같다 ㅋㅋㅋ...