[TIL]Day 3. HTML/CSS 정리(3)

1. <div>태그를 가로 정렬 하는 법

 html에서 어려운 것 중에 하나가 태그들을 배열하는 일이라고 생각한다. 오늘은 그 중 <div>태그를 가로정렬 하는 것을 해보았다. 앞서 썼던 글 중에 <div> 태그를 float를 활용하여 정렬하는 내용이 있었는데, 그 방식은 너무 옆으로 붙는 느낌이 들어 이번엔 다른 방식을 사용해보기로 했다. 

 이 방식도 굉장히 간편했는데, <div>태그에 display: inline을 부여하는 것이었다. 이렇게 되면 <div>요소들은 어제 정리한 내용처럼 한 줄에 나란히 정렬되게 된다. 하지만 어제 말했던 것처럼 좌우 값만 반영되고 그 외의 값들은 반영되지 않으므로 사용할 때를 잘 가려서 사용해야 할 것 같다.

(어제 정리한 내용이었는데, 생각이 나지 않아 한참 구글링을 했다;;)

 

2. 스크롤 부드럽게 이동하기

 하이퍼 링크를 통해 페이지 내에서 부드럽게 스크롤 되는 것을 구현하고 싶었다. 아이콘에 하이퍼링크를 걸어 페이지 내에서 이동하는 것은 구현을 했지만, 부드럽게 넘어가지지 않고 그 즉시 페이지가 이동되어 버렸다. 잠깐의 구글링을 통해 scroll-behavior: smooth를 사용하면 된다는 것을 알게 되었고, 해당 요소에 적용해 봤지만 소용이 없었다. 마침 같은 스터디원이었던 동현님이 이 기술을 사용하셨기에 물어보았다. 

 동현님과 나의 차이점은, 나는 요소에 직접 이 속성을 사용했고 동현님은 이것을 html 전체 요소에 적용했다는 것이었다. 왜 이 차이가 속성의 발동 유무를 가른 것인지는 아직 잘 모르겠다. html을 좀 더 공부하면서 이 차이점도 차츰차츰 알아가도록 해야겠다.

 

3. github 웹 호스팅 하기

 github를 활용하면 별도의 서버를 구축하지 않아도 쉽게 내 웹페이지를 호스팅할 수 있다. 그 방식은 생활코딩에 쉽게 소개되어 있기에 링크를 걸어두도록 하겠다.

https://opentutorials.org/course/3084/18891

웹호스팅 (github pages) - 생활코딩

 

 이것을 보고 그대로 따라한 나는 전혀 호스팅이 되지 않는 오류에 직면했다. 그래서 한참이나 골머리를 썩였다. 전에 카카오톡 클론코딩을 했을 때에도 마지막 호스팅을 하지 못해 미완으로 남겼던 경험이 있기 때문이다(어떻게 된 일인지는 모르겠으나 github에 해당 버그가 해결되어 지금은 정상적으로 호스팅 되어 있다).

 그래서 구글링을 해본 결과, 문제는 생각보다 간단한 것이었다. 나는 메인 페이지를 home.html 로 이름지어 놨는데, 이렇게 될 경우 github에서 인식을 하지 못하는 것이었다. 그래서 메인 페이지 이름을 수정하고 호스팅을 했는데, 이번엔 css가 적용되지 않았다. 이것은 css폴더를 github에 만들어주지 않았기 때문인데 github에 폴더를 만드는 방법 역시 간단했다. 새 파일 만들기로 들어가서 파일명을 쓰는 공간에 (폴더명/)를 적어주면 아주 쉽게 만들어지는 것이었다. 다만, github는 비어있는 폴더를 인식하지 못하기 때문에 그 후 간단한 파일 하나를 만들어 넣어놓아야 한다.

add file에 Create new file 을 클릭한 후

name your file에 위의 예시처럼 css/를 치면 바로 폴더가 만들어진다.

 

 이렇게 해서 내 머리를 뒤집어 놓았던 github 웹 호스팅 문제를 해결했다.