vscode를 이용한 웹구축(html)
semantic 태그, flex-flow 연습
LRWoo
2023. 7. 18. 16:45
728x90
반응형
문서 구조의 의미를 전달하기 위해 사용하는 태그
웹문서가 해당 검색어를 포함하고 얼마나 중요도를 가지고 있고
외부에서 구조를 손쉽게 파악하기 위해 사용하는 태그
nav는 사이트의 주요내용을 포함하고 있다. 다른 웹사이트에서 검색시 노출될 수 있다.
시각적으로 구분되는 영역은 section태그를 쓰면 좋다.
<semantic태그를 활용해서 레이아웃 짜보기>
<body>
<header class="frame">
<h1>사이트 제목</h1>
</header>
<div id="content" class="flex frame">
<!--왼쪽-->
<aside class="left">
<h2>사이드바</h2>
<nav>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
</aside>
<main>
<h2>본문</h2>
<article>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, consequuntur numquam recusandae ea quaerat modi totam porro sint magni debitis pariatur asperiores dolor autem provident necessitatibus aliquid error. Similique, repellendus?</p>
</article>
<article>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores placeat veniam ex. Magni excepturi hic debitis tempore totam dignissimos optio laborum! Quod minima veniam molestiae eum mollitia praesentium quasi doloremque.</p>
</article>
<article>
<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio consequuntur consequatur rem dignissimos reprehenderit aspernatur dolorum facere, asperiores quae adipisci, laudantium praesentium odit, ipsam doloribus possimus esse repellat obcaecati laborum.</p>
</article>
</main>
<!--오른쪽-->
<aside class="right">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</aside>
</div>
<footer class="frame">
<h2>푸터</h2>
<p>저작권 정보</p>
<p>연락처 등</p>
</footer>
</body>
<style>
<style>
.frame{
/* 큰 틀 */
width: 1000px;
margin: auto;
}
.flex {
display: flex;
}
aside {
flex: 1;
}
main {
flex: 3;
}
aside, main {
margin-right: 20px;
}
aside:last-child{
margin-right: 0;
/* 컨텐츠에 따라서 높이맞춤 */
height: fit-content;
}
header, aside, main, footer{
box-sizing: border-box;
border: 2px solid #dadada;
margin-bottom: 20px !important;
padding: 10px;
}
</style>
HTMl의 웹 화면을 구성할 때에는 머릿속에 대략적인 틀을 짜놓고 컨텐츠를 채워야한다.
그래서 body부분에 내용을 채우지않고 시맨틱 태그로 틀을 짜놓고 맨 나중에 데이터를 채워넣자.
youtube 메인페이지로 flex-flow 연습하기
CSS
<style>
div{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#root{
margin: 20px auto;
background-color: black;
}
.flex{
display: flex;
flex-flow: wrap;
width: 1520px;
height: 100%;
margin: auto;
}
.item {
width: 360px;
height: 180px;
margin-top: 20px;
margin-bottom: 120px;
margin-right: 20px;
}
.item > img{
width: 360px;
height: 180px;
border-radius: 15px;
}
.contact{
display: flex;
margin-top: 5px;
color: white;
}
.contact > .con_1{
margin-left: 5px;
width: 360px;
font-size: 13px;
}
.contact > .con_1 > div:first-child{
font-weight: bold;
margin-bottom: 7px;
}
.con_1 > .sb {
color: gray;
font-weight: bold;
}
</style>
<body>
<body>
<h1>youtube.html</h1>
<hr>
<div id="root">
<div class="flex">
<div class="item">
<img src="https://i.ytimg.com/vi/aCVZVVk7YvE/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLC6xN6x8kpQbisKfG7nstNSF68z9w" alt="">
<div class="contact">
<img style="border-radius: 50px;" src="https://yt3.ggpht.com/w7ColCSgsKVMJuh6izq4oRlYn-ZkJ8roQuHQy1Nvc75ONCH7uzLmoUE5YMJtZqFCHb4ZFPxAOg=s68-c-k-c0x00ffffff-no-rj"
width="10%" height="10%" >
<div class="con_1">
<div>"살려주세요" 청년들 비명…작은 체구에서 나온... 초인적인 힘</div>
<div class="sb">sbs 뉴스✅</div>
<div class="sb">조회수 43만회 • 1개월 전</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/ecHo2QMBGQo/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCHBYiVkx-b9xprqhARbc7ZlUZ4TA" alt="">
<div class="contact">
<img style="border-radius: 50px;" src="https://yt3.ggpht.com/ytc/AOPolaTqcrRbadKizPoh4Ps5qom1eHF9qGsZ-OlZAvYA=s68-c-k-c0x00ffffff-no-rj"
width="10%" height="10%" >
<div class="con_1">
<div>[#라디오스타]나선욱이 누구야? 아는 형님의 ↘️ 아는 누님의↘️ 아는 이모의 아들이요~~</div>
<div class="sb">엠뚜루마뚜루:MBC 공식 종합 채널</div>
<div class="sb">조회수 266만회 • 4일 전</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/Cg0vzCj8i2k/hqdefault.jpg?sqp=-oaymwE2COADEI4CSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIE0oRzAP&rs=AOn4CLA0XPSfZLWVErHTXFFEiSCUFsA-Zw" alt="">
<div class="contact">
<img style="border-radius: 50px;" src="https://yt3.ggpht.com/XXj1RGqyQ0Q5H7G593wEDrU4GSZsqXBuMv6pRxrohJCguu2zq-a0nXk5MYEIoYaDoKAB5De8=s68-c-k-c0x00ffffff-no-rj"
width="10%" height="10%" >
<div class="con_1">
<div>현재 1000만뷰 돌파한 아리아나 그란데 Stronger-Kelly Clarkson 풀버젼</div>
<div class="sb">크루즈킴</div>
<div class="sb">조회수 1266만회 • 1년 전</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/lyeLYUCalNw/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBSCwuJI-rlhH-BnVEDhh1qS8mVhg" alt="">
<div class="contact">
<img style="border-radius: 50px;" src="https://yt3.ggpht.com/xgO_ovAjUhRNnUBzEozcIu6yx8bm-VGpEPOtE-yyGgSK2x9sbMJMbx2VyMkYi8npoTjMr6aVjdk=s68-c-k-c0x00ffffff-no-rj"
width="10%" height="10%" >
<div class="con_1">
<div>[Playlist]왜 집중이 잘되는지 모르겠음,,, 🥕 스폰지밥 BGM 플레이 리스트</div>
<div class="sb">모트모트TV✅</div>
<div class="sb">조회수 19만회 • 1개월 전</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/E9M0SAlHY7Y/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA4_Kh3xjZZPC7kaLFhpgQJYOgXkg" alt="">
<div class="contact">
<img style="border-radius: 50px;" src="https://yt3.ggpht.com/vcD-dzGlbM_xpVqJ0hhR6DqrgxBAWRqQPqDTYB4Ew4QETUI5QPybKDEOgY8qXfM_LV68pFO8ank=s68-c-k-c0x00ffffff-no-rj"
width="10%" height="10%" >
<div class="con_1">
<div>저기요</div>
<div class="sb">띱 Deep</div>
<div class="sb">조회수 74만회 • 2일 전</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/y42YU8JkTKw/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDG3PrXjav8MxjRfmixeg-S6Bv5Aw" alt="">
<div class="contact">
<img style="border-radius: 50px;" src="https://yt3.ggpht.com/XIrz2X4rxeRt59xggde9am7KqkZQ7e3TSaY3bZVWr6bWAVToAKNNH05ZAyovMCJySVxTjZHD=s68-c-k-c0x00ffffff-no-rj"
width="10%" height="10%" >
<div class="con_1">
<div>Super Shy -뉴진스(NewJeans)[뮤직뱅크/Music Bank]| KBS 230714 방송</div>
<div class="sb">KBS Kpop✅</div>
<div class="sb">조회수 135만회 • 3일 전</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/UZexWIJvxFw/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCB4uiC9zcpiFJDd4WYeuLSv500CA" alt="">
<div class="contact">
<img style="border-radius: 50px;" src="https://yt3.ggpht.com/nQFIsbSooQeTR8Cx33awcFEl59cWbeAZFbiX70BKxZ4E79VhszKB8ARL4lmDN7HQ39_eMlXfPA=s68-c-k-c0x00ffffff-no-rj"
width="10%" height="10%" >
<div class="con_1">
<div>다이소에 출근하며 찾은 광명템/절대 후회없는 다이소 꿀템 야무지게 추천</div>
<div class="sb">블루밍나나</div>
<div class="sb">조회수 44만회 • 2개월 전</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/mCq8e2nsIQk/hq720.jpg?sqp=-oaymwE2COgCEMoBSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhlIFAoTDAP&rs=AOn4CLCG4jXlkgLA-47dky4U9fI3KNj3Vw" alt="">
<div class="contact">
<img style="border-radius: 50px;" src="https://yt3.ggpht.com/Tc39E5uh5zHt3IQMm43WyU_vi5yPcPq9fBlyS_C4orCy0S-L7oWDs6xZ7B8eU40U3ve2FCTNLQ=s68-c-k-c0x00ffffff-no-rj"
width="10%" height="10%" >
<div class="con_1">
<div>🔥빌보드에서 역주행 중🔥 지금 미국에서 떡상 중이라는 여름팝송! 역주행 이유 + 맴찢 가사해석 taylor swift-Cruel summer[가사;를 읽다]</div>
<div class="sb">선민_sunmin✅</div>
<div class="sb">조회수 3.3만회 • 7일 전</div>
</div>
</div>
</div>
</div>
</div>
</body>
웹 이미지
728x90
반응형