-------
개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을 그대로 옮겼습니다.
https://blog.naver.com/0yeonjae2/222292135765
-------
<수업에서 배운 내용 복습>
HTML5 기본 태그
1-1 목록 태그
(1) 순서가 있는 목록
<ol> : ordered list
<li> : list
(2) 순서가 없는 목록
<ul> : unordered list
<li> : list
1-2 테이블 태그
<table> : 표 삽입
<caption> : 표의 제목
<thead> : 열의 제목으로 구성된 행의 집합
<tbody> : 표의 본문
<tfoot> : 열의 요약으로 구성된 행의 집합
<tr> : 표의 행 삽입
<th>:표의 제목 제목 셀 생성
<td>:표의 일반 셀 생성
표의 셀을 병합할 때는 rowspan이나 colspan을 작성하고 병합할 개수를 적어주면 된다.
<td rowspan="숫자">는 행을 숫자만큼 합친다는 뜻이고, <td colspan="숫자">는 열을 숫자만큼 합친다는 뜻이다.
1-3 입력 양식 태그
<input placeholder="Search" />
여기서 placeholder에 작성하는 글은 검색하기 전에 이미 검색창에 적혀있는 내용이다.
1-4 미디어 태그
이미지 태그 : <img src="이미지 주소" alt="이미지의 내용">
(이때, alt는 사진이 깨졌을 때 원래 사진이 무엇이었는지 알려주는 역할을 하므로 이미지가 뭔지 간단하게 적으면 된다.)
비디오 태그 : <video src="영상 주소" ></video>
:<iframe src="영상 주소" title="영상 제목"></iframe>
오디오 태그 : <audio src="오디오 주소" autoplay></audio>
Clone과 Fork
github을 사용하는데 clone과 fork가 있는 걸 알게 되었다. 무슨 기능을 하는지 몰랐었기 때문에 블로그에 정리해보기로 했다.
○ Clone이 뭘까?
https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository
간단히 요약하면 포크는 타인의 프로젝트를 내가 보고 수정할 수 있도록 하는 기능이다. 보통 다른 사람의 프로젝트에 대해서 변경을 제안하거나, 다른 사람의 프로젝트를 통해 내 아이디어를 얻어 갈 때 사용한다고 한다. 포킹해 온 프로젝트를 내가 변경해도 원래 프로젝트에 영향이 가지 않기 때문에 편하게 테스트해 볼 수 있다. 나도 교수님께서 작성하신 프로젝트를 포킹해 와서 하나하나 뜯어보면서 실습을 했다!
<실습 전 클론 코딩할 사이트 둘러보기>
예전에는 아무 생각 없이 사이트에 방문하곤 했었는데 수업을 들으면서 배우는 게 생기다 보니 어떤 사이트든 들어가면 가끔씩 개발자 도구를 열어보게 된다. 아는 것보단 모르는 게 많지만 아는 태그가 나오면 정말 반갑다. 오늘은 내가 코딩할 사이트인 지니를 개발자 도구를 사용해서 둘러보기로 했다.
오늘은 헤더를 중점적으로 살펴보기로 했다.
처음에는 헤더에 대한 부분이 어디 있는지 찾는 것도 어려웠는데 수업을 듣고 연습하다 보니 전보다 빨리 찾게 된다!
사실 아직도 모르는 부분이 많아서 제대로 뜯어봤다고 하긴 그렇지만 나름.. 열심히 탐사했다..! 이젠 실습을 해 볼 차례이다.
<실습하기>
실습하기 전엔 머릿속으로 어떻게 해야지!라는 가이드라인을 짰는데, 막상 코드를 작성하려니까 뭘 어떻게 해야 할지 감이 잡히지 않았다. 그래서 수업자료들을 참고해서 조금씩 만들어보기로 했다! 오늘은 사이트의 전체적인 틀을 따라 하는 걸로 만족하기로 했다.
교수님께서 보여주신 예시 파일에서 css에 적힌 내용들을 지우고 복구해보며 무엇을 어떻게 바꾸는지를 위주로 파악했다. VSCODE를 2개 열어서 과제를 작성하다가 오류가 발생하거나 바꾸고 싶은 게 생길 때마다 지금까지 학습했던 코딩 자료들과 교수님이 만드신 사이트를 뒤적거렸다.
21.03.28.에 지니 실시간 차트를 만들어봤다.
<div class="music_chart">
<table>
<caption style="text-align: left;">실시간 차트</caption>
<thead>
<tr>
<th class="ranking"> </th>
<th class=" fluctuation"></th>
<th class="title"> </th>
<th class="artist"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> ㅡ </td>
<td>라일락</td>
<td>아이유 (IU)</td>
<td><img src="./images/IMOGE.PNG"></td>
</tr>
</tbody>
</thead>
</div>위의 코드를 실행하면 위의 사진에서 아이유의 라일락 부분만 뜬다. 나머지 곡들은 <tbody>의 <tr>부분을 복사해서 적힌 내용들은 변경해 주면 된다. 참고로 위에서 언급했듯이 오늘은 사이트의 모양새를 따라 하는데 초점을 맞춰서 아무 기능도 없다. 노래 옆에 뜨는 재생, 추가 버튼 부분은 아직 어떻게 구현해야 할지 잘 몰라서 사이트에서 저 부분만 캡처해서 사진을 넣은 것이다. 계속 실습하면서 저 부분을 사진이 아니라 실제로 구현할 수 있도록 고민해야 한다.
이렇게 실시간 차트를 나름 구현하고 바로 헤더 작업에 들어갔다.
처음에 코드를 무작정 작성하고 난 후의 모습이다. 리스트 앞에 있는 점들을 지워야 하고, 아래가 아니라 옆으로 배열되게 해야 한다.
처음에 뭐가 어떤 역할을 하는지 찾는 건 어려운데 찾고 나면 간단한 거 같아서 뭔가 힘이 빠졌다.
일단 위에서 언급한 방식대로 정리한 결과이다. 보면 리스트를 옆으로 정렬하면서 글자끼리 붙어버렸는데 이 부분은 아직 어떻게 해야 할지 모르겠다. 이 부분도 계속 실습하면서 보완해야 한다.
지니 로고 옆에 보면 검색창이 있다!
<!-- 로고 옆 검색 창 만들기 -->
<li class="header__second">
<div class="header__second_title">
<div class="search">
<input id="search_box" placeholder="하이틴 재질 팝송 추천" />
</div>
</div>
</li>위의 코드대로 작성하면 검색창을 만들 수 있다. 항상 인터넷 사이트를 사용할 때마다 궁금한 것 중 하나가 바로 '검색창을 어떻게 만드는가?'였는데 생각보다 단순해서 신기했다.
헤더를 대강 만들었으니 다음은 최신 음악 창을 만들 차례이다.
<tr>
<td><img src="./images/가수이름.PNG" alt="앨범커버">가수이름</td>
<td><img src="./images/가수이름.PNG" alt="앨범커버">가수이름</td>
<td><img src="./images/가수이름.PNG" alt="앨범커버">가수이름</td>
<td><img src="./images/가수이름.PNG" alt="앨범커버">가수이름</td>
<td><img src="./images/가수이름" alt="앨범커버">가수이름</td>
<td><img src="./images/가수이름.PNG" alt="앨범커버">가수이름</td>
</tr>
<tr>그래서 그냥 지니 사이트 홈에서 사진과 가수 이름이 나오는 상태로 바로 캡처해서 사진만 넣었다... 어떻게 하면 글자를 사진 위에 뜨게 할 수 있을지 알아봐야겠다.
그래서 여기까지 한 상태는
첫 시도니까.. 계속 공부해서 수정하다 보면 닮아갈 거라 믿는다.
아직 로그인/회원가입과 최신 음악에서 1/5←→부분은 못 만들었다. 몇 시간 동안 앉아서 사이트의 한 쪽 부분만 따라 하다가 전체 화면을 보니 눈이 아프기도 하고 어깨가 너무 아프기도 해서 이 부분들은 나중에 도전하기로 했다.
이제는 아래 사진 부분들은 만들면 된다.
근데 사진 속에 시간이 지나면 바뀌는 부분들은 아직 몰라서 비워두었고, 지니 TV 부분도 코딩하다가 힘들어서 비워두었다. 저 부분들은 점차 추가해 나가도록 하겠다.
일단 초안을 완성했다. 에디터 추천 아래 칸에서 DJ가 적힌 원이 옆의 글과 높이가 맞지 않는다.. 무언가를 작성해서 라이브 서버로 확인하는 게 정말 떨린다. 코드 몇 줄이 눈이 보이는 무언가를 만들어낸다는 게 참 신기하다.
오늘 프로젝트 초안을 작성하면서 느낀 점은 코딩은 하면 할수록 부족함을 느끼게 된다는 것이다. 사실 아직 첫 화면도 다 만든 게 아닌데 HTML로만 337줄을 작성했다. 심지어 주석도 꼼꼼히 달아놓지 않았다.. 아직 아무 기능도 못하는 페이지를 만드는 데도 300줄 가까이 필요한데 유튜브나 네이버와 같은 다양한 기능을 제공하는 사이트는 코드를 작성할 때 얼마나 많은 양을 필요로 할지 감도 안 잡힌다. 열심히 공부해야겠다는 생각이 코딩을 할 때마다 든다.
아직 초보라 이 정도 길이도 뿌듯하다..
오늘 거의 5시간 넘게 노트북 앞에서 코딩하면서 느낀 점은 목과 한쪽 어깨가 너무 아프다... 코딩하다 보면 거북목은 당연하다는 걸 어디서 봤는데 조금씩 공감이 된다. 다음에는 중간중간 스트레칭도 하면서 코딩해야겠다.
'전공과목 정리 > 웹프로그래밍기초' 카테고리의 다른 글
| [웹프로그래밍기초🎀] 7~8주차 개발일지 (0) | 2022.01.31 |
|---|---|
| [웹프로그래밍기초🎀] 6주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 5주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 3주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 2주차 개발일지 (0) | 2022.01.31 |