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

이제 CSS 공부의 마지막 단원이다. 저녁식사 전에 강의 영상도 들었으니 이제 1시간 정도만 더 공부하면 마칠 수 있을 것 같다. CSS를 다시 공부해 보니 정말 재미있었고 이어서 자바스크립트까지 공부해보고 싶은 마음이 들기도 했다.요즘 하고 싶은 공부가 많아서 무엇을 먼저 하는 게 좋을지 고민이 많이 된다. 사실 게임 개발 공부가 정말 하고 싶지만 12월까지는 웹 개발 공부를 마치기로 스스로와 약속했기에 꾹 참고 있는 것이다. 파이썬 게임 개발도 그 이후에나 가능할 것 같다. 이제 남은 공부를 이어가 보자. 웹 디자인 레이아웃을 만들 때 레이아웃은 아주 중요하다. 웹 사이트를 제작할 때 고려해야 할 기기가 나날이 늘어나고 있기 때문이다. 소스를 최대한 간단하게 유지하면서 대부분의 기기에 대응할 수 있는..

반응형 웹 디자인에 적합한 그리드 레이아웃을 만드는 방법 중에 플렉스 박스 레이아웃에 대해 본격적으로 학습해 볼 것이다. 별로 재미있는 내용은 아니지만 웹페이지를 만들 때 매우 중요한 내용이니 잘 공부해 두기로 하자.  플렉스 박스 레이아웃에서 사용하는 용어플렉스 박스 레이아웃은 그리드 레이아웃을 기본으로 해서 새로 등장한 개념이므로 알아 둬야 할 새로운 용어가 많다.      플렉스 박스 항목을 배치하는 속성플렉스 박스에스 플렉스 항목이 여러 개 있는데 일괄적으로 한꺼번에 배치할 수도 있고, 주축이나 교차축 기준으로 다양하게 배치할 수 있다. 배치 방법과 관련된 속성이 많으므로 처음에는 헷갈리는데 다음 표와 같이 기억해 두면 좋다.    1. 플렉스 컨테이너를 지정하는 display 속성플렉스 박스 레..

이제 얼마 남지 않았으니 조금 더 힘을 내보기로 하자. 솔직히 지금 공부가 많이 하기 싫은 마음이 들지만 참고 해보는 중이다. 웹 사이트의 레이아웃을 정할 때 사이트 전체 디자인이나 일관성을 유지하려면 그리드 레이아웃을 사용해야 한다. 여기서는 그리드 레이아웃의 특징을 알아보고, 그리드 레이아웃을 만드는 방법으로 플렉서블 박스 레이아웃과 CSS 그리드 레이아웃을 간단히 살펴보겠다.   그리드 레이아웃이란반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다. 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용한다.그리드 레이아웃은 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 ..

이제 미디어 쿼리를 적용한 실습을 진행해보겠다.   미디어 쿼리 적용하기미디어 쿼리가 어떻게 구성되는지 알았으니 이제 웹 문서에 적용해 보겠다. 적용하는 방법은 크게 외부 CSS 파일로 연결하는 방법과 웹 문서에 직접 정의하는 방법이 있다. 1. 외부 CSS 파일 연결하기외부 CSS 파일을 따로 저장해서 웹 문서에 연결하는 방법을 아아보겠다. 이 방법은 각 조건별로 CSS 파일을 따로 저장한 뒤 태그나 @import 문을 사용해서 연결한다.먼저 외부 CSS 파일을 연결할 때 가장 많이 사용하는 태그를 알아보겠다. 이 태그는 태그 사이에 넣는다. 다음 기본형의 의미는 미디어 쿼리 조건이 맞다면 지정한 CSS 파일을 가져와서 적용하라는 것이다. 속성의 순서는 상관없다.  외부 CSS 파일을 연결하는 또..

아침에는 CSS 공부를 하지 못했다. 수학이랑 영어 공부를 다 마치고 나니 1시 반이 되어서 간단한 요리를 해서 점심을 먹고 나니 벌써 3시가 되었다. 이제부터는 인스턴트 음식을 사 먹지 않고 가능하면 집밥을 먹기로 했다.오늘 오후에는 3시간 안에 미디어 쿼리까지 모두 공부해서 CSS 공부를 전부 마치려고 한다. 그리고 지난번에 갔다온 AICON 강의도 정리해보려고 한다. 아마 오늘 컴퓨터 비전 공부는 하지 못할 것 같다. 미디어 쿼리는 반응형 웹 디자인에서 가장 기본적인 개념이다. 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일 시트를 적용해 주는 것이다.     미디어 쿼리 알아보기CSS 모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특쩡한 CSS 스타일을 사용하는 방법이다. 미디어 쿼..

이제 책으로 반응형 웹과 미디어 쿼리에 대해서 공부해보려고 한다. 이 단원만 학습하고 새벽 2시 조금 넘어서부터 진행되었던 5시간 동안의 새벽 공부를 마칠 생각이다. 반응형 웹 디자인은 PC 브라우저든 모바일 브라우저든 사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어 보여 주는 것을 말한다. 화면 크기가 다양한 모바일이 계속 쏟아져 나오는데 그때마다 사이트를 따로따로 제작하는 것은 매우 비효율적이다.이런 점을 고려해서 화면 크기에 '반응'하는 화면 요소를 자동으로 바꾸어 사이트를구현하는 것이 바로 반응형 웹 디자인이다.   반응형 웹 디자인이란?포털 사이트나 쇼핑몰 사이트의 경우 모바일 기기의 특성을 충분히 활용할 수 있도록 모바일 사이트를 별도로 제작한다. 이때 반응형 웹  디자인은 ..

그동안의 공부를 마무리하며 테스트 문제를 바로 풀어보기로 했다. 공부를 마치고 시간 나면 풀어야지 하면 언제 다시 풀게 될지 모르니 학습을 마친 바로 지금 풀어보기로 했다.책으로는 아직 미디어쿼리 부분이 남아있지만 가능하면 6시 전까지는 모든 문제를 다 풀고 그때부터는 다른 공부를 진행해볼 것이다.    실력 확인 테스트이 과목은 실력 확인 테스트도 있어서 문제를 풀어보기로 했다. 원래 책 학습까지 다 마치고 할까 생각했는데 그냥 내친김에 하기로 했다.    문제 1번  문제 풀어보기inline 스타일로 작성하려면 h 태그 안쪽에 다음과 같이 속성을 주면 된다.   근데 h6의 태그가 틀렸다고 나온다. 어디가 잘못된 걸까? purple의 철자를 잘못 썼었다.   이제 잘 제출되었다. 느낌표가 보라색으로 ..

드디어 어제치 밀린 학습을 평소보다 1시간 15분 일찍 일어나서 모두 완료했고 3시 반인 지금은 오늘의 학습을 진행 중이다. 어제는 인터넷이 안 되어서 원래 했어야 하는 공부를 다 마치지 못했다. 거기다가 점심과 저녁에 탄수화물류로 식사를 떼웠더니 너무나 졸려서 공부를 진행할 수 없었다.앞으로는 이런 음식들을 일체 멀리해야겠다고 다짐했다. 공부에 방해가 되는 요소들은 가능하면 멀리 치워야 할 것이다.   실습 4 - 상단 영역 미디어쿼리 적용하기   HTML 파일 CSS 코드까지 소개하면 너무 많으므로 한 문제를 풀고 코드를 수정한 후에 CSS 파일도 소개할 것이다. 이제 문제를 풀어보자.  코드 수정하기 이 부분에 mata 속성을 추가해주었다. 그러면 크기를 조절할 때 모바일 버전으로 볼 수 있다.  ..

이이서 미디어쿼리를 적용하는 학습을 진행해 볼 것이다. 이론 학습은 이게 마지막이다. 하지만 실습이 정말 많아서 아직 공부를 마치려면 멀었다.    이론 3 - 미디워쿼리 적용하기  이전에 만들었던 엘리스 홈페이지를 모바일 버전으로 바꾸려고 한다.       상단과 본문을 모두 50%에서 100%로 변경한다.    좌우 정렬을 가운데 정렬로 바꾸게 된다.    실습 3 - 미디어쿼리 사용 시 주의사항 2 : 속성 상속     이 코드를 실행하고 크기를 축소해도 색깔이 변경되지 않는데 이것은 미디어쿼리 바깥쪽에 이미 yellow 속성이 들어가 있기 때문이다. 이제 지시사항대로 border를 추가해 만들어볼 것이다.     원래 크기로 하면 border가 빨간색으로 표시된다.    크기를 줄이니 이처럼 사라..

이어서 미디어쿼리 사용시 주의사항에 대해서 살펴보겠다.   이론 2 - 미디어쿼리 사용 시 주의 사항  뷰포트의 메타태그를 반드시 기록해야 한다. 만약 그렇지 않으면 정상적으로 작동되지 않는다.        기기값을 디바이스의 기기값으로 대체하겠다는 의미이다. initial-scale은 사용자가 접속했을 때 처음 화면 비율을 말한다. 만약 이 내용을 설정하지 않으면 비율이 깨질 수도 있다.      아래 배경색을 명시하지 않아도 바깥쪽의 코드가 적용되어 미디어쿼리는 노란색으로 적용된다.     실습 1 - 미디어쿼리 사용 시 주의 사항 1 : viewport     코드 작성하기    모바일로 전환하니 크기가 이처럼 줄어들었다.   처음에는 오타가 있어서 한번 틀렸다가 이번에는 다 맞았다.     퀴즈 ..