>westudy | Week 1 - HTML & CSS _ 20220519 - 자기소개 페이지2/3

 

🧐  (어제)문제사항들

1. 자바스크립트 코드 왜 에러가 나니

2. 이미지 파일들이 너무 많아서 지저분한 내 vscode 파일들

-> img폴더를 만들고, 이미지를 불러왔던 태그들의 경로에 img/를 추가해줬더니 해결했다.

3. css파일 분류하기

4. content 내용들이 너무 붙어있다.

5. 반응형?미디어쿼리?로 웹사이트 수정하기

6. favorite 페이지에서 이미지 밑에 설명하는 글 추가하기

7. grid, flex사용해서 favorite웹 페이지 3칸 2줄로 변경하기

8. 깃허브 사이트에서 생성한 주소로 들어가면 왜 접속이 안되고 뒤에 /home.html이라고 써야지 작동하지?

-> index.html로 파일명을 수정하니 제대로 작동했다.

여기까지는 어제 발견한 문제사항들 및 진행 상황이다. 오늘도 열심히 업데이트를 했다!

 

🧐  (오늘) 문제사항들

1. 자바스크립트 코드 왜 에러가 나니

-> 보니까 내 코드에서 쓰이지 않고 있는 자바스크립트 코드가 있었다. 삭제해서 간단하게 해결

2. 이미지 파일들이 너무 많아서 지저분한 내 vscode 파일들

-> img폴더를 만들고, 이미지를 불러왔던 태그들의 경로에 img/를 추가해줬더니 해결했다.

3. css파일 분류하기

-> 관련 유튜브 영상, 구글링을 수십개는 했다.. @import url (css파일경로)로 css파일을 불러올 수 있다.

-> main css파일에는 모든 페이지마다 쓰이는 값들을 적어넣었고, 각 페이지마다 다른 스타일은 새로 만들어서 각각 import로 불러왔다.

4. content 내용들이 너무 붙어있다.

-> 코드를 살펴봤더니 a태그와 h2태그로 내용을 작성했었다. 불필요하다 판단되었던 h2태그는 없애고 div로 다시 작성했고 a태그로 div로 감싸서 div에 padding값을 적용했더니 간격이 벌어졌다.

5. 반응형?미디어쿼리?로 웹사이트 수정하기

6. favorite 페이지에서 이미지 밑에 설명하는 글 추가하기

7. grid, flex사용해서 favorite웹 페이지 3칸 2줄로 변경하기

8. 깃허브 사이트에서 생성한 주소로 들어가면 왜 접속이 안되고 뒤에 /home.html이라고 써야지 작동하지?

-> index.html로 파일명을 수정하니 제대로 작동했다.

 

😆  (오늘) 추가한 사항들

1. 밋밋하던 contact 페이지에 animation 추가

2. favicon 적용

 

🤩 느낀점

디자인적으로 크게 업그레이드 된 사항은 없다. 난 디자이너가 아니여라 식상한 디자인에 실망하지말자 기죽지말자!! 그래도 지금 벌써 몇일째야 4일째 html, css코드를 보다보니까 코드를 보는 눈이 조금 생긴 것 같다. 처음 웹사이트 만들 때는 그냥 이코드 저코드 가져다쓰기 바빴는데, 이제는 css의 선택자도 잘 읽힌다 뿌듯뿌듯. 가장 걱정됬던 부분은 css파일을 어떻게 분류할까 참 막막했는데 그래도 나름 잘 분류한것같아서 다행이다..!! main을 분류하고 나니, 각 페이지마다 적용해야하는 css들은 또 따로 관리하고 이로 인해 유지보수가 나아졌다. 나 조차도 이 코드가 어디서 수정해야 하는 지 한 눈에 보이니까 훨씬 편한다. 전에는 1개의 css파일에 다 몰아서 작성했었는데.. 왜 유튜브에는 css파일 분류하는 걸 안알려줄까? 아마도 초급자를 위한 강의니까 그럴꺼야. 그래도 뿌듯하다! 하지만 코딩은 언제나 한가지 문제를 해결하면, 두세가지 문제가 발생하는 것 같다..^^ 일단 지금 발견한 문제점은 main css파일에서 font나 background-image를 적용하면 사이트에 반영이 안된다. 도대체 왜!!! 그나마 다행인 건, background는 html에 내부 스타일 적용하니까 해결이 됐다. 하지만 폰트는 왜안되고있는지 정말 모르겠다.. ㅠㅠ 그래도 오늘 안되는 코드 내일 될 수도 있다는 희망을 가져보자.. 내일은 grid니 flex를 도전해서 가장 어려웠던 favorite 페이지를 작업할 예정이다. 얼마나 어려울까 또 벌써부터 두렵군 😱 그래도 겁먹지 말자.. 두렵다말고 새로운 걸 알게 될 생각에 설레하자 오늘처럼 파이팅!💪