소프트웨어학과 4학년인 내가 대학교를 다니면서 배운게 이론밖에 없어 웹개발 종합반을 스스로 등록하게 되었다.
1주차에서는 브라우저의 역할을 간략하게 이해하고 웹의 뼈대를 HTMl과 CSS로 구성해보는 연습을 하였다.
브라우저의 역할과 웹의 동작 개념 이해하기
먼저 브라우저는 서버에게 요청하여 받은 자료(HTML, CSS, Java Script)를 화면에 그려주는 역할이다. 네이버를 통해 웹의 동작 개념을 이해해보았다.
브라우저에서 개발자 도구를 사용하여 어느 한 부분을 바꿔도 새로고침하면 다시 원래대로 돌아온다. 새로고침할 때마다 새로 자료를 받아오는 셈 이기 때문이다. 즉, 우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받은 것을 화면에 그려주는 것이다.
브라우저에 자료를 출력하여 사용자에게 보여지는 부분을 개발하는 것을 '프론트엔드(front-end)'라고 한다. 1주차에서 HTML과 CSS을 중심으로 배울 부분이기도 하다.
VS Code 설치 및 설치 중 오류 해결방법
이렇듯 브라우저에 보여지는 자료를 구성하기 위해선 VS code와 확장 프로그램 Live Server를 설치 해야하는데,
확장 프로그램을 설치하면서 오류가 난다면 당황하지 말고 VISX 파일을 다운받아 수동설치를 권장한다!
설치 방법은 파일 다운 후 밑 사진처럼 VS Code에서 하면 거의 대부분 설치된다.
HTML과 CSS
프론트엔드는 총 세가지 부분으로 나뉜다.
- HTML: 웹의 뼈대를 잡아주는 구역을 나타내는 코드로, 웹의 전반을 책임진다.
- CSS: HTML로 작성된 뼈대의 속성을 선택하여 보기좋게 꾸며주는 코드.
- Java Script: 움직이기 (2주차 내용)
HTML
HTML은 크게 head와 body로 나뉘어 작성된다.
head 안에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 담는다.
- 밑에는 body에서 자주 쓰이는 대표적인 요소들이다.
<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
CSS
CSS는 앞서 말했듯이 HTML로 작성된 뼈대를 꾸미는 역할이기 때문에 HTML의 head 부분에 style이라는 공간을 만들어 작성한다.
실전 문제 풀어보기
자주 쓰이는 CSS는 문제를 통해 연습했다.
주어진 문제는 밑의 화면을 제작하는 것! 
먼저 뼈대인 HTML 코드
<body>
<div class="wrap"> <!--div는 코드를 박스로 묶는 것-->
<div class="mytitle"> <!--mytitle이라는 class로 정의된 div-->
<!--wrap 클래스 안에 글씨들 출력하기 -->
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요.</h5>
</div>
<!--입력받을 수 있는 input박스-->
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<!--클릭할 수 있는 button박스-->
<button>로그인하기</button>
</div> <!--warp은 부모 클래스 mytitle은 자식 클래스-->
</body>꾸미는 부분인 CSS 코드 (head부분에 속해 있다.)
<style>
/* 폰트 선택후 @import부분으로 style의 맨 첫줄에 붙이면 된다. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300&display=swap');
/* *은 모두라는 뜻으로 모든 요소에 *{}이 적용된다. */
* {
font-family: 'IBM Plex Sans KR', sans-serif;
}
/*mytitle 클래스를 꾸며주는 부분*/
.mytitle {
background-color: GREEN;
/*클래스 전체 크기*/
width: 300px;
height: 200px;
/* 테두리 모서리를 10px만큼 둥글게 */
border-radius: 10px;
/*글씨 색상*/
color: white;
/*문단 정렬 속성: 가운데*/
text-align: center;
/*margin:바깥여백 padding:안쪽여백*/
padding-top: 30px;
/* 여백 지정안할 시 padding: 30px 0px 0px 0px; */
/* background 사용시 image, position, size 항상 함께 쓰임 */
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
/* image 위치와 크기*/
background-position: center;
background-size: cover;
}
.wrap {
/* 보통 여백을 지정할 땐 위 오른쪽 아래 왼쪽 순으로 여백 크기를 지정해야하는데, auto로 적을 시 자동으로 여백 크기를 정해준다. */
width: 300px;
margin: 100px auto 0px auto;
}
</style>1주차를 마치며
이렇게 HTML과 CSS를 연습 문제를 통해 구현해 보았는데, 처음엔 문제만 보고 이걸 내가 할 수 있을까라는 생각이 먼저 들었었다. 하지만 수업을 들으면서 따라가다 보니 어느새인가 코드를 완성하고 있는 나의 모습을 볼 수 있었다. 학교에서 배운 적 없는 부분이기에 더욱 신기하고 재밌게 따라갈 수 있었다. 다음 주 수업도 걱정이 되지만, 새로운 부분을 수업을 통해 배워갈 나의 모습에 기대가 된다!
