홈페이지를 만들자 (2)

그러나 한 번 날려버린...

VS Code와 챗지피티를 이용하여 사이트 모양새를 잡기 시작했다.

하지만 올릴 수 없다. 바보같이 저장하지 않고 꺼버렸기 때문이다.

저장은 현대인의 기본 소양이거늘... 매번 어도비 날아간다 욕했는데 어도비 자동저장은 선녀였다.

어쨌든 처음 생각했던 것에서 메뉴바는 반투명으로 띄워본다던가, 내용을 팝업으로 띄워볼까 식으로 여러가지 궁리보기 시작했는데 계획에서 크게 달라지지 않고 좀더 구체화된 것에 가깝다.

왼쪽에 메뉴를 놓고 오른쪽에 내용이 나오는 메인을 두기로 했는데 예전엔 iframe으로 하던 것을 이젠 div로만 하는 것 같다. 덕분에 가장 많이 사용하는 것이 div였다. 챗지피티가 풀어준 코드 중에 section이란 것이 튀어나왔는데 div랑 뭔 차이인지 모르겠다.

그래서 div와 section의 차이를 검색했는데 이번엔 또 article이란 것이 튀어나왔다.

정확히 이해한 것인지는 모르겠지만 결국 세 가지는 큰 차이가 없는 것이지만 작업자의 재량으로 구분해서 사용할 수 있는 것 같다. article은 한 페이지의 판면이란 느낌이고, section은 페이지 중 일부인 느낌이고 이 모든 것을 통틀어 div란 거 아닐까? 아무튼 div만 쓰기엔 정신없고 한계가 있다보니 두 가지도 함께 사용하는 것 같았다(진짜일까?)

그림의 엑스로 채운 네모들은 내가 작업한 이미지들을 넣을 생각인데 차곡차곡 가로로 쌓이는 것을 원했다. 가로 사이즈도 적당히 정했는데 자꾸 이놈들이 세로로 쌓였다. 이리 저리 해보다가 부모div와 자녀div으로 구분되는 것이 있었다. 이놈의 부모 자녀 어쩌구는 피그마 할 때도 그렇고 나를 너무 괴롭힌다......

아무튼 가로로 채우는 것도 성공하고 내 맘에 드는 가로 사이즈도 정했는데 다시 생각해보니 1920픽셀을 기준으로 가로 사이즈와 간격 사이즈를 좀더 신경써서 잡아야 했나 싶다.

또 들은 건 있어서 창이 좁아졌을 때 반응형은 어떻게 해야할지 다시 챗지피티와 상의했다. 메뉴바를 세로로 가로로...? 고민하다가 햄버거 마크를 사용하라는 내용을 보고 그쪽으로 가기로 했다.

그건 그렇고 챗지피티는 div에 radius값 넣는 것을 엄청 좋아하는 거 같다. 좀 모나게 살어...

애초에 하얀 배경에 검은 글씨로 간단히 채울 예정이었는데 좀 심심한가 싶기도 하다... 반투명 메뉴가 돋보이려면 배경에 색이나 텍스쳐가 느껴져야 더 어울릴거고... 지금처럼 하얗고 까만 컨셉엔 굳...이...? 싶은 기능이지만 작업물을 눌러 들어갔을 때 배경이 채워지면 상관없지 않을까? 그치만 내 작업물은 그렇게 배경이 화려한 게 별로 없다... 좀더 생각해봐야겠다.

이젠 홈페이지에 채울 내용을 모아야 하니까 다시 작업할 때 내 작업물에 맞는 색깔이나 그래픽을 궁리해볼까 한다.