[위코드] 자기소개 페이지

지금껏 배운 HTML, CSS를 바탕으로 자기소개 페이지를 만든 후 Github에서 배포하는 프로젝트였다.

 

HTML

Responsive Design 

크롬 개발자 도구에서 모바일 사이즈를 클릭해도 media query가 적용되지 않은 화면이 보였는데

HTML 상단에 이 코드를 넣으니 제대로 보였다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

아래 코드는 현재 유저가 사용중인 스크린의 width를 viewport로 설정하라는 뜻이다.

이 코드를 넣지 않으면 어떤 스크린에서 접근하든 화면의 width가 데스크탑 width로 자동 변환된다.

가끔 모바일로 어떤 웹사이트에 접속하면 해당 웹사이트의 데스크탑 버전이 엄청나게 작은 버전으로 축소되어 보이는데, 

디폴트 설정이 그렇기 때문이다.

 

CSS

Flex를 넘어서자

flex가 익숙하다보니 급한 마음에 전부 flex를 적용했다. 

다음 번엔 메뉴는 flex, 본문은 grid로 작업해보고 싶다.

 

클래스명은 명확하게 짓자

About 화면을 기준으로 해서 work, contact 화면을 조금씩 변형하는 방식으로 작업했다.

처음엔 마구잡이로 클래스명을 붙였는데 기준 화면과 달라져야 하는 부분에는 또 클래스명을 붙여야 하다 보니 점점 혼란스러워졌다.

마지막에는 기준 화면의 div 클래스명이 아래와 같다면,

<div class="container"></div>

work 화면의 같은 div는 아래와 같은 클래스명을 갖도록 스스로 규칙을 만들었다.

<div class="container work-container"></div>

하지만 처음부터 기준 화면의 클래스명을 명확하게 만들고 규칙을 정한 다음 코드를 짜면 덜 헷갈렸을 것 같다.

 

Font awesome 크기 조절

font awesome 아이콘은 html에서 바로 크기를 조절할 수 있지만,

css를 써야 하는 경우 width가 아니라 font-size로 조절한다.

width를 적용했더니 아이콘 크기는 달라지지 않고 이상한 위치에 마진이 생겨서 당황스러웠음.

 

Javascript

getElementsByClassName으로 얻은 객체는 배열이 아님

getElementsByClassName으로 얻은 객체 a에forEach를 썼는데 계속 오류가 났다.

알고보니 a는 HTMLCollection이라는 객체로, 배열처럼 생겼지만 배열이 아니었다.

a는 아래와 같이 배열로 변환해주면 forEach를 쓸 수 있다.

Array.from(a).forEach()

 

문자열에서 인덱스를 -1로 쓰면 undefined 반환 

마지막 문자를 얻으려면 다음과 같이 작성

str.slice(-1)
str.charAt(str.length - 1)