1) 학습한 내용
반응형 웹 글자 크기 조정
위의 코드는 이번 수업에 들었던 반응형 웹의 코드 중의 일부를 발췌해서 JS Bin에 일부 시험해서 올린 것이다.
@media는 반응형 웹에 쓰이는 코드로 미디어쿼리에서 쓰이는 명령문
CSS 코드 내부에서 분기하는 방법
CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 문법 예는 다음과 같다. 일반적으로 권장하고 널리 쓰이는 방식이다.
@media only all and (조건문) {실행문}좀 더 자세하게 보여주면 아래의 코드와 같다.
ex)
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}@media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다.
only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 한다.
all: all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다. all 이면 모든 미디어가 이 구문을 해석해야 한다. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 널리 쓴다.
and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 , 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다.
(조건문): 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 and 키워드 또는 콤마 , 기호로 연결해야 한다.
{실행문}: 일반적인 CSS 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석한다.
아래는 이번 수업에 했었던 소스코드에 링크를 걸기로 했다.
HTML
CSS
images
위의 코드는 이번 수업에 강사가 내준 과제를 토대로 올려본 것이다. 코드 작동방법은 Visual studio code내지는 JS Bin에 들어가서 코드를 사용해보면 될 것이다.
변경 전의 웹페이지 모습으로 해당 페이지를 700px 사이즈 밑으로 줄이면 글자 크기를 64px로 줄어들게 하기 위해서는 @media를 적용시키면 되는데 아래의 순서대로 적용시키면 된다.
CSS 파일로 들어가서 @media(max-width: 700px)을 작성한 다음에 {}를 작성하고 그 다음에 class(.)기호를 적용시킨 다음에 클래스명을 작성한 다음에 해당 조건에 부합시에 변경될 글자 크기를 작성하면 된다.
@media(max-width: 700px){
.title{
font-size:64px;
}
}
여기에 적용시킬 글자가 있는 class="클래스명"을 작성하면 곧 해당 글자에 변경이 적용될 것이다.
이후 700px 밑으로 width를 줄일 경우, 해당 페이지의 글자가 64px로 줄어들게 될 것이며, 다시 700px 이상으로 올릴경우, 이전 크기로 돌아오게 된다.
ps.글자 깨짐
간혹 HTML 작업을 하다 보면 다른 언어를 작성을 하다가 글자가 깨지는 현상이 벌어지기도 하는데 이는 다양한 국가에서 컴퓨터를 사용하게되면서, 나라마다 자기들만의 인코딩 방식(대응 규칙)을 만들어서 사용하면서 발생한 것이다. 인코딩 방식이 다르다보니, EUC-KR로 작성된 문자를 다른 인코딩 방식으로 읽으려고하니 문자가 깨지는 현상이 발생하는 것이다. 예를 들자면, 2000년도 초에 일본에서 만들어진 게임의 언어를 한국식으로 가동시키면 글자가 알아볼 수 없게 출력되는 것이 글자깨짐의 현상이다. css문서에 @charset "utf-8"을 작성하는 것은 이런 글자 깨짐을 방지하기 위한 조치이다.
2) 학습내용 중 어려웠던 점
이번 수업에서 미디어쿼리 부분은 CSS의 복합선택자나 CSS 적용 순서를 제대로 알아둔다면 그나마 이해하는데 오래걸리지 않을 것이다. 게다가, 이전에 독학을 했을 적에는 그저 남이 하라는 대로 따라했었지만 그건 말 그대로 코더 내지는 외국어로 코드몽키에 가까운 행위에 불과한 셈이다.
3) 해결방법
결국에는 복습을 할 수 밖에 없었다. 아무리, 따라 만들고 따라하더라도 이번에는 응용을 해야 한다. 내게 정말 약한 부분은 바로 응용력이 떨어진다는 것에 있었다. 그나마 @media 적용 방법을 알아내는 방법은 w3와 다른 사람이 작성한 코드를 통해서 미디어쿼리의 적용 방법을 그나마 이해를 했다는 것이다.
4) 학습소감
미디어쿼리는 CSS의 구조와 복합선택자와 적용 순서를 잘 알고 있다는 이해하는데 그리 오래 걸리지 않을 것이다. 웹 개발에 지원을 했었지만 이제부터 슬슬 어려워 질 것이다.
추신. 어제는 정말 어처구니 없게도 과제를 내야할 곳을 잘못 내서 하마터면 미제출로 처리 될 뻔했었다. 오늘부터는 주의를 기울어야 한다.
