20일차 - 연결페이지 코드 수정, 플렉스박스와 그리드의 차이 등
연결페이지 수정하기
19일차에 메인페이지에 연결된 페이지를 그리드 속성을 안쓰고 만들어봤었는데, 오늘은 그리드 속성으로 일부 수정하여 만들어보았다. 그래서 브라우저에 나타난 웹페이지의 모습은 맨 아래 빼고 똑같다.
위 이미지는 display에 flex 값이 되어있던 부분을 grid로 수정한 모습이다. 또한, 좌우로 중앙정렬하도록 grid-template-columns 속성에 600px 600px의 값을 주었다.
이렇게만 하니 전체적인 배치가 수정 전과 한군데 빼고 똑같아졌다. 달랐던 곳은 런던의 카드가 있는 부분이었는데, 이 부분은 한 열을 모두 쓰기 위해 HTML 코드에 별도의 컨테이너를 설정했고, CSS에서 width를 980px을 준 상태였다.
그런데 grid를 적용하니 한 열을 차지하지 않고 반쪽만 차지하고 이미지와 설명란의 높이가 안맞는 문제가 발생했다.
너비를 재조정해도 안되고, grid-column 속성을 사용하여 명령을 내려도 뜻대로 되지 않았다.
그래서 이 부분은 flex 값으로 바꿔주니 원래 상태로 돌아와서 일단 이대로 두기로 했다. 이 부분은 같은 레이아웃의 별도 웹페이지를 연습삼아 만들면서 해결해볼 생각이다.
19일차에 발리카드 부분을 보면 가운데정렬되어 있었던 것을 확인할 수 있었다. 그런데 그리드 속성을 사용함으로 인해 같은 행에 바르게 정렬되어 보기 편하게 수정되었다.
플렉스박스와 그리드의 차이 한가지
플렉스박스는 1차원적인 레이아웃 즉, 행과 열에 강한 레이아웃이라는 것이고, 그리드는 2차원적인 레이아웃 즉, 행과 열의 조합에 강한 레이아웃이라는 것이 차이점이다.
이 부분은 플렉스박스와 그리드 모두 사용해보면서 확실히 느꼈던 부분이다. 그래서 요소들의 배치에 신경을 써야하는 웹사이트를 만들 때는 그리드를 잘 활용하면 좋을 것 같다.
meta charset = "UTF-8"의 의미
HTML 문서를 만들 때 맨 위에 의문의 메타데이터가 있는 것을 볼 수 있다.
위 이미지처럼 meta charset = "UTF-8"라는 데이터인데, 이 데이터는 현재 만들고 있는 HTML 페이지에 적용된 표준 문자열로, 브라우저나 HTML이 특정 문자들을 어떤 기기나 플랫폼에서도 이해할 수 있게 해주는 데이터이다.
그래서 이런 데이터로 인해 데스크탑으로 보든, 노트북으로 보든, 핸드폰이나 패드로 보든 웹사이트의 문자열들이 모두 사용자에게 보여지는 것이다.
이 문자열은 숫자나 기호도 될 수 있는데, 모든 문자에는 해당되는 유니코드 값을 가지고 있어서 이 값을 입력하면 사용하고 싶은 숫자나 기호 모두 표현할 수 있다.
위 이미지는 유니코드 값을 활용하는 예시를 보여주고 있는데, 기호 자체를 HTML 문서상에 입력해도 출력되고, 화살표의 유니코드 값인 →를 입력해도 출력된다.
이 유니코드 값들은 위키피디아에 자세히 나와있다. 필요할 때는 찾아보는 것도 도움이 될 것 같다.
