Dev Log #2 - 6월 29일

Juhui_0304·2021년 6월 29일
TILhtml개발일지대구AI스쿨웹프로그래밍
0

Dev Log

목록 보기
2/49

오늘 학습한 내용

1. Inline요소와 Block요소

  • Inline: 글자가 한 줄로 병렬 되는 것
  • Block: 글자가 줄 바꿈 되어 나타나는 것
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>

⭕️ 결과물

  • Inline: 공간에 대한 크기를 설정할 수 없다.
  • Block: 공간에 대한 크기를 설정할 수 있다.

🚨 공간에 대한 크기 설정은 아래 css값을 설정해서 주었다.

<style>
			

span {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

h1 {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

⭕️ 결과물

  • margin은 오브젝트로 옮기고자 할때 사용하는 속성, 좌표 설정을 할때 사용하는 속성이다.
  • Inline: 상하 배치 작업을 할 수 없다.
  • Block: 상하 배치 작업을 할 수 있다. margin-top, margin-bottom, padding-top, padding-bottom을 사용 할 수 있다.
span {
	width: 300px;
	height: 300px;
	background-color: yellow;

	margin-top: 100px;
	margin-bottom: 100px;

	padding-top: 100px;
	padding-bottom: 100px;
}

h1 {
	width: 300px;
	height: 300px;
	background-color: yellow;

	margin-top: 100px;
	margin-bottom: 100px;

	padding-top: 100px;
	padding-bottom: 100px;

}

⭕️ 결과물

2. 실습01_카카오 친구 리스트 화면 설계 도면

  • 디자이너가 아직 디자인 작업 중에 있다면 https://placeholder.com/ 사이트를 이용해서 이미지를 미리 삽입해놓고 후에 수정한다.(실무 꿀팁!)

  • div: 서랍장 역할, 클라이언트의 수정 요청 시 조금 더 효율적으로 수정 가능하다.

  • 각각 동급의 내용은 ul, li 태그로 처리한다.

<!DOCTYPE html>
<html>

<head>
 <meta charset="urf-8">
</head>

<body>
 <ul>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100x50">
          <div>
	     <h3>박지연</h3>
	     <p>다정한 사람</p>
          </div>
      </a>	
    </li>
    
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100x50">
          <div>
	     <h3>박지연</h3>
	     <p>다정한 사람</p>
          </div>
      </a>	
    </li>
    
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100x50">
          <div>
	     <h3>박지연</h3>
	     <p>다정한 사람</p>
          </div>
      </a>	
    </li>
    
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100x50">
          <div>
	     <h3>박지연</h3>
	     <p>다정한 사람</p>
          </div>
      </a>	
    </li>
  </ul>

		
<footer>
  <nav>
   <ul>
	<li>
	    <a href="#">메뉴1</a>
	</li>
	<li>
	    <a href="#">메뉴2</a>
	</li>
	<li>
	    <a href="#">메뉴3</a>
	</li>
	<li>
	    <a href="#">메뉴4</a>
	</li>
  </ul>
 </nav>
</footer>
</body>

</html>

⭕️ 결과물

3. 실습02_네이버 경제M 화면 설계 도면

  • 저번 수업에 배웠던 학습 내용을 기준으로 작성한 것
  • 틀은 카카오 친구 리스트 실습 틀이랑 거의 비슷 함.
<!DOCTYPE html>
<html>

<head>

  <meta charset="urf-8">

</head>
<body>

 <ul>
   <li>
     <a href="#">
	   <img src="https://via.placeholder.com/150x80">

	   <div>
	      <span>경제M</span>
	      <h3>참 열심히 살았는데 4.5억뿐인 무주택자의 호소</h3>
	      <p>이분에게 해줄 조언은 단 한 가지다. 열심히 살았다는 그 에너지를 총동원하여 지금이라도 열심히 임장을 다녀라. 더는 늦기 전에. 그리고 어서 내 집을 마련하도록 하라. 열심히 살았지만 내 집 한 채 없다는 것</p>

	      <span>레이달리오</span>
	      <span>-</span>
	      <span>1개월 전</span>
	   </div>
     </a>
   </li>

   <li>
     <a href="#">
	  <img src="https://via.placeholder.com/150x80">

	  <div>
	     <span>경제M</span>
	     <h3>금리 20% 적금 보유한 송은이, 티끌모아 태산 가능했던 과거 금리는?</h3>
	     <p>'티끌모아 태산'이라는 말은 이제 먹히지 않는 말인 것 같습니다. 아주 적은 금리로 인해 아무리 모아도 늘어날 생각을 하지 않아 답답하기만 하죠. 때문에 많은 분들이 주식이나 코인 등의 다른 재테크로 눈길을</p>

	     <span>꿀팁연구소</span>
	     <span>-</span>
	     <span>6일 전</span>
	  </div>
     </a>
   </li>

   <li>
      <a href="#">
	  <img src="https://via.placeholder.com/150x80">

	  <div>
	     <span>경제M</span>
	     <h3>아파트 구입이 어려워지자 전문가들이 사라고 권한 뜻밖의 재테크</h3>
	     <p>박스권 탈출 가능성 주목 건설주 파헤치기최근 조정 국면에 들어갔지만 건설사 주식은 작년 4분기부터 좋은 흐름을 보이는 중이다. 이 같은 상승세에 힘입어 10년 째 횡보했던 건설사 주식도 박스권을 탈피</p>

	     <span>비비드콘텐츠</span>
	     <span>-</span>
	     <span>3주일 전</span>
	  </div>
      </a>
   </li>

   <li>
      <a href="#">
         <img src="https://via.placeholder.com/150x80">

         <div>
            <span>경제M</span>
            <h3>'국내 최초' 찬사받았지만 한순간 사라진 기업</h3>
            <p>[MONEYGROUND 디지털뉴스팀] 시대가 빠르게 변하면서 기술도 급속도로 성장하고 있다. 이에 추억의 뒤안길로 간 전국을 강타했던 인기 기업들도 다수 보이는데, 청소년들 사이에서 큰 열풍을 끌고 왔던</p>

            <span>머니그라운드</span>
            <span>-</span>
            <span>2개월 전</span         
         </div>
      </a>
   </li>   
</ul>

	
</body>

</html>

⭕️ 결과물

4. 실습03_네이버 레시피 화면 설계 도면

  • 네이버 경제M 틀과 유사함.
ul>
  <li>
    <a href="#">

       <img src="https://via.placeholder.com/150x80">


       <div>
	
         <span>[푸드클래스]송현경 요리연구가</span>
	
         <h3>쌀로 만든 달콤한 디저트, 라이스푸딩</h3>
	
         <p>시나몬 파우더와 메이플 시럽으로 달콤함을 채운 이색 디저트 만드는 법</p>

	
        <div>
		
            <span>#프랑스가정식</span>
		
            <span>#디저트</span>
	
        </div>
					

       </div>
  </a>
  </li>
	</ul>

⭕️ 결과물

5. 실습04_다음 설계 도면

  • 구역 설정을 할 때에는 바깥 쪽에서 안쪽으로 한다는 느낌을 가질 것
  • 큰틀을 먼저 설정하고 작은 틀 설정 할 것
  • 먼저 상단, 하단 큰 틀을 나누고 상단에서 이미지 영역 네개를 왼쪽으로 묶고 텍스트 영역을 오른쪽으로 묶었다. 또 텍스트 영역 부분을 상단, 하단으로 나누어 처리했다다. 

<!-- 상단 영역->
<div>
		

<!-- 왼쪽 -->

<div>
	
    <ul>
		
        <li>
			
            <a href="">
				
                <img src="">
				
                <p></p>
			
            </a>
		
        </li>

		
        <li>
			
            <a href="">
				
                <img src="">
				
                <p></p>
			
            </a>
		
        </li>

		
        <li>
			
            <a href="">
				
                <img src="">
				
                <p></p>
			
            </a>
		
        </li>

		
        <li>
			
            <a href="">
				
                <img src="">
				
                <p></p>
			
            </a>
		
        </li>

	
    </ul>

</div>


<!-- 오른쪽 -->

<div>
	
    <!-- 상단 -->
	
    <div>
		
        <ul>
			
            <li><a href="#"></a></li>
			
            <li><a href="#"></a></li>
			
            <li><a href="#"></a></li>
			
            <li><a href="#"></a></li>
			
            <li><a href="#"></a></li>
		
        </ul>
	
    </div>

	
    <!-- 하단 -->
	
    <div>
		
        <ul>
			
            <li><a href="#"></a></li>
			
            <li><a href="#"></a></li>
			
            <li><a href="#"></a></li>
			
            <li><a href="#"></a></li>
			
            <li><a href="#"></a></li>
		
        </ul>
	
    </div>

</div>

<!-- 하단 이미지 영역 -->
<div>
  <ul>
	  <li>
		  <a href="">
			  <img src="">
			  <p></p>
		  </a>
	  </li>

	  <li>
		  <a href="">
			  <img src="">
			  <p></p>
		  </a>
	  </li>

	  <li>
		  <a href="">
			  <img src="">
			  <p></p>
		  </a>
	  </li>

	  <li>
		  <a href="">
			  <img src="">
			  <p></p>
		  </a>
	  </li>
  </ul>  
</div>

</div>

6. 실습05_다음 뉴스 설계 도면

  • 병렬하는 내용이 성격이 다르면 ul, li태그를 사용하지 않고 span 태그를 사용한다. 
<!DOCTYPE html>
<html>

<head>

	<meta charset="urf-8">

</head>
<body>

	<div>
		<h3>하반기 수도권 집값, 역대급 상승 오나</h3>
		<p>종 선행지표 줄줄이 급등</br>
		'매수우위지수' 다시 100 위로</br>
		'KB부동산전망지수' 120 넘어</br>
		경매 낙찰가율 119% 사상최고</p>
		<div>
			
			<!-- 왼쪽 -->
			<div>
				<span>헤럴드경제</span>
				<span>입력 2021.06.29 11:30</span>
				<span>수정 2021.06.29. 11:30</span>
			</div>

			<!-- 오른쪽 -->
			<div>
				<a href=""><span>가</span></a>
				<a href=""><span>나</span></a>
				<a href=""><span>다</span></a>
			</div>
		</div>
	</div>

	
</body>

</html>

⭕️ 결과물

7. 실습06_agency bootstrap

<!DOCTYPE html>
<html>

<head>
  <meta charset="urf-8">
</head>
<body>
 
 <header>
	  <div>
		  <h1>
			  <a href="#"><img src=""></a>
		  </h1>

		  <nav>
			  <ul>
				  <li><a href="#">Services</a></li>
				  <li><a href="#">Portfolio</a></li>
				  <li><a href="#">About</a></li>
				  <li><a href="#">Team</a></li>
				  <li><a href="#">Contact</a></li>

			  </ul>
		  </nav>
	  </div>

	  <div>
		  <h2>Welcome to Our Studio</h2>
		  <h3>It' Nice to Meet you</h3>
		  <a href="#">Tell me more</a>

	  </div>


	</header>

</body>

</html>
  • 개발자 도구를 통해서 화면이 어떻게 짜여있는 지 눈에 확인할 것
  • 정보를 사용할 때 이용하는 태그, 공간을 사용할 때 이용하는 태그를 이용해서 일부 페이지를 실습해보았다.

8. 실습07_Helbak

  • 덴마크 쇼핑몰
  • footer 영역을 만들어 봄
  • 디자인이 되어있는대로 왼쪽에서부터 작업 진행

<!DOCTYPE html>
<html>

<head>

	<meta charset="urf-8">

</head>
<body>

	
	<footer>

		<!-- 왼쪽 -->
		<div>
			<ul>
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴1</a></li>
			</ul>
		</div>

		<!-- 중앙 -->
		<div>
			<a href="#"><img src=""></a>
		</div>

		<!-- 오른쪽 -->
		<div>
			<p>Accepted payment methods</p>
			<ul>
				<li><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
			</ul>
		</div>

	</footer>

	

	
</body>

</html>

9. 실습08_Kids Gao

  • 상단영역의 설계도면 작업 진행

    📌 Kids Gao

  • 제일 상단에서 잠자리 부분 나오는 곳 까지 

<!DOCTYPE html>
<html>

<head>

	<meta charset="urf-8">

</head>
<body>

	<header>
		<div>
			<img src="">
			<img src="">
			<img src="">
			<img src="">
			<img src="">
		</div>


		<div>
			<img src="">
			<img src="">
			<img src="">
		</div>
	</header>
</body>

</html>
  • 씨앗이 내려와서 자초,여성초,감초 텍스트 있는 부분까지
<div>
		
  <div>
			
	  <!-- 왼쪽 -->
	  <div>
		  <img src = "">
		  <p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
	  </div>

	  <!-- 중앙 -->
	  <div>
		  <img src = "">
		  <img src = "">
	  </div> 

	  <!-- 오른쪽 -->
	  <div>
		  <img src = "">
		  <p>빵의 표면을 촉촉하게 해주는 글리세린과 오메가-9지방산이 풍부한 올리브유를 넣어서 보습 효과도 뛰어나답니다.</p>
	  </div>


  </div>
  
</div>

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘은 웹 사이트 공간에 대한 설계 도면을 직접 실습해보는 시간을 가졌다.🙌 오늘 학습을 통해 레이아웃을 구성하기에 앞서 어떻게 짤 것인지 고민하는 것이 중요하다는 것을 느꼈다. 건축물도 초기 설계가 잘못되면 문제가 되듯이 웹을 제작 할때에도 마찬가지 임을 알게 되었다. 이제 개발자 도구를 통해 자주 방문하는 웹 사이트의 레이아웃, 공간 배치가 어떻게 되어있는 지 확인하는 습관을 가지도록 해야겠다! 오늘은 강사님의 코드를 보고 하나 하나 작업하는 환경이어서 어려웠던 점은 크게 없었다ㅎㅎ 내일도 열심히 수업을 듣고 기록하는 것을 목표로 해야겠다!😊 그리고 무엇보다 중요한 복습도 함께 할 것⭐️

profile
Juhui_0304
하루하루 성장하는 것을 목표로 합니다🌟
이전 포스트

Dev Log #1 - 6월 28일

다음 포스트

Dev Log #3 - 6월 30일

0개의 댓글