오늘 학습한 내용은 development의 기초를 다지는 파트로 컴퓨터와 프로그래밍의 전반적인 이해와 웹에서 웹 클라이언트와 웹서버가 어떻게 나뉘는지를 알게 되고, 백엔드 강의지만 프론트엔드의 기초를 알기위해 HTML과 CSS의 기본을 배우는 시간이였다.
컴퓨터와 프로그래밍
컴퓨터
컴퓨터는 입력한 데이터를 정해진 규칙안에서 처리하여 저장하고 출력해주는 장치다.
컴퓨터안에는 컴퓨터의 뼈대를 담당하는 하드웨어와 정보처리를 위한 소프트웨어가 있다.
하드웨어에는 크게 CPU라 불리는 중앙처리장치, 기억장치, 입력장치, 출력장치가 존재하고, 시스템버스로 연결되어 정보가 이동한다. 소프트웨어는 시스템 소프트웨어와 응용 소프트웨어가 있고, 시스템 소프트웨어는 응용 소프트웨어를 실행시키기 위한 역할을 하면서 하드웨어가 제대로 동작할 수 있게 해준다. 응용 소프트웨어는 시스템 소프트웨어를 제외한 모든 소프트웨어로 애플리케이션이나 앱으로 불린다.
프로그래밍
프로그래밍은 프로그램을 만들기위해 코드를 작성하는 과정이다. 컴퓨터는 보통 기계어로 되어 있는데 사람들은 기계어를 이해할 수 없기 때문에 이를 사람말로 풀어놓은 것을 프로그래밍 언어라고 한다. 그런데 컴퓨터 또한 프로그래밍 언어를 이해할 수 없기 때문에 컴파일을 해서 프로그래밍 언어를 기계어로 바꿔주는 과정을 거쳐줘야 한다. 프로그래밍 언어를 작성 할때는 IDE라는 프로그램을 이용해서 작성을 하게 된다.
웹
웹은 웹 클라이언트와 웹 서버로 구분되는데, 웹 클라이언트는 웹 서버에 리소스를 요청하여 정보를 받아 시각적으로 보여주는 역할을 하고, 웹 서버는 웹 클라이언트가 리소스를 요청하면 요청한 리소스를 서버안에서 일치하는 정보를 찾아 보내주는 역할을 한다. 때로는 들어온 정보를 저장해야되는 경우가 생기는데 이를 저장하기 위해 데이터베이스를 사용하여 정보를 저장한다.
웹 프론트엔드
아무리 백엔드 개발자라도 프론트엔드에 대한 기초를 알아야 협업을 할때 원만하게 소통이 되기 때문에 프론트엔드의 기초적인 지식을 알고 있어야한다. 프론트엔드의 핵심기술은 HTML, CSS, JS가 있으며 각각 언어의 역할이 다르다.
HTML
HTML은 HyperTextMarkupLanguge로 프로그래밍 언어가 아닌 마크업 언어이다. 가끔 착각하는 사람도 있다는 얘기를 들은적이 있다. HTML은 웹페이지를 만들때 웹페이지의 구조를 만드는데 쓰는 언어로 집을 짓는데에 뼈대역할을 한다고 생각하면된다.
HTML은 수많은 태그들로 이루어져있고, 태그들은 트리구조를 하고있다. 수많은 태그들이 있지만 실제로 웹페이지를 제작할 때에 자주 쓰이는 태그는 그리 많지 않다. 보통 자주 쓰이는 <h1>, <div>, <span>, <img>, <a>, <ul>, <li>, <form>, <p>등이 있고, 필요한데 기억이 나지않을때는 MDN같은 문서를 통해 찾아보는 것이 좋다.
HTML에는 고유한 네이밍을 할 수 있는데, id와 class로 나뉜다. id는 그 태그를 고유한 이름으로 정할때쓰는데, 다른 태그에 동일한 id는 존재해선 안된다. class는 고유한 이름이긴 하지만 같은 이름으로 만들고 싶은 태그들을 그룹으로 묶을 수 있다. 예를 들어 <h1 class="title">제목</h1>로 정했을 때, <h2 class="title">제목2</h2>로 동일한 class 이름을 정해 CSS나 JS로묶어 표현할 수 있다.
CSS
CSS는 HTML로 만든 웹페이지의 구조를 스타일링 하는 언어로, UI와 UX가 있다.
UI는 유저가 웹페이지를 이용할때 편하고 쉽게 사용하기 위해 개발자가 제작하는 것이다. UX는 UI를 유저가 사용했을때의 만족도로 UI를 좀 더 직관적이고 간편하게 만들수록 유저의 만족도는 올라간다.
CSS의 문법은
body {
background-color: blue;
};와 같이 태그나 id, class명인 셀렉터와 선언블록, 속성과 속성값이 있다.
CSS를 활용하면 글꼴이나 색상과 같은 웹페이지 안의 내용을 스타일을 씌워 표현하거나 layout을 스타일링하여 웹페이지가 보기 좋게 바꿔줄 수 있다. CSS는 기본적으로 박스모델이 있는데 태그에 따라 block이나 inline으로 존재한다. 하지만 CSS의 display속성으로 이를 바꿔줄 수 있다. block은 한 문장크기의 영역을 가지고, inline은 지정한 영역만을 가지는데 크기가 없다. inline이 크기를 가지기 위해서는 CSS에서 display를 inline-block으로 바꿔주면 경우에 따라 그 영역 안에서 높이를 가질 수 있다. 박스에는 margin, padding, border가 있는데, margin은 콘텐츠밖의 영역의 여백을 나타내고, padding은 콘텐츠와 테두리 사이의 공간을 나타내고, border는 테두리를 나타낸다. CSS로 작성할때는
p {
margin: 10px 15px 20px 25px;
padding: 10px 15px 20px 25px;
border: 1px solid black;
};와 같이 작성하는데 각각 상하좌우를 조정 할 수 있지만
p {
margin: 10px 20px;
}
div {
margin: 5px;
}상하와 좌우를 묶어 쓰거나 전체가 동일한 값을 가지게 할 수 있다.
1일차 학습을 마치며...
전날의 OT이후로 웹에 대해서 배우는 1일차로 부트캠프에 들어오기전에 공부를 했었지만 오래되서 기억이 안났던 부분이나 좀 더 자세히 알 수 있었던 파트였다.
