두번째 공부(개발공부)/비개발자를 위한 웹개발 종합반(스파르타코딩클럽)

1주차 개발일지] 웹브라우저 원리부터 웹페이지 만들기까지

YTReeee 2023. 3. 13. 11:02

친구의 추천으로 스파르타코딩클럽에서 운영하는 내일배움단 웹개발 강의를 신청했다!

내일배움단 신청이 조금 복잡하긴 했지만, 결제까지 완료!

1주차 강의 시작!

naver 메인 페이지의 카테고리의 이름을 바꿔보며, 웹 브라우저의 원리에 대해 배웠다.

  • 웹브라우저 : 요청한 내용을 그려주는 역할!

이후 코딩을 하기 위한 도구를 설치하였다.(VS코드)

한글패치도 해주고, 내가 쓴 코드가 웹에서 어떻게 동작하는지 보기 위한 live server 앱도 설치하였다.

 

이후, 간단한 로그인페이지를 만들어보며, HTML과 CSS의 기초에 대해 공부하였다.

  • HTML : 웹에 뼈대가 되는 부분
  • CSS : 꾸며주는 부분

HTML의 기본 뼈대는 vs코드에서 html을 검색하면 쉽게 만들 수 있다.

HTML은 head 와 body 로 나뉜다.

  • head : 웹페이지의 속성
  • body : 웹페이지의 내용

CSS의 기초

HTML의 부모-자녀관계를 확인해야 한다.

html 태그는 태그 안에 누가 있는지 확인하는 것이 중요하다!

내용을 감싸는 태그가 바뀌면 내용도 영향을 받기 때문이다.

 

CSS 사용

<heda> ~ </head> 사이에 <style> ~ </style>로 공간을 만들 사용하면 된다!

단, CSS를 사용할 때는 [지칭!]이 중요하다.

어떤 태그를 어떻게 꾸밀것인가!

수정하고자 하는 div의 너비, 높이, 색깔, 여백, 이미지 삽입 등의 코드를 이용해 로그인페이지를 꾸며보기도 해보았다.

 

HTML과 CSS 기초를 가지고 "스파르타피디아 만들기"

그리고 이를 github을 통해 배포하기!

 

1주차를 통해 완성한 스파르타피디아를 공유하고자 한다.

https://github.com/YongILTree1/mypage.git

 

우선, 1주차 강의를 들으면서 가장좋았던 부분은 직관성이다.

라이브서버앱을 통해 내가 바꾼 항목들이 바로바로 바뀌는 점이 신기하기도, 재밌기도 했다.

그리고 무언가를 완성해냈다는 성취감도 있었다.

 

무작정 따라하기 식의 강의 방법은 개인적으로 따라가기 힘든 부분이 있었지만,

복습 등을 통해 충분히 숙지하고, 이해할 수 있었다.

 

2주차 강의도 열심히 따라가보며 개발의 재미를 느껴보고자 한다!