개발일지📝_03

ᴶᴬᴱᵞᴼᴼᴺ·2021년 3월 31일

Web basics

웹 프로그래밍 기초

목록 보기

3/10

💡 이번 주에는 저번 주에 이어서 HTML기본태그에 대해 배웠으며 개발자도구로 페이지의 각 요소들을 살펴보는 방법에 대해서 알아보았다.

새로 배운 내용

🌸 HTML 기본태그

✔ 목록태그

순서가 있는 목록
<ol> ordered list
<li> list
🔗HTML

<body>
    <ol>
        <li>
                보통의 언어들(나를 숨 쉬게 하는)  / 저자 : 김이나/ 출판 : 위즈덤 하우스
        </li>
        <li>
                사서함 110호의 우편물 / 저자 : 이도우 / 출판 : 시공사
        </li>
        <li>
                디즈니만이 하는 것(THE RIDE OF A LIFETIME ) / 저자 : 로버트 앨런 아이거 / 출판 : 쌤앤파커스
        </li>
    </ol>
</body>

🔗CSS

body {
    font-size: 20px;
    font-weight: 100;
  }

li {
    list-style: none;
  }

2. 순서가 없는 목록
<ul> unordered list
<li> list
🔗HTML

<body>
    <ul>
        <li>
            그레이스 캄파눌라
        </li>
        <li>
            데이지
        </li>
        <li>
            물망초
        </li>
        <li>
            튤립
        </li>
    </ul>
</body>

🔗CSS

body {
    font-size: 20px;
    font-weight: 100;
  }

li {
    list-style: none;
  }

<tbody>는 여러 번 쓸 수 있음.
<thead> & <tfoot>은 1번만 쓸 수 있음.

💻bugs 사이트의 음원차트가 나오는 페이지에 테이블 태그가 많이 사용됨

💻google 검색창에 bugs를 쳤을때 나오는 벅스차트, 벅스 음악플레이어 등의 부분도 테이블태그가 쓰임

👉위의 사진에서 노란색으로 밑줄 친 부분인
colspan = "2" : 열 2개 차지를 의미
또한 rowspan = "2" : 행 2개 차지를 의미

✔ 입력 양식 태그

<input placeholder="Search" />

💻마켓컬리 회원가입 페이지에 테이블태그 & 입력 양식 태그 쓰임

👉위의 사진에서 노란색으로 밑줄 친 placeholder = "6자 이상의 영문과 숫자를 조합" 부분은 아이디 입력창에 조건을 달아놓은 것임

✔ 미디어 태그

이미지 태그
: 유튜브에 있는 동영상의 썸네일을 이미지태그에 넣어봄

   <img src="https://i.ytimg.com/an_webp/ErMz2iLLm4w/mqdefault_6s.webp?du=3000&sqp=CKyrkYMG&rs=AOn4CLCRQHT5KTM_q6gXrkI3830f21VlsA" alt="밤의 피아노곡" />

비디오 태그
: 유튜브 영상을 삽입해봄

 <video src="./videos/밤의 피아노곡.mp4"></video>
 <iframe width="589" height="331" src="https://www.youtube.com/embed/ErMz2iLLm4w" title="YouTube video player"></iframe>

오디오 태그

<audio src="./audio/Altero - One Day (ft. NVRT).mp3" autoplay controls></audio>

과제

👀 개발자도구를 이용하여 프로젝트 홈페이지의 헤더 뜯어보기

📌이케아 홈페이지 헤더

내 프로젝트 홈페이지인 이케아에서 개발자도구로 <head>의 <link> 에서 favicon 추출하여 저장하기

👉 <link>에서 favicon이 적혀있는 곳을 찾은 뒤 마우스 오른쪽을 클릭하여 'open in new tab(새 탭에 열기)' 선택

👉 새 페이지에 열린 favicon 이미지를 다른이름으로 저장하면 아래와 같은 이미지로 내 컴퓨터에 저장되어 나중에 클론코딩을 할때 쓸 수 있음
Hamburger menu 개발자도구로 살펴봄

🔽Hamburger menu를 클릭했을 때 나오는 부분 개발자도구로 살펴봄

👉 순서가 없는 목록 태그가 쓰였고 각 태그에 쓰여진 글자들이 그대로 Hamburger menu에 포함되어 있는 것을 볼 수 있음
헤더에 쓰인 아이콘들 개발자도구로 살펴봄

👉 순서가 없는 목록 태그가 쓰임
<meta> 살펴보기

👉 카카오톡, 페이스북 등에서 링크를 공유했을 때 링크주소와 함께 사진, 글귀가 나오도록 만든 것.
각 회사마다 이를 이용하기 위해 <meta>를 정의함.
카카오톡, 페이스북 등이 open graph를 사용함.
🔽실제 이케아 링크를 카카오톡에 공유했을 때
기종별로 이케아 홈페이지가 어떻게 나타나는지 개발자도구로 알아봄

🌸 Clone과 Fork에 대해서 가볍게 찾아보기

▪ clone : 특정 원격 Repositoy와 나의 로컬 PC를 연결해 데이터를 복사하여 가져오는 기능. clone한 원본 repository를 remote 저장소 origin으로 가지고 있다. 권한이 없는 경우 해당 저장소로 push 하지 못한다. 또한 기존의 original repository와 연결되지 못한다. 즉 저장소의 commit, 등의 로그를 보지 못함

▪ fork : 다른 사람의 Github repository에서 내가 어떤 부분을 수정하거나 추가 기능을 넣고 싶을 때 해당 respository를 내 Github repository로 그대로 복제하는 기능. fork한 저장소는 원본(원래 Repository 주인)과 연결되어 있다. 원래 레포지토리에 어떤 변화가 생기면(새로운 commit, push) 이는 그대로 fork된 repository로 반영할 수 있다. 이 때 fetch, pull의 과정이 필요하다.

참고할 만한 내용

느낀점

수업 때 교수님께서 얘기해주신 개발자도구로 홈페이지 뜯어보는 방법을 참고로 하여 이번 주 과제를 했는데 확실히 저번 주에 내가 한 방법과는 달랐다. 저번 주에 내가 홈페이지를 뜯어본 것은 핵심을 놓치고 아무거나 개발자도구에 있는 요소들을 클릭해본 것이었음을 알 수 있었다. 클론코딩을 위해 내가 필요한 부분이 무엇인지를 파악하고 이를 토대로 홈페이지를 살펴봤어야 했다. 다행히 이번 주에는 홈페이지에서 중요한 부분들을 클릭해보면서 수업 시간에 배운 목록태그가 어떻게 쓰이고 햄버거 메뉴는 어떻게 구현되어있는지, meta 태그는 무엇이고 어떤 기능을 하는지 등을 직접 보고 배울 수 있었다. 평소에 자주 보는 음원차트가 테이블 태그로 구현되었고 홈페이지 이름 옆에 뜨는 favicon의 존재와 링크를 공유할 때 링크주소 뿐만 아니라 사진과 함께 글귀가 나타나는 것은 meta 태그로 인한 것임을 알게되어서 신기했다:-)

ᴶᴬᴱᵞᴼᴼᴺ

이전 포스트

개발일지📝_02

다음 포스트

개발일지📝_03

웹 프로그래밍 기초

새로 배운 내용

✔ 목록태그

✔ 테이블 태그

✔ 입력 양식 태그

✔ 미디어 태그

과제

참고할 만한 내용

느낀점

개발일지📝_02

개발일지📝_04

0개의 댓글

관련 채용 정보