클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

오늘의 공부를 시작해본다.  오디오와 비디오 삽입하기웹 사이트에서 많이 사용하는 멀티미디어 형태는 오디오와 비디오이다. HTML에서는 audio와 video 태그가 새로 추가되어 멀티미디어 파일을 더 편리하게 삽입할 수 있다. 다양한 멀티미디어 파일을 삽입할 때 쓰는 object, embed 태그object 태그는 오디오 파일뿐만 아니라 비다오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용한다. 웹 문서 안에 다른 문서를 삽입할 대도 사용할 수 있다. 다음과 같이 object 태그를 사용하여 웹 문서에 PDF 파일을 삽입하면 PDF 리더가 자동으로 포함되어 보여준다.    embed 태그는 HTML 초기 버전부터 대부분 브라우저에서 사용할 수 있다. 이 태그에서는 src 속성을 사용..

다음으로는 이미지를 삽입하는 방법에 대해서 학습해볼 것이다. 시간이 15분밖에 남지 않았으니 최대한 빨리 진행해야겠다.그럼 바로 시작해본다!   이미지 삽입하기웹 사이트에 적절한 이미지가 있으면 정보를 시각적으로 전해줄 뿐 아니라 지루하지 않게 해준다. 웹 사이트에서 이미지의 역할은 텍스트만큼 중요하다. 사이트 전체 디자인과 메뉴, 중요한 요소를 이미지로 처리하여 내용을 강조할 수도 있다. 이미지를 삽입하는 img 태그 자세한 내용은 전에 모두 학습했으므로 실습으로 넘어가서 직접 확인해보자!     이미지 파일 경로를 나타내는 src 속성 경로란 현재 html 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지 알려준다. 이미지 파일 경로는 웹 문서 파일의 위치를 기준으로 정해진다.웹 문서와 같은..

목록 만들기에 이어 표 만들기 학습을 시작해본다. 조금 전에 학습했던 ol 태그부터는 수업 내용을 정리하지 않았다. 우선은 책 위주로 학습해볼 것이다.분량이 꽤 많은데 중요한 내용이니 빠짐없이 정리해야겠다. 그럼 바로 시작해본다~ 표 만들기웹 문서에서 자료를 정리할 때 자주 쓰는 태그는 표이다. 표의 구성 요소 알아보기표(table)는 행(row)과 열(column) 그리고 셀로 이루어진다. 셀은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미한다. 표를 만드는 table, caption 태그표의 시작과 끝을 알려주는 table 태그를 표시하고, 표에 제목을 붙이고 싶으면 caption 태그를 넣는다. 이 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다. 행을 만드는 tr 태그와 셀..

이번에는 목록을 만드는 태그에 대해 학습해보려고 한다. 표 태그는 분량이 많아 다음 포스트에서 다루어야 할 것 같다. 목록을 만드는 것까지는 별로 어렵지 않게 진행할 수 있었다. 표를 만드는 건 많이 어려웠다.그럼 바로 시작해보자!목록 만들기웹 문서에서 목록은 단순히 어떤 항목을 나열할 때만 사용하지 않는다. CSS와 함께 사용해서 네비게이션을 만들거나 콘텐츠를 배치하는 등 다양한 용도로 쓰이게 된다. 순서 있는 목록을 만드는 ol, li 태그목록을 표시할 내용 앞뒤에 각각 ol을 두고 그 사이에 li를 삽입하는 형태이다. ol 태그의 type, start 속성목록은 기본적으로 숫자 1, 2, 3, ...으로 번호를 붙인다. 이때 type 속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다..

이제 둘째마당의 첫번째 장이 끝나고 두번째 장으로 들어갔다. 앞장에서는 HTML의 기본 구조가 어떻게 첫 페이지를 구성하는지에 대한 기초 학습을 진행했다면, 이번 장에서부터는 본격적으로 웹 페이지를 만들게 된다.웹 문서를 작성할 때 가장 많이 사용하는 형식은 텍스트, 이미지, 표이다. 먼저 텍스트를 입력할 때 기본이 되는 제목과 본문, 단락, 줄바꿈 등의 태그를 학습해볼 것이다.  텍스트 입력하기   제목을 나타내는 hn 태그웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다. 이렇게 자주 사용하는 제목 스타일을 미리 태그 형식으로 만든 것이 제목 태그이다.제목 n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다.   텍스트 단락을 만드는 p 태그, 줄을 바꾸는 br 태그..

오늘도 9시가 넘어서 저녁 공부를 시작해본다. 내 목표는 8시 반쯤 시작하는건데 저녁 먹고 정리하다보면 어느새 9시가 넘어간다. 오늘은 자기 전까지 HTML 기본 문서 만들기 장은 끝내고 취침할 생각이다.요즘 잠이 많이 부족한 것 같아 이제부터는 하루 6시간 정도 충분한 수면을 취할 생각이다. 5시간보다 더 적게 자면 언제나 하루종일 피곤하고 정신이 몽롱한 것 같았다.그럼 오늘의 저녁 공부를 시작해보자! 조금 전 일기를 쓰며 마음을 많이 회복했고 다시 학습을 진행할 수 있는 상태가 되었다. 공부할 때 가장 중요한 점은 진도를 많이 나가는 것보다 내 마음을 살피는 일이다.마음이 흐트러지면 아무리 시간을 들인들 효과가 없기 때문이다.웹 개발은 항상 HTML부터 시작한다. 인사교 수업이나 엘리스와 겹치는 부분..

이제 새벽 공부할 시간이 1시간도 남지 않았지만, 남은 시간 웹 개발 환경에 대해서 학습해보려고 한다.분량이 조금 많은데 다 할 수 있을지 의문이다. 그래도 하는데까지 최선을 다해보자!웹 개발은 웹 편집기로 소스를 작성하고 웹 브라우저에서 결과를 확인하며 진행한다. 보통 비주얼 스튜디오 코드를 많이 사용하는 것 같다. 아직 내 PC에는 설치가 되어 있지 않아, 설치 작업도 해주어야 할 것이다. 웹 브라우저와 웹 편집기    웹 브라우저웹 브라우저는 웹 사이트를 방문할 때 사용하거나 웹 개발자가 웹 편집기로 작성한 문서를 화면에 나타내는 프로그램을 말한다. 종류가 매우 다양하지만 우리가 흔히 알고 있는 웹 브라우저는 다음과 같다.대부분 요즘은 크롬을 많이 사용하고 나도 크롬 이용자이니 이 브라우저로 진행할..

HTML의 기본에 대해서 동영상 학습을 했으니 이제는 책으로 한번 내용을 깊이있게 다루어보기로 했다. 책에 밑줄도 긋고 연습문제도 풀어보면서 공부하면 더 재미있게 학습할 수 있을 것 같다.먼저 1장 웹 개발 시작하기 단원의 내용을 정리해본다. 조금 전에 밑줄을 그으며 한번씩 읽어보았다.그러면서 앞으로 백엔드 개발자가 되기 위해 어떤 공부를 해야하는지도 알게 된 것 같다.웹 개발은 생각보다 광범위하고 공부해야 할 것도 아주 많은 분야이다. 이 단원에서는 웹 개발이 무엇인지 정의하고 그 안에 어떤 분야가 있는지 학습해볼 것이다. 웹 개발 알아보기    웹 개발이란?웹 개발이라면 가장 먼저 '웹 사이트를 만드는 것'을 생각한다. 사이트는 크게 2가지로 나눌 수 있다.정적 사이트 : 방문자에게 정보를 보여주는 ..

이어서 바로 HTML/CSS 중에서 HTML 마지막 단원 학습을 시작해본다. 여기까지 해서 6시까지 다 마친 후에 2시간 20분 정도는 책으로 학습을 진행할 예정이다.중복되는 내용은 빼고 중요한 내용들을 정리해볼 수 있을 것 같다.바로 네번째 학습을 진행해본다. 어제 저녁에 처음 해볼 때는 실습하는 것도 정말 어려웠는데, 지금은 어느 정도 손에 익어 재미있어졌다. 이론 4 - HTML 태그의 두 가지 성격 p 태그를 연달아 쓸 때 y축 방향으로 정렬이 되는 것을 말한다. 공간을 만들 때 사용하는 모든 태그들은 block 요소이다. 이 블럭 요소는 width, height를 설정할 수 있다.  자신이 사용하는 태그가 block 요소인지, inline 요소인지 파악해야 원활한 작업을 할 수 있다. 실습 5 ..

이제 본격적으로 오늘의 새벽 공부를 시작해본다. 조금 전에 어제 하다만 실습을 진행하며 잠도 깼고, 이제 맑은 정신으로 다음 학습을 이어가본다.두 단원만 학습하면 HTML 이론 학습은 끝이 난다. 그 다음에는 HTML 책과 수업 내용까지 정리해보는 시간을 갖고자 한다.지난번에 딱 하루치 분량의 수업만을 정리했는데, 추가로 메모할 부분이 있으니 수업을 다시 들으며 기록해봐야지!그럼, 바로 두번째 단원 학습을 시작해보자~  이론 3 - 구조를 잡을 때 사용하는 태그  목차는 네비게이션이고, 본문은 웹사이트의 내용이 담길 부분이며, 부록은 회사의 정보 등이 기입된 부분으로 나눌 수 있다.  header 태그와 nav 태그는 함께 사용하는 편이다. nav에는 네비게이션과 관련된 정보를 넣는다. nav 안에는 u..