개발공부 17일차 [코딩네컷 만들기]

개인공부

개발공부 17일차 [코딩네컷 만들기]

stella0905 2023. 2. 10. 23:54

우연히 인스타를 보다가 광고로 처음 보게되었는데 강의 시간이 1시간도 안걸리길래

듣고있던 JavaScript문법 뽀개기를 중단하고 만들기 시작했다.

자꾸 연락오잖아...

내일 하려고했는데 ㅎㅎ..

HTML 주요태그

<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<h1>h1은 제목이에요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6 h 뒷 숫자가 커질수록 글자 크기는 작아져요. </h3>
<a href="https://spartacodingclub.kr/"> 하이퍼링크 </a>
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/logo_teamsparta.png" width="300"/>  
<input type="text">     <!-- 무언가 입력할 수 있는 필드 -->
<button>버튼입니다.</button>

href, src : 속성

span : div 안에서 작은 영역을 표시해 주는 역할을 함.

HTML 뼈대 만들기.

<body>
  <div class="container" >
    <div class="photos">
      <div id="image1" class="photo-frame">
        <span id="desc1" class="photo_description">
          첫 번째 이미지 설명
        </span>
      </div>
      <div id="image2" class="photo-frame">
        <span id="desc2" class="photo_description">
          두 번째 이미지 설명
        </span>
      </div>
      <div id="image3" class="photo-frame">
        <span id="desc3" class="photo_description">
          세 번째 이미지 설명
        </span>
      </div>
      <div id="image4" class="photo-frame">
        <span id="desc4" class="photo_description">
          네 번째 이미지 설명
        </span>
      </div>
      </div>
    </div>
    <div class="footos">
      <p class="f-title">Happy Lunch Time</p>
      <p class="f-date">2023.02.10</p>
    </div>
  </div>
</body>

CSS

body 태그 클래스에

height: 100%; 를 쓸 경우 body태그의 높이 만큼을 차지하게 됨.

flex-direction: column

->세로로 정렬 / row로 할 경우 가로로 정렬

유튜브에서 영상을 가지고 올때는 바로 주소링크를 가져오는게 아닌 영상 하단에 공유를 눌러서 퍼가기에 링크만 복사해서 가져오면 된다.