분류 전체보기
-
[부스트코스] CSS -FE부스트코스 코딩일지/웹 프로그래밍 기초 2020. 2. 2. 15:02
전 글에서 웹 페이지의 구조를 담당하는 HTML에 대한 기초적인 공부를 하였습니다. 이번 시간에는 스타일을 담당하는 CSS에 대해 공부해 보도록 하겠습니다. 선언방법 우선, CSS의 구성을 먼저 살피어보겠습니다. span: selecor color: property red: value 의 역할을 합니다. 이렇게 만든 style을 HTML 페이지에 적용하는 3가지 방법이 있습니다. 1. inline HTML 태그 안에 속성으로 적용합니다. 아래 그림처럼 말이죠. 이렇게 적용된 스타일은 css파일에 적용한 것보다 가장 먼저 적용됩니다. 2. internal style 태그로 지정합니다. 이렇게 되면, html 문서 안에 구조에 관한 태그와 스타일에 관한 태그가 섞이게 되면서 가독성이 떨어지고, 따라서 유지 ..
-
[부스트코스] HTML -FE부스트코스 코딩일지/웹 프로그래밍 기초 2020. 2. 2. 13:16
Tags 개발자 도구를 통해 웹 페이지의 소스 코드를 보면 형태의 다양한 태그들이 사용된다는 것을 알 수 있습니다. HTML 태그는 다양한 만큼 모두 각각의 용도와 의미를 갖고 있습니다. 이런 특징을 'Semantic 하다'라고 표현합니다. 이러한 HTML 태그를 모두 외워야 할 필요는 없습니다. 자주 사용되는 것 위주로 공부하면 좋을 것 같습니다. 하지만, 더 우선시되는 것은 적절한 의미에 맞는 태그를 찾아 사용하는 것이 겠지요. HTML 태그 종류는 태그 정리 사이트를 통해 쉽게 알 수 있습니다. [출처: https://www.edwith.org/boostcourse-web/lecture/16669/] Layout 태그 여러 개의 HTML 화면을 동시에 보면 레이아웃이 어느 정도 동일한 것을 알 수 ..
-
[유니티] 중심 회전하다 클릭하면 직진하기게임 개발 2020. 1. 28. 17:03
상점에서 change한 로켓이 시작 시에 지구를 중심으로 공전하는 것 까지 완성되어 있는 상태이다. 화면을 클릭하면 회전을 멈추고 그 방향으로 직진하는 코드를 짜보려한다. 1. 화면터치 점수가 표시될 부분과 일시정지 버튼을 제외한 화면을 터치하면 이벤트가 실행되도록 만드려 한다. 아래 방법으로 문제를 해결했다. 우선 일시정지 버튼, 점수 표시 부분, 새롭게 만들어준 투명 버튼 모두 한 canvas 안에 넣었다. 새롭게 만든 투명한 버튼을 canvas크기로 해서 깔아준다. sprite 속성에서 layer를 조정하여 버튼과 점수 부분 모두 투명 버튼 위에 깔아주었다. 또한 pause 부분 창에 해당하는 부분도 투명 버튼 위에 깔아주었다. 2. 회전 멈추기 1번에서 만든 버튼에 이벤트를 추가하였다. 단순히 화..
-
[부스트코스] WAS부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 19. 17:47
WAS는 저도 웹 프로그래밍을 공부하면서 처음 들어보는 용어인데요 오늘은 WAS의 정의와 역할, 종류를 알아보도록 하겠습니다. WAS는 미들웨어의 한 종류입니다. 그렇다면 미들웨어는 무엇일까요? DBMS라는 것이 있습니다. 이것은 데이터베이스를 관리하는 소프트웨어입니다. 대표적으로 MySQL, Oracle, MariaDB 등이 있습니다. 이를 통해, 개발자들은 데이터를 쉽게 관리할 수 있게 되었습니다. DBMS는 서버 형태로 서비스를 제공하기 때문에, 이러한 DBMS에 접속해서 동작하는 클라이언트 프로그램 또한 많이 만들어졌습니다. 하지만 이 클라이언트 프로그램은 프로그램 로직이 변경될 때마다 매번 다시 배포되어야 한다는 것과 클라이언트 프로그램의 크기가 커진다는 단점을 갖고 있었는데요. 즉, DBMS에..
-
[부스트코스] 웹 서버부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 19. 17:01
웹 브라우저를 실행한 후 주소 입력창에 url 주소를 입력하면, url 주소에 해당하는 결과물이 화면에 보이게 됩니다. 이를 가능하게 해주는 것이 바로 웹 서버인데요. 클라이언트인 웹 브라우저가 웹 서버에 url을 요청하고 이에 해당하는 정보를 보여주게 되는 것입니다. 오늘은 웹 브라우저의 요청을 받아 HTML 문서나 오브젝트를 반환하는 웹 서버의 역할과 종류 대해 알아보도록 하겠습니다. 웹 서버의 역할 : 클라리언트가 요청하는 HTML 문서나 리소스를 전달하는 것 여기서 클라이언트는 웹 브라우저나 웹 크롤러를 의미합니다. 웹 브라우저는 많이 익숙한 반면, 웹 크롤러는 생소하신 분도 있으실 텐데요. 웹 크롤러란, 네이버나 구글 같은 검색 사이트에서 다른 웹사이트 정보를 읽어갈 때 사용하는 소프트웨어입니다..
-
[부스트코스] Browser에서의 웹 개발부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 19. 16:03
오늘은 크롬 브라우저 소스 코드를 보며 소스의 구성에 대해 알아보도록 하겠습니다. 전 시간에 말했듯이 크롬 브라우저는 개발자 도구를 제공하고 있는데요. 마우스 우클릭 > 개발자 도구를 통해서 확인할 수 있고 단축기 (Ctrl + Shift + I)를 통해서 볼 수 있습니다. 소스 코드를 살피어 보면 첫 부분에 을 확인할 수 있습니다. 그리고 소스의 마지막 부분을 보면 이라고 적혀있는데요. 이렇듯 html 태그를 통해 HTML 문서임을 확인할 수 있습니다. 또한 코드를 살피어보면 head, body 같은 것들을 통해 html이 계층적 구조로 이루어져 있음을 알 수 있습니다. head 요소의 정의는 '문서의 메타데이터 집합'입니다. 메타 데이터는 웹 페이지에 직접적으로 보이지 않는 정보라고 이해하면 되는데요..
-
[부스트코스] Browser의 동작부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 17. 19:22
안녕하세요 valid_ming입니다 : ) 오늘은 서버에서 클라이언트로 전송된 데이터가 처리되어 화면에 보이게 되는 과정에 대해 알아보도록 하겠습니다. 우선, 서버에서 전송한 데이터가 클라이언트에 도착해야 할 곳이 바로 Browser입니다. Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔징이 포함되어있습니다. 오늘의 주제인 브라우저 또한 코드로 이루어져있는데요. 이렇게 브라우저의 페이지 소스 보기를 이용해 확인하실 수 있습니다. 사실 브라우저가 스스로 동작하기 때문에 따로 동작 과정을 따로 공부할 필요는 없습니다. 하지만, 내가 짠 코드가 브라우저에서 내 생각과 다르게 해석되어 동작된다던가 조금 더 효율적으로 브라우저에서 동작하도록 하기 위해 개발자들이 브라우저를 공부하게..
-
[부스트코스] 웹 백 엔드부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 17. 17:47
저번 시간에는 프론트 엔드의 역할과 기술적 구성에 대해 살피어보았는데요 이번 시간에는 백 엔드에 대해 알아보도록 합시다! 프론트 엔드와 백 엔드의 차이점 Front-End Back-End 클라이언트 입장에서 개발 (클라이언트 사이드) 서버 입장에서 개발 (서버 사이드) 백 엔드의 역할 : 정보를 처리하고 저장하며, 요청에 따라 정보를 내려준다. 백 엔드 개발자가 알아야 할 것들 프로그래밍 언어(JAVA, Python, PHP, Javascript 등) 웹의 동작 원리 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식 운영체제, 네트워크 등에 대한 이해 프레임워크에 대한 이해(예: Spring) DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등) **프레임워크란? "소프트웨어..