✨ 새롭게 알게 된 것
1. 마크업 개발의 기본 세팅
: 마크업 개발을 할 때 중요한 부분이 바로 프로젝트 기본 세팅이다.
프로젝트의 큰 그림을 그리는 것이라고 생각하면 되는데, 폴더를 구조화해서 마크업 언어별 / 기능별로 따로 구분하게 된다.
특히나, 스타일 시트의 경우에는 하나의 파일에 모든 스타일을 넣는 것이 아니라 기능별로 묶어 폴더를 구분해놓는 것이 가장 중요하다.
SASS(SCSS)를 사용하게 되면 변수 처리나 @mixin 등의 기능을 사용할 수 있기 때문에 자주 사용하는 기능들, 고정되어 있는 메뉴나 하단 영역의 스타일은 각각 다른 파일로 관리해 주는 것이 좋다.
👉🏻 기본적인 폴더 구조 (예시)
[ docs 폴더 / assets 폴더 생성 ]
1. docs 폴더 → html 파일 저장
2. assets 폴더 → 스타일 파일 저장
- SASS(SCSS)를 사용하게 되면 자동으로 생성되는 css 파일 저장
- images 폴더에 사용되는 이미지들 저장
- SCSS(SASS) 폴더 → SCSS 파일들 저장
➤ SCSS 폴더도 기능별로 또 다른 폴더들로 구분해서 파일들을 저장
(SCSS 파일을 모두 분리해 저장 및 관리해 주고 main scss 파일에서 해당 scss 파일들을 모두 import 해준다!)
→ variable 폴더에는 자주 사용하는 스타일 저장 (재사용성)
→ base 폴더에는 reset 파일 등의 css reset과 관련된 파일 저장
→ compoent 폴더에는 스타일을 기능별로 구별해 파일 저장
폴더 구조를 어떻게 구성하느냐는 개인의 취향이기 때문에, 유지 / 보수가 용이한 구조로 본인의 스타일, 규칙을 만들어 나가는 게 중요하다!
중요한 점은 재사용성, 유지, 직관성 등의 특성들을 생각하여 폴더 구조를 잡아가야 한다는 것이다.
2. position과 z-index
z-index란?
: z-index는 position 속성이 설정이 된 element에 대해서만 의미를 가지는 속성으로, element의 위치를 나타내는 속성이다.
z-index는 기본적인 속성값은 0이고, 하나의 속성값만을 가지게 된다. 이때, 양수와 음수가 모두 가능한 정수를 속성값으로 가지게 된다.
z-index가 중요한 이유는?
: 기본적으로 html은 요소들이 하나씩 쌓이는 구조이기 때문에 어떤 콘텐츠가 어느 위치에 있어야 하는지 그 설정값을 주는 것이 굉장히 중요하다.
position 속성을 지정하게 되면 position은 구조의 순서를 무시하고 자유롭게 위치를 지정할 수 있게 해주기 때문에 영역 혹은 콘텐츠들의 구조가 꼬이는 문제가 발생할 수 있게 된다. (position은 위치 기준을 설정하는 속성이기 때문에)
이때, 전체적인 구조를 레이어 층으로 생각하여 최상단으로 올라와야 하는 콘텐츠 혹은 영역에 z-index 속성값을 줌으로써 뒤로 빠지지 않고 앞으로 나올 수 있게 설정할 수 있다.
z-index의 속성값은 큰 숫자일수록 상단으로 레이어 된다.
z-index: 100;<z-index: 101;
→ 따라서, position 속성을 지정했다면 z-index 속성으로 그 위치를 정확하게 설정하는 것이 좋다!
✅ 참고
mozilla-z-index 적용
3. svg의 fill
: svg의 fill은 svg의 색상을 조정해 주는 속성이다.
기존 이미지는 따로 색상을 변경하여 사용할 수 없었지만, svg에서는 fill을 사용하면 임의의 색상을 적용할 수 있다.
만약, 색상 변경 없이 계속 사용되는 이미지의 경우에는 따로 이미지 파일로 저장하여 사용하는 것이 좋지만 색상이 변경이 되는 이미지의 경우에는 svg로 불러와 사용하는 것이 좋다.
→ 이 부분 역시 변경이 필요 없는 이미지, 변경이 필요한 이미지를 구분하여 그에 맞는 그래픽을 사용하는 것이 중요하다!
<svg width="20" height="20" viewBox="0 0 104 104" fill:"yellow"> ... </svg>
→ yellow로 색상 설정✅ 참고
CSS-📚-SVG-다루기-정리
✨ 회고
코드 양도 많아지고 폴더 구조도 복잡해지기 시작하면서 작성한 코드들을 모두 이해하지 못했던 점이 아쉬웠다. 큰 그림을 그리고 그에 맞는 폴더 구조를 구성하는 것에 익숙하지가 않다 보니 꼬이는 부분들도 많았고 tag들을 빼먹는 등의 잦은 실수가 많았다.
마크업 개발을 제대로 해본 것이 처음이기 때문에, 어려운 것이 당연한 거라고 생각하면서 조금이라도 더 익숙해질 수 있도록 반복하고 또 반복하면서 꾸준히 연습을 해야겠다.
처음부터 모든 걸 이해하려고 하지 말고 조금씩 깊게 알아갈 수 있도록!
결론은, 다시 처음부터 :)
