1. 프로젝트 생성
더프텔 프로젝트의 첫걸음을 내딛기 위해 Rider를 사용해 프로젝트를 생성했다.
사실 Rider는 원래 유니티 개발할 때 주로 사용했던 IDE이지만, 익숙한 환경에서 새 프로젝트를 시작하는 것이 더 빠르게 작업을 진행할 수 있다고 판단했다.
Rider는 다양한 언어와 프로젝트를 지원하므로, HTML/CSS 프로젝트에도 문제없이 활용 가능하다.
Tip: Rider가 없다면 VS Code나 WebStorm 같은 다른 IDE를 사용해도 좋다. 중요한 것은 본인이 편하게 사용할 수 있는 도구를 선택하는 것이다.
프로젝트 생성 과정
- Rider 실행 → 새 프로젝트 생성.
- 프로젝트 폴더를 지정한 후, HTML/CSS로 기본 틀을 잡고 index.html과 style.css 파일을 생성했다.
이제 HTML과 CSS를 통해 라프텔 클론의 첫 구성을 시작할 준비가 끝났다.
2. Git 레포지토리 생성(깃허브)
코드를 안전하게 관리하기 위해 Git 레포지토리를 생성했다. 클론 코딩 프로젝트는 지속적인 수정과 업데이트가 많을 것이기 때문에 Git을 사용해 버전 관리를 하는 것이 필수적이다.
3. CSS Normalize vs Reset 선택 및 적용
2024.10.26 - [웹 개발/HTML,CSS] - [CSS] normalize.css / reset.css 란? (노멀라이즈/리셋)
[CSS] normalize.css / reset.css 란? (노멀라이즈/리셋)
1. normalize.css / reset.css을 사용하는 이유 내가 공부하다가 흥미로운 사실을 발견했다!최근 공부하다가 box-sizing 문제에 대해 흥미로운 사실을 발견했다.box-sizing: content-box;기본적으로 content-box가
ddecode.tistory.com
이거 보고 오면 너무 좋아용~
프로젝트를 시작하면서 가장 먼저 해야 할 일 중 하나는 브라우저마다 다르게 적용되는 기본 스타일을 일관되게 맞추는 것이다. 이를 위해 Normalize.css와 Reset.css 중 하나를 선택해 적용할 수 있다.
- Reset.css는 모든 브라우저의 기본 스타일을 완전히 제거하는 역할을 한다. 브라우저별로 초기 설정이 모두 같아지므로, 완전한 초기 상태에서 시작할 수 있다는 장점이 있다.
- Normalize.css는 각 브라우저 간의 차이를 조정해 기본 스타일을 보존하면서도 일관성을 제공한다. 브라우저별 차이를 최소화해 준다.
선택 및 적용
나는 이번 프로젝트에서 Normalize.css를 선택했다. Reset.css는 기본 스타일을 완전히 없애기 때문에, 일부 상황에서 너무 과도하게 초기화될 수 있다. 반면, Normalize.css는 브라우저 간 차이를 조정하면서 기본 스타일을 유지해, 더 안정적인 결과를 얻을 수 있다.
Download를 눌러 위 코드를 normalize.css 라는 이름으로 저장하고,
<link rel="stylesheet" href="normalize.css">위 코드를 통해 나중에 불러오면 끝~
4. 폴더 구조 설계
프로젝트가 커지면 파일이 복잡해질 수 있으므로 미리 폴더 구조를 잘 정리해 두는 것이 중요하다. 이렇게 하면 유지보수와 확장이 훨씬 편리해진다. 다음은 더프텔 프로젝트에서 사용할 기본적인 폴더 구조 예시이다
/project-root
/assets
/images
/fonts
/css
normalize.css
style.css
/js (JavaScript를 사용하게 된다면)
/pages (여러 HTML 페이지가 있을 경우)
index.html이러한 폴더 구조는 파일을 체계적으로 관리하는 데 도움이 되며, 프로젝트가 커질수록 효율적으로 작업할 수 있다.
가장 기본적으로 폴더 구조를 잡았다.
5. 반응형 웹을 위한 기본적인 meta 태그 추가
모든 현대 웹사이트에서 반응형 웹 디자인은 필수적이다. 다양한 화면 크기에 맞춰 사이트가 올바르게 표시되도록 하려면 meta 태그를 추가해야 한다. 특히 모바일 환경에서 잘 동작하도록 설정하는 것이 중요하다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">이 태그는 디바이스의 화면 크기에 맞춰 콘텐츠의 스케일을 조정하며, 모바일, 태블릿, 데스크탑 환경 모두에서 자연스럽게 동작하게 해준다.
6. 웹사이트 탭에 표시되는 작은 아이콘(Favicon) 추가
웹사이트의 탭에 표시되는 Favicon은 사이트의 아이덴티티를 드러내는 중요한 요소 중 하나이다. 이를 추가하면 브라우저 탭에서 사용자들이 사이트를 쉽게 인식할 수 있다. 아래와 같이 <head>에 Favicon 파일을 링크해준다:
<link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">Favicon은 .ico 파일 형식을 사용하는 것이 일반적이지만, .png 등의 다른 이미지 형식도 사용할 수 있다.
아이콘은 대~충만들었다
진짜 진짜 시작하자
'프로젝트 > [첫번째 이야기] 더프텔' 카테고리의 다른 글
| [2] 더프텔 - 네모네모 그리기 (1) | 2024.10.28 |
|---|---|
| [0] 더프텔 - 라프텔 클론 코딩 프로젝트 (4) | 2024.10.26 |