2022-07-19
계정을 바꿔서 다른 곳에 있던 글 옮겨왔다.
유튜브 디자인 베이스로 예제 따라하면서 공부 중...
확실히 디자이너를 위한 코딩 강좌라 그런지 너무 재밌게 하고 있다.
같은 div에 들어가 있는 텍스트 두 개가(제목, 내용) 자꾸 겹쳐있어서 진땀 뺐다.
근데 css 위 쪽에 h1에 부여했던 속성을 까먹고 안 지움... 그러니 div class 속성을 아무리 만져도 안바뀌지... 귀찮아서 전 강좌 때 썼던 파일에 덮어 썼더니...ㅋㅋㅋㅋㅋ
앞으로는 귀찮아도 새 파일 만들어서 해야겠다.
피그마를 쓸 줄 아는게 굉장히 많이 도움이 되고있다. figma에서 이 기능 코딩 명령어는 뭐라고 하지? 라는 식으로 찾으면 금방 나오고 이해도 잘 된다. 역시 뭐든 허투루 버리는 경험은 없고만...
- figma의 clip content는 overflow:cover;
- 정중앙에 배치하는 명령어 position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
figma나 다른 디자인 툴에선 align 버튼 두 번이면 되는데 길다... 반응형까지 고려된 거라 그런가보다.- 부모 div의 포지션을 relative, 자식 div의 포지션을 absolute로 지정해주어야 자식 div 포지션의 기준이 부모 div가 된다...! 개충격 relative 하나 넣었더니 오버레이 박스 자꼬 삐져나가던거 바로 해결됐다.........(물론 정확한 명령어 정의는 모름.. 눈에 보이는 결과만 보고 예상한 것)
정말 많이 쓰게 될 것 같은 이미지 사이즈 자동 조절 명령어.
(이미지 편집하기 귀찮아...)
완성~ㅎㅎㅎ 코딩 공부도 하고 디자인 레퍼런스 구경도 하고 일석이조자너~
- 부모 포지션 relative
- 자식 포지션 absolute
명령어로 고전하던 부분이 한 방에 해결된 것에 적잖이 충격 중...사실 코딩 배우면서 계속 충격 받고 있다. 약간 수학 문제 풀면서 공식 하나 틀린 것 땜에 안 풀리던게 바로 풀린 것 같은 느낌? 물론 난 예체능이지만ㅎㅎ)
결국 포지션 명령어에 대해 찾아보고 말았따
...! 그랬군 그랬어...!
더불어서 회사 개발자 분에게 아 이 부분을 fixed로, 이 부분은 static으로 포지션 잡아주세요 라고 말할 수도 있었겠다 하는 생각도 스친다.
디자이너가 코딩 공부 즁~♪