2023. 8. 30. 12:31ㆍ저는 HTML으로 디자인 합니다
배경
나는 디자이너이지만.. 코드에 대한 이해도가 있어야 개발자와의 소통이 좀 더 잘되는것으로 판단! 또한, HTML/CSS를 알아두면 추후 내 포트폴리오 홈페이지라던지 간단한 마크업은 내가 할 수 있을 것 같아 연습할겸 클론코딩을 진행해보았다. 그래서 이더리움 홈페이지를 방문해 구조를 파악하였다.
목표
먼저 코드를 쓰기전에 내 나름의 규칙을 세웠다. 첫 번째, id와 class를 구분해서 사용할 것. id는 한번 만 쓸 수 있고 class는 여러번 쓸 수 있기 때문에 반복 작업에는 class를 사용하는것이 낫다고 판단했다. 그리고 두 번째, 구조를 한 눈에 알아 볼 수 있도록 header/section/footer 시맨틱 태그 사용해보기, 이 외 CSS 스타일 작업시 지저분하게 작성하지 않을 것, 최대한 코드를 적게쓰기, 간단한 CSS효과(a:hover, onclick)로 할 수 없는 것들은 구글링해서 가져오기 등등 크고 작은 규칙을 세워 코드를 작성하기 시작!
제작
먼저 Header, Visual img, Section(Contents), Footer 총 4가지로 나누고 안쪽 가이드(상단 이미지 붉은색 박스)를 Container으로 만들어 준다.
그리고 그전에 reset.css를 잊지말고 폴더에 추가해준다. 이렇게 해야 나중에 스타일 작업시 코드가 꼬이는일이 없다. 특히 내가 겪은 것들 중 두 가지는 첫 번째, text 스타일 문제로 예시로 HTML에서 a태그를 주면 언더라인이 생긴다. 이게 기본값이라 text-decoration에서 언더라인을 없애는 스타일을 항상 입력해야했다. 두 번째, 기본적으로 margin 값이 있기 때문에 값을 초기화 해줘야한다. 이 외에도 여러가지 스타일 문제가 있기 때문에 css 파일 만들면서 reset.css도 챙겨야한다.
container는 반복되기 때문에 calss으로 지정해줬다. 이렇게 해야 가운데 가이드 사이즈를 스타일에서 계속 똑같이 작성할 필요가 없기 때문에 편리했다. 또한, 컨텐츠 정렬시에 display:flex 보다 float을 사용해서 배치를 해줬다, float을 주기 전에 span태그는 인라인 태그이기 때문에 display:block을 줘서 덩어리(?)로 만드는것도 잊지 않았다. 그리고 margin과 padding을 적절히 이용하여 때에 맞게 사용했다.
header는 position:fixed이용해서 고정시켰고(아래 이미지) float을 이용해서 메뉴는 왼쪽/검색은 오른쪽 나눠서 진행했다. visual img 밑에 작은 글씨가 움직이는 효과(keyframes)가 있었는데 이건 구글링해서 가져왔고 버튼 누르면 나타나는 hover효과도 추가했다.
section의 contents 1번은 텍스트 왼쪽/이미지 오른쪽 float으로 나눴고 카드는 hover 효과(아래 이미지)가 있기 때문에 hover 할 때 transform을 줘서 크기를 조금 더 키우고 transition을 줘서 시간차를 뒀다. 커서도 바꾸고 컬러도 바꿨다.
그리고 contents2번은 class를 이용해서 반복작업을 했다. class를 선언하고 CSS에서 스타일 작업시 시간이 단축되고 효율적으로 사용 할 수 있었기에 반복 레이아웃은 어렵지 않았지만 여기서는 버튼에 hover 효과가 있었다! 다행스럽게도 class에 버튼도 포함되어 있었기에 밑에 스타일 코드처럼 작성했더니 모든 레이아웃의 버튼에 적용됬다.
그리고 아래 이미지보면 윈도우박스가 통이미지처럼 보이지만.. 이더리움측에서 저걸 다 스타일로 만들어놨더라.....ㅠㅠ 직접 만드는거라 CSS으로 한땀한땀 작성했다. 이미지가 들어간건 없다. 상단 오른쪽 < > 아이콘만 가져왔을 뿐.. 또한 리스트가 hover라서 이 부분도 신경썼다. 여기서 시간을 조금 할애했다. 못할줄 알았는데 해냈다.
여기서 문제점이 있었다. 아래 이미지처럼 구글링을 통해 찾은 비슷한 차트를 배경에 적용시켜봤더니 계속 코드가 꼬이는 일이 발생.. 여기서도 상당시간을 할애했기에 차트 없이 넘어가고 흉내만 내기로했다. 여기도 반복되는 디자인이라 class를 사용했고 전체 width값이 고정이니 나누기 2 사이즈로 카드 width 사이즈를 정했고 float:left 왼쪽순으로 정렬, 나머지 2개는 떨어트리게 만드니 2행 2열이 완성됬다.
마지막 footer의(아래 이미지) sitemap에서 display:flex를 주면 각각 일정한 비율로 나눠지겠지만 실제 홈페이지에서는 텍스트 너비가 두줄로 넘어가지 않게끔 각각 크기가 다르게 되어있어 margin-right 값으로 여백을 맞춰 진행했다.
결과
캡쳐해서 붙여놓은거라 크기가 각각 좀 달라보이는데 실제로는 개발자도구 이용해서 사이즈를 다 맞춰놨다. 참고로 이미지는 홈페이지에서 다운 받을 수 있어서 이미지도 그대로 사용했다.
개선해야 할 점 (또는 아쉬웠던 점)
1. 반응형이 아니다..?! : width 값을 고정값으로 주고 div들을 중앙정렬만 해놔서 브라우저 사이즈를 줄이고 늘렸을 때를 고려하지 못했다. 애초에 Container 사이즈를 고정했고 min-width/max-width 미디어 쿼리 작업은 스타일 코드가 반복되는 점 때문에 시간이 두세배로 걸린다는 판단으로 초보가 하기에는 아직 무리라고 생각하여 작업하지 않았다.
2. 컨텐츠 안에서 반복되는 컨텐츠에게 class를 선언했으나... : 버튼, 텍스트 컬러 스타일을 각각 지정 할 때는 그 부분에만 id를 줬는데 CSS 코드만 잔뜩 늘어났다. 애초에 class를 주지말고 id 붙여주고 전부 각각 작업 했으면 CSS 작업시 좀 더 세밀하게 스타일을 지정해 줄 수 있지 않았을까 싶다. (근데 이것도 CSS만 잔뜩 늘어나서 지저분했을 것 같다)
3. 시맨틱 태그를 사용했으나 CSS에서는.. : 시맨틱 태그를 사용하기가 무색하게 이미 시맨틱 태그에 id 혹은 class를 선언했기 때문에 CSS에서는 id와 class 이름으로만 사용했다. HTML 문서에서는 보기 편하겠지만 CSS 스타일 문서에서는 id, class 이름만으로 한줄을 다 차지했다. 지금은 비록 나만 알아 볼 수 있는 코드지만 협업시에는 id, class 이름짓기에 규칙을 세워야 할 것 같다.
이 외 배경에 차트넣는 법, 디테일한 스타일 작업이 있겠다.
후기
이번에 HTML/CSS 클론코딩을 진행하면서 코드에 대해 더 잘 알 수 있는 시간이었다. 도와주는 이 없이 홀로 시작했는데 나의 선생님은 구글이었다^^ 모르는거 무조건 구글링해서 찾아냈다. 사실 작년에 시작하고 footer에서 손 놓았다가 거의 8개월만에 다시 시작하게 됬는데 이 기간동안 내가 쓴 코드들을 다 잊어버려서 잘 마무리 할 수 있을까 싶었다. 그래도 이전 코드들을 하나씩 살펴보니 기억이 되살아났고 특히 CSS문서를 다시 봤을 때 잊어버려서 당황스러웠지만 애초에 코드를 적게쓰는것이 목표였기 때문에 크게 어렵지 않았다.
디자이너가 왠 코딩? 이라고 생각하겠지만 HTML 구조를 만들면서 생긴 이해도가 피그마에서도 적용되기 때문에 이렇게 가볍게 HTML/CSS를 사용해서 클론코딩을 해보는것도 나쁘지 않은것 같다. 가끔 디자이너가 코딩 할 줄 알아야 되냐고 물어보는데, 코드에 대한 이해도가 필요한거지 작성하는 능력이 꼭 필요한건 아니라고 생각한다. (js부터는.. 모르겠다 진짜)
그리고 이더리움 홈페이지가 크게 바뀌지 않아서 너무나 다행이라고 생각, 리뉴얼 되기전에 얼른 끝내버리고 블로그에 포스팅 할 동기로 진행했다. 홈페이지와 비교해보면 디테일한 부분을 놓친게 조금 아쉽지만 그래도 잘 마무리 되어서 좋다. 끝.
'저는 HTML으로 디자인 합니다' 카테고리의 다른 글
| [챗 GPT] HTML/CSS으로 게시판 만들기 (0) | 2023.08.10 |
|---|---|
| HTML5/CSS3이용해서 1시간만에 뉴스레터 디자인 만들기 - CSS 세로 가운데 정렬 (1) | 2023.05.25 |
| HTML/CSS 강의 9일차 : 웹폰트, 포토샵이미지슬라이스 (0) | 2022.01.18 |
| HTML/CSS 강의 8일차 : 레이아웃,링크걸기,그래픽스타일(그라디언트),크로스브라우징,웹폰트 (0) | 2022.01.15 |
| HTML/CSS 강의 7일차 : 웹접근성, h태그, 시맨틱태그 (0) | 2022.01.14 |