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

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

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

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

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

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

HTML/CSS 과정의 마지막 주차 학습을 시작해본다. 벌써 눈이 감기며 잠이 오는 저녁시간이지만 할 수 있는데까지 공부해볼 것이다.   이론 1 - 미디어쿼리 소개 반응형은 웹사이트에 접속해서 브라우저의 창을 늘이거나 줄였을 때 자연스러운 크기 조절 효과가 일어나는 것이다. 적응형은 레이아웃의 변화가 뚝뚝 끊기며 달라진다. 즉 자연스러운 변화가 있느냐 없느냐에 따라 반응형과 적응형으로 나뉜다.    가로폭을 설정하는 것 자체가 미디어쿼리이다. 먼저 영역을 설정하고 width, height 등을 지정해준다.      왼쪽이 이 아이콘을 클릭하면 모바일 화면으로 바뀐다. 도메인 주소를 클릭하면 기기 화면에 어을리는 모바일 출력 결과물을 확인할 수 있다. 가장 정확한 방법은 자신이 보는 테블릿이나 스마트폰으..