[웹프로그래밍기초🎀] 6주차 개발일지

-------

개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을 그대로 옮겼습니다.

https://blog.naver.com/0yeonjae2/222307647439

-------

이론 복습하기

 

1. 중앙 정렬하기 : 중앙 정렬하고 싶은 태그에 width 속성을 부여하고 margin : 0 auto; 설정하기

2. One True 정렬 레이아웃

①행을 구분해서 각각의 행에 이름 붙여주기

②열을 구분하기

③레이아웃 구성하기

-수평 레이아웃 구성하기

:하위 태그에 float 속성을 지정하고, 상위 태그에 overflow : hidden; 적용하기

이때 overflow : hidden 은 하위 태그의 내용이 상위 태그의 범위를 넘어간다면 넘어간 부분을 보이지 않도록 하는 기능이다.

---

실습하기

 

이제 중간고사까지 얼마 남지 않아서 서둘러서 작업했다. 개인적으로 해야 할 일들이 많았던 주여서 굉장히 힘들었다.

 

일단 이번 주에 한 것은 body 마지막에 있는 지니 TV 작업하기와 footer 만들기다.

 

1. 지니 tv 제작하기

캡처하고 보니 제목들이 정렬이 안 되어있다는 것을 알았다. 이 부분은 4월 16일에 작업할 예정이다.

처음에 작업했을 때의 사진이다. 이 작업에서는 2가지 문제점이 있었다.

 

 

① 사진의 크기

지니 사이트 개발자 도구에서 사진들을 다운로드해 넣었던 것이라 사이즈가 딱 맞을 거라 생각했는데 너무 컸다. CSS에서 overflow를 이용하면 크기가 큰 것을 잘라서 보이게 하거나 scroll을 이용해서 보이도록 하는 기능이 있다. 하지만 내가 원하는 것은 비율을 맞춘 상태에서 작아 보이게 하는 것이라 그림판을 이용해서 그림들의 크기를 일일이 조절하고 다시 넣어주었다.

 

지니 TV를 만들고 나니 에디터 추천 파트를 새로 만드는 게 나을 것 같다는 생각이 들었다.

지니 tv와 에디터 추천 파트는 처음에 테이블 태그를 이용해서 만들었는데 세부적으로 CSS를 적용하는 부분에서 테이블 태그가 아닌 ul 태그를 적용하는 게 더 편했다.

 

②가수 및 노래의 이름이 길면 ...으로 표시하기

가수 이름이 길면 ...로 잘려서 표현되는 것을 사용해야 했다. text-overflow 기능을 사용해야 한다는 것까진 알았는데 그 뒤로 어떻게 해야 할지 몰라서 검색을 해 봤다.

    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

 

검색을 통해서 글자를 내가 원하는 방식대로 표현하기 위해서는 위의 코드를 다 넣어줘야 한다는 것을 알았다. 이때 반드시 display: block; 을 꼭 넣어줘야 한다. 실수로 저 부분을 빼고 코드를 적었다가 안 돼서 시간을 꽤 많이 소비했다. ...의 표시는 실시간 차트에서도 쓰여서 그대로 적용해 줬다.

 

 

2. footer 만들기

다 만든 뒤의 모습이다. 공지사항 쪽 글씨들이 위쪽으로 붙어 있는데 이 부분도 다음에 작업할 때 고쳐야 한다. 개인적으로 가장 쉽고 빨리 끝나서 좋았다. 지니 사이트 개발자 도구에서 이 부분을 봤을 때 회사 정보를 표현하는 부분에 <dl>, <dt>, <dd> 태그를 썼다.

 

찾아보니 계층적 목록을 볼 때 사용하는 태그이고 주로 사전에 응용된다고 한다.

각각의 태그들은

<dd> 정의된 내용 설명

<dt> 단어에 대한 정의를 할 때 사용

<dl> 목록을 계층적 구조로 보고자 할 때 사용

의 기능을 한다고 한다.

아직 지식이 부족해서인지 여기서 dt 태그와 dd 태그가 왜 쓰였는지 모르겠다는 생각이 들었다.

그래서 나는 dl 태그만 사용하고 그 하위의 내용들은 span 태그를 이용해서 만들었다.

 

 

---

codepen에 레이아웃 정리하기

 

이번 주는 codepen에 One True 레이아웃을 정리하기로 했다. 위에서 언급한 것처럼 행과 열을 구분해서 이름을 붙이고 float 태그를 이용해서 하위 태그들의 위치를 지정해 주면 된다.

---

느낀 점

 

이번 주도 열심히 작업했다! 한 번 시작하면 기본이 4시간씩 걸린다. 오늘도 5시간 넘게 작업했다.

시간에 비해 나오는 결과물은 작지만 그래도 조금씩 채워지니 기분이 좋다.

 

조급해지지 않으려고 노력하는 데 그게 마음 같지가 않다. 마음이 급하다 보니 오타도 많이 나고 문법적 실수도 많다. 주로 class와 music을 classs와 musci로 오타가 나는데 찾기가 생각보다 힘들다. 적용이 안 되는 줄 알고 CSS를 계속 수정했는데 알고 보니 html에서 오타가 나서 적용되지 않았던 경우가 진짜 많았다.

 

천천히 작업하는 시간이 오타 찾는 시간보다 더 짧다는 것을 알았기에 다음 시간에는 좀 더 차분한 마음으로 작업해야겠다.

 

<다음 작업에서 해야 할 것>

①실제 사이트에 맞춰서 음원차트나 각종 정보들을 업데이트하기

②에디터의 추천 파트를 <ul>태그를 이용해 다시 만들기

③ 슬라이드가 들어갈 부분을 채우기

④음원차트 옆의 광고 부분 재정렬

⑤ material icon 크기들 조정하기

(material icon의 크기를 조정하려 했는데 계속 조정이 안됐다. icon은 폰트로 취급한다는 것을 까먹고 있어서 width나 height를 계속 조정했었다. font-size를 이용해서 정리되지 않은 부분들을 정리해 줘야 한다.)