-
[힙한취미코딩] 스파르타 코딩클럽 1주차 배운 것IT 2021. 9. 22. 16:42
스파르타 코딩클럽 1주차를 끝냈다.
웹페이지의 작동원리부터 시작해서 샘플로 로그인 페이지를 만들어보는 데까지 진행하였다.
클라이언트가 요청을 보내고
서버는 요청을 처리해 응답을 보내고
웹브라우저는 받은 응답을 처리해 사용자에게 보여준다
기본 동영상 강의와 더불어서 Notion으로 작성한 강의 노트가 함께 제공되어
노트정리 하는데에 신경쓰지 않고 강의에 집중 할 수 있어서 좋았다.
중간중간 제공되는 코드 스니펫 (작은 예제 코드)도 클릭 한 번으로 복사가 되는 점도 굉장히 편리했다.
1주차에서 가장 중요하게 배운 점은 웹페이지의 뼈대는 HTML, 꾸미기는 CSS라는 점.
HTML은 header와 body로 구성되는데, header는 페이지의 속성 정보를 가지고 있고, body는 실제로 표시될 내용을 담고 있다.
HTML은 tag라고 하는 꺽쇠로 구성되며, <태그>와 </태그>처럼 시작 태그와 끝 태그로 구성되는 경우가 많다.
ex)
<!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>다행히 모든 태그를 외워야 할 필요는 없대요!
대충 이런 이런 역할을 하는 태그가 있구나 알고 있다가, 필요할 때 검색해서 찾아쓰면 끝.
1주차가 끝나고 위의 그림과 같은 로그인 페이지를 만들 수 있었다!
'IT' 카테고리의 다른 글
[노개북] 노마드 개발자 북클럽 TIL 2 (0) 2023.02.20 [노개북] 노마드 개발자 북클럽 TIL (0) 2023.02.19 노마드 개발자 북클럽[노개북] 시작 (0) 2023.02.18 [힙한취미코딩] 스파르타 코딩클럽 마지막 2주차! (0) 2021.09.23 스파르타 코딩클럽 48시간 미션 이벤트 시작 (0) 2021.09.22 댓글