6월 29일 Velog

류영서·2021년 6월 29일
대구AI스쿨
0

학습한 내용

Inline/Block

	<span>Inline</span>
	<span>Inline</span>
	<span>Inline</span>

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

  • Inline : 한 줄로 출력되는 경우, 공간 만들 수 없다, 상하 배치 작업을 할 수 없다
  • Block : 줄 바꿈이 일어나 y축으로 정렬되는 경우, 공간 만들 수 있다, 상하 배치 작업을 할 수 있다

KakaoTalk 친구 리스트

(1) 친구 리스트

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

				<div>
					<h3>박지연</h3>
					<p>다정한 사람</p>
			    </div>

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

				<div>
					<h3>박지연</h3>
					<p>다정한 사람</p>
			    </div>

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

				<div>
					<h3>박지연</h3>
					<p>다정한 사람</p>
			    </div>

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

				<div>
					<h3>박지연</h3>
					<p>다정한 사람</p>
			    </div>

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

  • ul(+li) : 친구 리스트에 우선순위 없음
  • a : 친구 선택하면 채팅방 넘어가기
  • div : 하나의 친구 목록 내에서 사진/텍스트 분리
  • <img src="https://via.placeholder.com/150"> : 이미지 삽입 전 미리 자리 세팅 해놓기 -> 실무 Tip!!

(2) 하단 탭

<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>

(1) 경제M 탭

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

				<div>
					<span>경제M</span>
					<h3>부회장님의 취미생활</h3>
					<p>Hello World Hello World Hello World Hello World
					 Hello World Hello World Hello World Hello World
					  Hello World Hello World Hello World</p>

					  <span>머니그라운드</span>
					  <span>-</span>
					  <span>4일 전</span>
				</div>
			</a>
		</li>
	</ul>

  • div : 사진/텍스트 정보 영역 구분
  • span : 줄바꿈 없이 연결되는 텍스트 입력
  • p : 문단 텍스트 입력

(2) 레시피 탭

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

				<div>
					<span>[푸드클래스] 송현경 요리 연구가</span>
					<h3>바삭하고 고소한 브런치</h3>
					<p>잘 구운 페이스트리 속에 부드럽고 진한 소스와
					치즈가 듬뿍!</p>

					<div>
						<span>#오픈요리</span>
						<span>#베사멜소스</span>						
					</div>
				</div>
			</a>
		</li>
	</ul>

  • div : 이미지/텍스트 구분 -> 본문/태그 내용 구분

Daum

(1) 구역 1

<div> <!--구역1 상단-->
		<div> <!--왼쪽 이미지-->
			<img src="https://via.placeholder.com/300">
		</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>


	<div> <!--구역1 하단-->
		<ul>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/50">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/50">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/50">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/50">
					<p></p>
				</a>
			</li>
		</ul>
	</div>

  • 상단/하단 구분 -> div
  • 상단에서 왼쪽 이미지/오른쪽 리스트 구분 -> (div>)div
  • 상단 오른쪽 리스트의 공백을 기준으로 구분 -> (div>div>)div 위 아래 각각
  • 기사들은 우선순위가 없으므로 ul(li) 태그 사용

(2) 구역 2

<div> <!--구역2를 구역1로부터 구분-->
		<div> <!--구역2 왼쪽-->
			<ul>
				<li>
					<a href="#">
						<img src="https://via.placeholder.com/100">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://via.placeholder.com/100">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://via.placeholder.com/100">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://via.placeholder.com/100">
						<p></p>
					</a>
				</li>
			</ul>
		</div>


		<div> <!--구역2 오른쪽-->

			<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>

  • 구역 1으로부터 구역2를 분리 -> div
  • 왼쪽 이미지 구역/오른쪽 리스트 구역 구분 -> (div>)div
  • 오른쪽 리스트 구역 공백 기준 구분 -> (div>div>)div

※ 구역을 나눌 때는 큰 범위에서 점점 좁혀나간다.

News

	<div>
		<h3>인천 서구 아파트시장에 무슨 일이</h3>
		<div> <!--헤드라인과 구분-->
			<div> <!--왼쪽-->
				<span>헤럴드 경제</span>
				<span>입력 2021.05.03</span>
				<span>수정 2021.05.03</span>
			</div> 

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

  • 상단 구역 설정 : div
  • 뉴스 헤드라인 : h3
  • 상단 구역 중 헤드라인/헤드라인 아래쪽 구분 : div
  • 헤드라인 아래쪽에서 왼쪽/ 오른쪽 구분 : div

Agency

https://startbootstrap.com/previews/agency

	<header>
		<div> <!--상단 배너-->
			<h1>
				<a href="#">
					<img src="https://via.placeholder.com/100">
		    	</a>
			</h1>

			<nav>
				<ul>
					<li><a href="#">Service</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's Nice To Meet You</h3>
			<a href="#">Tell Me More</a>
		</div>
		
	</header>

  • 상단 영역 : header

Helbak

https://www.helbak.com/

	<footer>
		<div>
			<ul>
				<li>
					<a href="#">Terms and conditions</a>	
				</li>
				<li>
					<a href="#">Cookies</a>	
				</li>
			</ul>
		</div>

		<div>
			<a href="#">
				<img src="https://via.placeholder.com/100">
			</a>
		</div>

		<div>
			<p>Accepted payment methods</p>
			<ul>
				<li><img src="https://via.placeholder.com/50"></li>
				<li><img src="https://via.placeholder.com/50"></li>
				<li><img src="https://via.placeholder.com/50"></li>
				<li><img src="https://via.placeholder.com/50"></li>
				<li><img src="https://via.placeholder.com/50"></li>
			</ul>
		</div>
	</footer>

  • 하단 영역 : footer

Kids gao

http://sisikiller.dothome.co.kr/

(1) 상단

<header>
		
		<div> <!--제목과 동물-->
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
		</div>


		<div> <!--구름과 잠자리-->
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
		</div>

	</header>

(2) 중간

	<div> <!--페이지의 중간 구역-->
		<div> <!--컨텐츠 영역-->
			<div><!--왼쪽-->
				<img src="https://via.placeholder.com/50">

				<div> <!--텍스트-->
					<img src="https://via.placeholder.com/50">
					<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
				</div>
			</div>

			<div> <!--중간-->    
				<img src="https://via.placeholder.com/50">
				<img src="https://via.placeholder.com/50">
			</div>
			
			<div> <!--오른쪽-->
				<img src="https://via.placeholder.com/50">

				<div> <!--텍스트-->
					<img src="https://via.placeholder.com/50">
					<p>빵의 표면을 촉촉하게 하는 풍부한 올리브유를 넣었습니다.</p>
				</div>
			</div> <!--오른쪽-->			
		</div> <!--컨텐츠 영역-->

	</div>

-> 위에서 아래 순서대로 왼쪽/중간/오른쪽

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

어제와 달리 직접 기존의 사이트를 보고 강사님의 도움 없이 배우는 것을 적용하는 것이 까다로웠다. 또 CSS를 아직 배우지 못해 결과물이 만족스럽지 못했다.

해결 방법 작성

어렵다고 느꼈지만 강사님께서 자세하게 설명해주셔서 조금이나마 감을 잡을 수 있었다. div 태그는 정말 많이 사용하는 것 같다!

학습 소감

얼른 CSS를 배워서 오늘 봤던 사이트들과 조금이라도 가깝게 제작해보고 싶다.

profile
류영서
이전 포스트

6월 28일 Velog

다음 포스트

6월 30일 Velog

0개의 댓글

관련 채용 정보