-
[1주차] 스파르타코딩클럽 웹개발 종합반 1주차 1 (1-4까지)카테고리 없음 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개월 뒤에도 이런 재밌는 기분이었으면 좋을 것 같다 ㅋㅋㅋ...