[HTML5 CSS3] 복습

 

서론

 

이 포스팅에서는 이 블로그 운영에 있어 방향성을 이야기 하며, 제가 개발 공부를 시작한 지 약 한 달 동안의 진도 내용을 다룹니다.

 

저는 서울에 있는 전문대학교 정보통신공학과를 전공한 졸업생입니다. 컴퓨터공학과가 아니기에 1학년 때 배운 C언어 말곤 대부분이 PCB, 납땜 등의 무선 위주의 커리큘럼을 밟았고, 당연히 바로 개발자로 취업을 하기엔 무리를 느껴 국비를 수강하게 됩니다.

 

밑에 이미지는 제가 5월 25일 국비 학원 첫날부터 노션에 기록한 일정표입니다.

 

Notion 캘린더

 

5월 25일에 개강을 해서 어제 자로(6월 24일) 딱 한달이 되었습니다. 총 5개월 반 정도의 기간이기 때문에 약 4개월 반 정도 남았습니다. 어제 jQuery 수업을 나가기 전까지, 딱 한 달 동안 HTML과 CSS, 반응형과 JavaScript까지 진도를 나갔습니다.

 

제가 그 전까지는 매일 꾸준히 타 블로그에 이미지나 수업 내용 저작권 문제 때문에 비공개로 올렸는데요. 아무래도 비공개로 올리다 보니까 저만 본다는 안일한 생각 때문인지 글을 올리면서 확실히 신중하지 않게 올리는 제 모습을 발견했고, 처음부터 다시 시작하자는 생각으로 티스토리로 넘어오게 되었습니다.

 

또 티스토리가 코드를 업로드 할 수 있다는 장점 때문에 개발자 분들께서 정말 많이 이용하신다고 들은 것도 있습니다. 하지만 티스토리라도 저작권 등의 껄끄러움이 있는 건 변함이 없기 때문에, 앞으로 올릴 내용들은 출처를 전부 밝히는 것은 당연하고, 제가 문제를 조금씩 변형하고, 이미지도 저작권 문제가 아예 없을 만한 이미지를 잘 찾아 첨부해서 올릴 생각입니다.

 

처음엔 위 과정들이 되게 '포스팅을 위한 공부' 같아서 저렇게까진 안 하려 했는데, 생각을 조금 바꾸니 저건 '귀찮은 과정'이 아니라 '다양한 자료와 이미지를 찾는 과정까지 공부'였던 겁니다. 완전히 내 것으로 만들려면 기록하고, 남에게 설명해주는 방법이 최고란 것은 잘 알고 있기 때문에 그렇게 하기로 결정했습니다.

 

HTML, CSS

 

HTML과 CSS는 한 몸이라 생각하시면 됩니다.

 

HTML: 인터넷의 하이퍼텍스트를 표현하기 위한 언어(출처 : 네이버 지식백과)

CSS: 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트(출처 : 네이버 지식백과)

 

사전적 의미는 위와 같습니다.

 

하지만 이러한 사전적 의미는 어떤 분야든 간에 한 번 쯤은 짚고 넘어가면 좋지만 사실 확 와닿거나 이해가 되진 않습니다.  그래서 제가 이해한 바로는, 그리고 가장 많이 비유 되는 것이 바로 스케치와 색칠입니다. HTML로 전체적인 뼈대를 잡아주고 CSS로 크기나 배경 색상과 폰트 색상 등을 꾸며주는 역할을 합니다. 하지만 동작은 되지 않습니다.

 

저희가 가장 많이 사용하는 네이버 포털 사이트를 예로 들자면, 초록색 테두리로 검색창이 있고, 아이디와 비밀번호를 입력하는 창 네모 박스로 있습니다. HTML과 CSS로만 구성된 화면은 초록색 테두리를 눌러도 커서가 놓이지 않고, 아이디와 비밀번호를 입력하고 싶어도 입력이 안 됩니다. 저는 얼른 당장 메일을 읽고 싶은데도 말이죠. 왜냐하면 이는 스케치와 색만 입힌 화면이기 때문입니다. 여기서 검색도 하고, 로그인도 하고, 여러가지 기사를 클릭해 화면이 넘어가는 기능을 부여해주는 것은 바로 JavaScript의 역할이라 말씀 드릴 수 있습니다.

 

반응형

 

반응형은, 스크롤을 내리거나, 화면이 줄어드는 등의 이벤트가 발생해도, 이름 그대로 그런 것에 반응하도록 하는 방법입니다.

 

제가 이해한 바로 일상생활에 접목해 쉽게 설명을 드리면 점점 사람들이 다양한 크기의 디바이스를 사용함에 따라, 개발자 모니터 기준으로 작성하면, 누군가의 모니터에선 잘려서, 누군가의 모니터에선 너무 화면이 휑 하게 비어서 출력될 것입니다. 뿐만 아니라, 잠깐 화면을 반으로 줄이거나 축소시켜놨을 때 안에 HTML과 CSS의 구성이 망가질 수도 있고, 요즘은 PC 말고, 태블릿이나 모바일로도 이용을 많이 하는데 한 가지 기준으로만 코드를 작성하면 문제가 되겠죠? 이처럼 다양한 기기와, 다양한 모니터의 크기에 맞게 알맞은 사이즈가 되도록 '반응'하도록 만들어주는 것을 반응형이라고 하는 것입니다.

 

작성에 앞서, 나름의 꿀팁이 있는데, 아마 저만의 꿀팁은 아니고 보편적으로 다른 개발자분들도 그렇게 하실 수 있습니다. 바로 모바일 화면이나 태블릿 화면, PC 화면에 출력 될 코드들을 작성하기 전에 미리 주석을 달아 범위를 구분해 놓는다는 것입니다. 그리고 큰 화면(PC)부터 작은 화면(모바일)으로 내려가기보다, 작은 화면(모바일)과 기본 CSS 속성을 먼저 같이 작성해 주면서, 큰 화면의 출력 될 코드를 작성하시면서 변경되거나 추가되는 부분을 작성하는 겁니다.

 

모바일 사이즈 주석

 

태블릿, PC 사이즈 주석

 

/* 기본 문법 */ 
@media screen and(){}

 

위처럼 태블릿 사이즈가 520px라고 예를 든다면, 모바일로 보다가 태블릿으로 홈페이지를 보면 메뉴나 HTML의 구성들이 조금은 달라지겠죠? 그래서 '최소 520px부터는 태블릿 사이즈다'라고 최소 사이즈를 정해놓으려고 괄호 () 안에 min-width를 설정해줍니다.

 

그러면 @media screen and (min-width: 520px) {CSS 속성} 이렇게 꾸며주는 것이죠. 스크린이 최소 520px부터는 중괄호 {} 안에 CSS 속성을 적용시키겠다는 의미입니다.

 

JavaScript

 

프론트엔드의 꽃이라 불리는 자바스크립트입니다. 뭐 당연한 말이지만, 아까도 말씀 드린 것처럼 실제로 화면이 동작하려면 그 안에 움직임을 부여해줘야 합니다. 그런 역할을 하는 게 JavaScript입니다. 

 

기본적인 내용

 

위는, 자바스크립트를 제일 처음 접한 날에 사전적 의미부터 정말 기본이라고도 하기 민망한 변수 선언 정도만 적은 것입니다.

 

변수

 

변수

 

변수 x와 y에 숫자를 선언해주고, 변수 z에는 x와 y를 더해주는데요.  x+y는 x+y 그대로 출력될까요? 처음에 x에 10, y에 400을 입력해줬기 때문에, x + y는 10 + 400인 410이 출력됩니다.

 

매개 변수

 

매개변수

 

매개변수는 함수명 옆 괄호 () 안에 임의로 매개변수를 지정해주면, 위에 코드처럼 매개변수('문자')를 입력하면, 제가 임의로 지정해둔 문자 안에 치환이 가능합니다. 제가 txt란 변수에 '안녕하세요' 하고 인사하는 문자를 입력했고, 매개변수에 '고릴라', '일론머스크', '워랜존버핏'을 입력했으니, 정상적으로 작동이 된다면 함수명 안에 입력한 값들이 차례대로 name이란 매개변수에 치환되어 출력될 것입니다.

 

출력 화면

 

아직, 배열, 랜덤 함수, 반복문 등 포스팅에서 다루지 못한 내용들이 많습니다. 하지만 제가 프론트엔드 공부를 계속 하는 동안은, 사실 그 내용들은 몇 번이고 지겹게 반복하며 제 포스팅에 언급 될 것입니다.