될때까지

>westudy | Week 1 - HTML & CSS _ 20220520 - 자기소개 페이지3/3 본문

프로젝트/wecode

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

랖니 2022. 5. 20. 23:10
728x90

🧐  (어제) 문제사항들

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

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

3. css파일 분류하기

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

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

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

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

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

 

🧐  (오늘) 문제사항들

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

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

3. css파일 분류하기

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

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

-> @media screen and (min-width: 1380px) {}를 사용해서 총 2가지 크기에 반응하도록 코드 수정했다.

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

-> 이미지를 감싸고 있는 div태그 밑에 또 다른 div태그를 열어서 내용부분을 추가해줬다. 이미지와 내용의 정렬도 flex를 사용했다.

<div class="item">
    <div class="img_wrapper">
        <img class="img" src="img/animation.jpg" alt="" width="100%">
    </div>
    <div class="img_content">
        <p class="item_content">뒤늦게 애니메이션에 빠졌어요. <br>요새는 블리치를 한참 보고 있어요!</p>
    </div>   
</div>

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

-> 부모태그에 grid를 적용한다. grid를 쓰기 위해선 display : grid;로 작성해야 하고, template-columns, template-rows를 이용해 가로 세로 몇개의 템플릿을 보여줄 지 정할 수 있다. 1fr에서 fr은 fraction을 의미하며 1fr 1fr 1fr은 repeat(3, 1fr)로 쓸 수 있다. 그러면 화면의 3등분을 동일하게 나눠같는 3개의 템플릿이 생긴다.

/* 부모태그에 grid 적용 */
section > .main_content {
    display: grid;
    /* grid-template-columns: 25% 25% 25% 25%;   콜롬세로 몇개 템플릿? */
    grid-template-columns: 1fr;
    gap: 20px;
}

-> grid안에 들어가는 내용들을 가로가 아닌 세로로 배치하기 위해 flex를 사용했다. 역시 display: flex;로 선언해주고 기본값인 flex-direction:row를 column으로 변경해 세로로 정렬했다. justify-content는 오뎅꼬치를 생각하자. 오뎅들을 꼬치에 가로로 어떻게 꽂을 것인지 정렬할 수 있고, align-items은 세로로 정렬을 의미한다. 

/* 이미지의 타이틀, 내용을 전체 div 가운데 배치 */
section > .main_content > .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

 

😱  새로 접했던 문제

1. github page image 404 error

여기까지 구현하고자 생각했던 모든 기능들을 구현해서 대만족스러웠다. 기쁜 마음으로 깃허브에 올렸던 호스팅페이지를 확인하는데 이럴수가.. 역시 만만하지 않은 코딩의 세계. 문제를 해결하면 또 다른 문제가 발생해서 지루할 틈이 없다^^

깃허브에 업로드했는데 사라져버린 배경화면이미지 ..

728x90

업로드하는데 시간이 걸리나 10분을 기다려도 보고, 깃허브 홈페이지에서 아직 action이 안끝났나 action탭도 확인해봤지만 아무 응답없던 내 웹사이트. 도대체 무엇이 문제일까 분명히 vscode에서 live server로 체크할땐 잘만 떴는데.. ㅠㅠ 스터디때 팀원분이 알려주신 F12가 생각났다. F12를 누르고 자바스크립트 콘솔을 봐주셨던 코멘트덕분에 여기에 에러가 떴구나 확인할 수 있었다. 'Failed to load resource : the server responsed with a status of 404' 내가 뭘 잘못했다고 404에러가 뜨니..? 서버도 안건드렸는데..?!! 부글부글 이 에러만 해결하려고 1시간 넘게 끙끙거렸다. vscode에는 분명히 img폴더 내부에 background이미지가 있고. 어제까지만 해도 잘만 뜨던 배경이 왜 안뜰까 원인은 아무리 생각해도 모르겠다 지금도. 하지만 vscode에 있는데 파일을 못불러온다는 건 내가 경로를 잘못불러오고 있나 싶어서 경로관련 구글링을 했고 해결책을 찾았다. 도움을 준 블로그 보러가기            

내 vscode상 background.jpg의 경로는 img/background.jpg. 나는 css를 html에 적용하지않고, 전반적인 css를 담당하는 main_style.css에 작성했다. main_style.css의 배경이미지 불러오는 경로를 수정해야한다.

body {
    background-image: url(/img/background.jpg);    /*변경전*/
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    background-position: center center;  
}

body {
    background-image: url(../img/background.jpg);   /*변경후*/
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    background-position: center center;  
}

앞에 '..'을 붙여줬다. 이 '..'이 의미하는 바는 상위폴더로 이동해라는 뜻이다. 상위폴더에서 img폴더를 찾고 그 안의 background.jpg를 불러오라고 코드를 수정해주었다. 그랬더니 거짓말안하고 바로 뿅! 나타나는 얄미운 배경화면 😊 해결해서 그래도 기쁘다! 

 

2. font 적용

하지만 해결못한 한가지 문제가 더 남았으니.. 바로 폰트다. ㅠㅠ 구글폰트에서 이미지를 가져와서 html head부분에 넣고, 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>EUNHYUNG JEON</title>
    <script src="https://kit.fontawesome.com/3688054cb0.js" crossorigin="anonymous"></script>

    <!-- font start -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <!-- font finish -->
    
    <!-- favicon start -->
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="favicon" href="./img/favicon.ico">
    <link rel="icon" href="./img/favicon.ico" type="image/x-icon" sizes="16x16">
    <!-- favicon finish -->

    <style> 
        @import url(./css/main_style.css);
        @import url(./css/index_page_style.css);
    </style>
</head>

css에 넣어야하는 부분은 *하고 적용했는데 기본폰트만 나타난다.. 폰트는 쥐쥐 이틀연속 해결이 안되고있다..

* {
    font-family: 'Jua', sans-serif;
}

도대체 뭐가 문제야 ㅠㅠ!! 다음주 월요일까지 안되면 팀원들한테 물어봐야겠다 도와주세요!!

+ 업데이트))

이런 바보.. 자려고 누웠는데 왜 폰트가 적용이 안될까 생각이 꼬리에 꼬리를 물었다. 그러다 갑자기 번쩍 든 생각. html에 head부분에 구글폰트 코드를 집어넣는 건 확실하다. 그렇다면 css에서 적용하는 부분이 잘못된 것 아닐까? 나는 *를 사용해서 코드 전체에 폰트를 적용한다 생각했는데 이게 잘못된 것 아닐까? 구글링을 해봤더니 다른 사람들은 p태그나 body, h태그에 적용했다.

body {
    font-family: 'Jua', sans-serif;
}

혹시나 하고 *에 작성했던 폰트 태그를 body 안에 작성했더니

짜잔하고 적용된 폰트 예!!!!!

다시 두발뻗고 자야겠다! 자기소개 페이지 진짜 끝!! 

 

🤩 느낀점

오늘은 flex, grid관련 영상들을 보면서 favorite페이지를 구현하는 데 힘을 썼다. 맨 처음 웹사이트를 만들때는 의도대로 안되고 가운데 정렬을 해야하는데 어디를 어떻게 왜 건드려야하는 지 몰라서 스트레스 가득이였다. 하지만 오늘이 벌써 금요일? 5일째 웹사이트를 만들면서 수정도 하고 또 프론트엔드의 최고 장점. 수정한 코드들이 바로 확인이 되니까 이 태그의 용도, 어디를 수정하면 내가 원하는 결과로 도출이 되는 지 조금은 눈에 보이게되었다. 요새 블리치 애니메이션을 보고있는데, 블리치의 주인공들처럼 나도 성장했다는 걸 느낀다 속닥속닥... 이상 그래도 오늘 폰트빼고 머릿속에 그렸던 웹사이트를 모두 구현해내서 기쁘다! 내일은 데이트가 있으니 살짝 패스하고 일요일은 위코드의 1주차 다른 개념들에 대해 공부해야겠다. 고생했다 랖니야 오늘도 💪

728x90
저작자표시 비영리 변경금지

'프로젝트 > wecode' 카테고리의 다른 글

>westudy | Week 2 - JavaScript  (0) 2022.05.27
>westudy | Week 1 - HTML & CSS - HTML, CSS, JavaScript는 무엇이며 이들의 관계는?  (0) 2022.05.22
>westudy | Week 1 - HTML & CSS _ 20220519 - 자기소개 페이지2/3  (0) 2022.05.19
>westudy | Week 1 - HTML & CSS _ 20220518 - 자기소개 페이지1/3  (0) 2022.05.18
>westudy | Week 0 - 어떤 개발자가 되고 싶나요?  (0) 2022.05.12
'프로젝트/wecode' Related Articles more