HTML5 화면 구성 코드 작성 도와주실 고수분 찾습니다.
-
게시물 수정 , 삭제는 로그인 필요
HTML5 화면 구성 코드 작성 도와주실 고수분 찾습니다.
익명 작성일 -
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
html{font-size: 10px;}
body{
font-size: 14px;
overflow-x: hidden;
}
/* a링크 초기화 */
a{text-decoration:none; color: #2c2c2c;}
/* 블릿기호 초기화 */
ul,li,ol,dl{list-style: none;}
/* 테두리 초기화 */
img, fieldeset{border:0 none;}
button{border:0; outline: 0; cursor: pointer; background: none;}
/* 폰트스타일 */
h1,h2,h3,h4,h5,h6,address,em,i,strong,table,th,td,caption{font-style:normal; font-weight: normal; color: #2c2c2c;}
/* style */
.container {max-width: 1100px; width: 100%; height: auto; margin: 0 auto;}
.header_title p {width: 300px; height: 50px; line-height: 48px; border: 1px solid #ddd; box-sizing: border-box; text-align: center;}
.wrap {width: 100%;}
.wrap .left_right_box {display: flex; justify-content: space-between;}
.wrap .left_right_box .left_box {min-height: 500px; height: auto; width: 80%; box-sizing: border-box; border: 1px solid #ddd;}
.wrap .left_right_box .left_box p {}
.wrap .left_right_box .right_box {width: 19%; text-align: center;}
.wrap .left_right_box .right_box p {min-height: 50px; height: auto; box-sizing: border-box; border: 1px solid #ddd; margin: 0;}
.wrap .left_right_box .right_box p img {}
.wrap .img_area {width: 100%; overflow-x: scroll;}
.wrap .img_area ul {display: flex; padding: 0; width: 1200px;}
.wrap .img_area ul li {width: 300px; min-height: 50px; height: auto; line-height: 48px; border: 1px solid #ddd; margin-right: 20px; text-align: center;}
.wrap .img_area ul li:last-child {margin-right: 0;}
</style>
</head>
<body>
<header>
<div class="header_title">
<div class="container">
<p>여행지 이름</p>
</div>
</div>
</header>
<div class="wrap">
<div class="container">
<div class="left_right_box">
<div class="left_box">
<p>
글 넣을곳
</p>
</div>
<div class="right_box">
<p><img src="" alt="">여행지 사진 넣을곳</p>
</div>
</div>
<div class="img_area">
<!-- 이부분은 슬라이드로 할꺼면 슬릭 사용하세요 -->
<ul>
<li><img src="" alt="">사진넣을곳</li>
<li><img src="" alt="">사진넣을곳</li>
<li><img src="" alt="">사진넣을곳</li>
<li><img src="" alt="">사진넣을곳</li>
<li><img src="" alt="">사진넣을곳</li>
</ul>
<!-- 이부분은 슬라이드로 할꺼면 슬릭 사용하세요 -->
</div>
</div>
</div>
</body>
</html>
대충이렇게 하면 되지 않을까여??
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
html{font-size: 10px;}
body{
font-size: 14px;
overflow-x: hidden;
}
/* a링크 초기화 */
a{text-decoration:none; color: #2c2c2c;}
/* 블릿기호 초기화 */
ul,li,ol,dl{list-style: none;}
/* 테두리 초기화 */
img, fieldeset{border:0 none;}
button{border:0; outline: 0; cursor: pointer; background: none;}
/* 폰트스타일 */
h1,h2,h3,h4,h5,h6,address,em,i,strong,table,th,td,caption{font-style:normal; font-weight: normal; color: #2c2c2c;}
/* style */
.container {max-width: 1100px; width: 100%; height: auto; margin: 0 auto;}
.header_title p {width: 300px; height: 50px; line-height: 48px; border: 1px solid #ddd; box-sizing: border-box; text-align: center;}
.wrap {width: 100%;}
.wrap .left_right_box {display: flex; justify-content: space-between;}
.wrap .left_right_box .left_box {min-height: 500px; height: auto; width: 80%; box-sizing: border-box; border: 1px solid #ddd;}
.wrap .left_right_box .left_box p {}
.wrap .left_right_box .right_box {width: 19%; text-align: center;}
.wrap .left_right_box .right_box p {min-height: 50px; height: auto; box-sizing: border-box; border: 1px solid #ddd; margin: 0;}
.wrap .left_right_box .right_box p img {}
.wrap .img_area {width: 100%; overflow-x: scroll;}
.wrap .img_area ul {display: flex; padding: 0; width: 1200px;}
.wrap .img_area ul li {width: 300px; min-height: 50px; height: auto; line-height: 48px; border: 1px solid #ddd; margin-right: 20px; text-align: center;}
.wrap .img_area ul li:last-child {margin-right: 0;}
</style>
</head>
<body>
<header>
<div class="header_title">
<div class="container">
<p>여행지 이름</p>
</div>
</div>
</header>
<div class="wrap">
<div class="container">
<div class="left_right_box">
<div class="left_box">
<p>
글 넣을곳
</p>
</div>
<div class="right_box">
<p><img src="" alt="">여행지 사진 넣을곳</p>
</div>
</div>
<div class="img_area">
<!-- 이부분은 슬라이드로 할꺼면 슬릭 사용하세요 -->
<ul>
<li><img src="" alt="">사진넣을곳</li>
<li><img src="" alt="">사진넣을곳</li>
<li><img src="" alt="">사진넣을곳</li>
<li><img src="" alt="">사진넣을곳</li>
<li><img src="" alt="">사진넣을곳</li>
</ul>
<!-- 이부분은 슬라이드로 할꺼면 슬릭 사용하세요 -->
</div>
</div>
</div>
</body>
</html>
대충이렇게 하면 되지 않을까여??
HTML5 화면 구성 코드 작성 도와주실...
HTML5 학교 과제인데 화면 구성도처럼 틀만 잡아주실 수 있으실까요? 지식인 html{font-size: 10px;} body{ font-size: 14px; overflow...
기능 하나만 도와주실분.(HTML,CSS,JS
웹페이지 기능 하나만 도와주실분.(HTML,CSS,JS)... 추가해서 코드작성해서 답변 부탁드립니다 ..... /* 3 개의 칼럼으로 구성 */ gap: 20 px; /* 그리드...
실비보험 가입 상담해주실 분 찾습니다.
... 상담해주실 수 있는 분 계신가요? 수원 영통에... 보장을 구성하고 그 후에 원하는 보장적 니즈에 따라... 이 경우 뇌혈관 진단비에 해당되는 i67코드로 뇌졸중, 혈관의 협착...
모바일프로그래밍 과제 좀 도와주실분!!
모바일프로그래밍 과제 좀 도와주실분!!.. 1.... xml에 배경색을 다양하게 보이도록 구성하시오. ※작성한 코드와 결과 화면을...
궁금사항입니다...!! ㅠㅠ 도와주세요
... 주황색 5 표시가 있는 것 같아요.. 무슨 차이인가요? ㄴ아이콘 셋팅 차이입니다 그리고 또 코드를 다 작성하고 파일을 저장하면, 바탕화면에서 그 파일을 열었을 때 vs...
Html 소스코드 구성 질문입니다!
이렇게 화면을 구성하고싶은데 글을 작성하면 배경이 안보입니다 생각을 해봐도 도저히 못하겠습니다 ㅠㅠ 도와주세요 도와주세요 ㅡ 샘플입니다 ^^ 따라하세요~ * 테스트 1...
소스 코드 구성에 도움이 필요합니다.
... 10-5 2*3.3/(3.1416*3.3) 10-3*2^2 A=10/4 C-B C=A*(F-21) 앞의 수식 계산기를 재귀하강 파싱 기반 수식 인터 프리터로 작성한 Java 소스 코드를 이해하고, 분석 하라 – “A Recursive...
엑셀 VBA질문!!데이터를 조건에 맞게...
... 엑셀 VBA코드를 짜주실 고수분을 찾습니다..... 꼭 좀 도와주시길 바랍니다. ㅠㅠ 아래의... 4, 5, 6, 7) ElseIf destSheetName = "시트2" Then...
인터넷프로그래밍 과제 좀 도와주실분....
... (피자 총 가격은 자동계산) 작성된 프로그램의 코드와 완성 화면을... HTML 코드: ```html 피자 주문 피자 주문 피자 종류 치즈 페퍼로니 야채...
HTML 쇼핑몰 header 부분코드질문
... 알려주실 수 잇나요 ㅠㅠ? 부탁드립니다... 화면: 결과 확인 및 코드: https://jsfiddle.net/xxxvvvxxx/nog6r3p1/5/ & Ref. http://indifference.com/collage...