Mission01 (html/css)

빠르게 제 실력을 판단해보고 싶어서 지금까지 들은 강의들과 구글의 힘을 빌려서 해야하는 과제를 미리 진행했습니다. 아직 공부한 것에 비해 실력이 없다고 생각이 들었지만 진행했습니다. 주제는 주어진 피그마 시안을 보고 간단한 마크업 및 css 입히기였습니다.

진행 방식:
1. 레이아웃 구상
2. html 마크업
3. css 적용

미션을 수행함에 있어 제가 택한 과정입니다. 지금까지 2주정도 강의를 들어봤을때 강사님들이 이렇게 해결하시는 것 같아서 나눠봤고 html은 헤더 부분과 내용 부분으로 나눠서 진행했습니다.
그림으로 그리진 않았지만 레이아웃을 구상함에 있어 헤더와 내용 부분을 나눴고 내용 부분에서 세부적으로 더 나눠서 구상했습니다.
html은 주어진 mission에 맞춰서 마크업 진행했고 a 태그, img 태그, header, section, div 등 배웠던 개념들을 직접 사용해봤습니다. 한 강사님이 말하시길 일단 페이지에 있는 요소들을 다 적고 부분부분에 주석을 적어줘서 구획을 나눠 진행하면 편하다고 하셔서 그 방식을 택했습니다.
마크업까지는 어느정도 빠르게 진행했고 css 파트로 넘어갔습니다.
css는 제대로 된 기능, 사용법 등을 모르면 제가 생각한 것과 완전히 반대로 적용되어 position에 대한 공부, box-sizing에 대한 공부 등 더 필요한 공부를 하면서 진행했고 50프로 진행했을때마다 다시 다 삭제하고 그렇게 3번을 진행했는데 3번 다 다른 코딩이 되어 있어 당황했습니다. 나중에는 맞춰볼 생각입니다. 그 중 가장 잘 됐다고 생각하는 것은 vscode에서 진행하다가 codepen으로 진행했을 때 더욱 빠르고 잘 볼 수 있었고, 나름대로의 버전업을 하다보니 빠르게 진행됐던 것 같습니다.

가장 문제는 이 코드가 맞는지, 제가 문법이나, 접근성, 호환성을 잘 신경쓰며 코딩을 하고 있고, 다른 분들이 봤을 때 가독성이 있는지가 신경이 쓰여서 2번의 삭제를 하였고 마지막으로 3번째에서도 이게 맞는지에 대한 의문이 들었습니다.

미션 수행 시 어려웠던 점 및 회고

1. 첫번째 마크업이라 이게 맞는지 3번을 다했다가 지웠다가 했고 특히나 제가 하는 것을 누가 맞다, 틀리다 하면서 검증해주지 않아서 무지의 세계로 들어가는 기분이 드는 것이 어려웠습니다.

2. 제대로 된 공부가 되진 않아, css 기능을 잘 사용하지 못한 것 같았고 강의와 구글의 도움을 받아했지만 제가 한 것에 적용을 잘 못했지 않았나라는 생각이 들어서 힘들었고, 어려웠습니다.

이것은 개인적으로 하다가 나중에 해보고 싶은 것입니다.

버튼 구현 시에 이미지가 있는 줄 모르고 직접 after, before로 화살표를 그려서 사용했습니다. 나중에 해결하고 싶은 코드이기에 이 글에 올리도록 하겠습니다.

button{
  position: relative;
  border:none;
  width: 42px;
  height: 42px;
}
.tea-area:hover > button, .tea-area:focus > button
{
    content: "구매하기";
    position: absolute;
    width: 176px;
    height: 40px;
}
button::before{
  content: "";
  position: absolute;
  top: 40%;
  left: 35%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #F3F3F3;
  border-left: 2px solid #F3F3F3;
  transform: rotate(135deg);
}
버튼 영역

제 구상 방식은 이렇습니다.
먼저 이미지 영역 안에 버튼을 만들어서 화살표를 구현할 수 있는
제가 한 방식은 tea-area가 hover나 focus가 되었을 때 버튼이 변경되고 그 자리에 구매하기와 제가 만든 화살표가 나오는 방식으로 만드려고 했으나 고심 끝에 해결을 못하고 과제를 진행하였습니다. 어떻게 해야할지 공부해야겠지만, 제 방식이 틀린 걸 수도 있기에 그 이유를 알기 위해, 까먹지 않기 위해 이 글을 작성합니다.

간결한 회고:

html, css 모두 아직 부족한 것을 느꼈습니다. 그래도 한 발자국의 변화나 발전이 있다면 만족했었던 저이지만 뭔가 해결을 못했다는 사실이 분하네요 특히 버튼 부분.. ㅎㅎ 이미지가 없었다면 아마 같은 방식으로 계속 진행하다가 완성을 못했을 수도 있다고 생각이 들었습니다. 지금 약 7일째 과제를 하고 있었지만 생각보다는 쉬울 수 있는 과제도 시간이 많이 들어감을 알았고 강의만으로는 부족하다는 것을 알았습니다.
미션을 진행하면서 제가 부족한 부분은 position에 대한 이해, 그리고 이번에 처음 시도한 css 내에 변수 선언, display:flex 등등 아직은 부족하지만 그럼에도 불구하고 기능적인 부분이 아닌 외적으로 드러나는 부분들을 진행하면서 재미를 느꼈고 보이니까 힘들었지만 재밌게 진행했던 것 같습니다.