묻고답하기

html, css 공부 후 복습겸 사이트를 하나 만들고있는데, full 화면일때는 괜찮다가 화면을 줄이면 사진 빼고 모든 택스트가 밀려버립니다.

근데 위아래로 줄이면 안밀리더라구요.

네이버나 구글 같이 창을 줄이면 글자가 안밀리고 안보이는 그대로 창만 줄어들었으면 좋겠는데 해결책을 도통 모르겠습니다.

구글링 몇시간 해서 하라는거 다 해봐도 안되네요.

 

전체화면.JPG

 

잘린화면.JPG

 

 코드는 보시는 페이지의 코드입니다. 제발 도와주세요..

 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>NightTable.com/menu</title>

    <link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">

    <link rel="stylesheet"  href="active.css">

 

    <style>

      h1{

        margin-top: 40px;

        padding-top: 0px;

        font-size: 120px;

        padding-bottom: 10px;

        padding-left: 50px;

        font-family: 'Yeon Sung', cursive;

        margin-bottom: 0;

        display: inline-block;

      }

      h2{

        font-size: 35px;

        border-bottom: solid black 3px;

        padding-bottom: 12px;

        padding-left: 60px;

        margin-bottom: 10px;

        font-family: 'Yeon Sung', cursive;

        display: inline-block;

      }

      a{

        color:black;

        text-decoration: none;

      }

      #img{

        margin-left: 0;

        margin-bottom: 0;

        margin-top: 0;

      }

      body{

        margin-left: 0;

        margin-right: 0;

      }

      li{

        font-size: 50px;

        padding-bottom: 20px;

        font-family: 'Yeon Sung', cursive;

      }

      ul{

        padding-left: 80px;

      }

      #bigmenu{

        font-family: 'Yeon Sung', cursive;

        position:absolute;

        left:950px;

        top:230px;

        font-size:25px;

        text-decoration: underline;

        font-size:50px;

      }

      #pasta{

        position:absolute;

        left:520px;

        top:320px;

        border-radius: 10%;

    overflow: hidden;

      }

      #meat{

        position:absolute;

        left:880px;

        top:320px;

        border-radius: 10%;

    overflow: hidden;

      }

      #ttuk{

        position:absolute;

        left:1240px;

        top:320px;

        border-radius: 10%;

    overflow: hidden;

      }

      #menuname{

        font-family: 'Yeon Sung', cursive;

        position:absolute;

        left:590px;

        top:495px;

        font-size:30px;

        font-decoration:strong;

      }

      #menudetail{

        font-family: 'Yeon Sung', cursive;

        position:absolute;

        left:520px;

        top:545px;

        font-size:23px;

 

      }

      #samallmenu{

        font-family: 'Yeon Sung', cursive;

        position:absolute;

        left:520px;

        top:645px;

        font-size:23px;

        border-top: 4px solid black;

 

      }

      }

      </style>

  </head>

  <body>

 

    <h1><a href="index.html">밤식탁</h1></a>

    <h2>골목 작은 술집</h2>

    <br>

 

    <ul>

      <li><a href="description.html">밤식탁</li></a>

      <li id="active"><a href="menu.html" id="active">메뉴</li></a>

      <li><a href="howtocome.html">찾아오는길</li></a>

      <li><a href="launchguide.html">창업안내</li></a>

      <div style="width:1280px; overflow-x:auto">

      <u><div id="bigmenu">대표 메뉴</div></u>

    </div>

      <div id="pasta"><img src="pasta.jpg" width="310" height="180"></div>

      <div id="meat"><img src="meat.jpg" width="310" height="180"></div>

      <div id="ttuk"><img src="ttuk.jpg" width="310" height="180"></div>

      <div id="menuname"><p><strong>청양 크림 파스타</strong>     

                <strong>부추 훈제 삼겹</strong>

                  

          <strong>해물 그라탕 떡볶이</strong>

        </p></div>

 

      <div id="menudetail"><p>고추의 알싸함으로 느끼함을 잡은 한국식    

        직접 짠 들기름으로 무친 부추&볶음김치 삼합   

        밤식탁만의 특제 로제 소스 베이스로 만든<br>         

        밤식탁 파스타

              

                  

               

              

                 시그니처 메뉴<br></p></div>

 

      <div id="samallmenu"><br><p><strong>순.정.파</strong> : 순두부찌개와 정말 파스타 면이 들어간 정말 맛있는

        매운 국물 파스타            

                          

              <br><br>

        <strong>대패삼겹볶음&주먹밥</strong> : 대패삼겹살과 각종 채소, 주먹밥이 들어간 매콤한 볶음 요리<br><br>

        <strong>버터바지락술찜&파스타(겨울)</strong> : 생물바지락을 이용한 칼칼한 술찜요리<br><br>

        <strong>나가사끼짬뽕탕</strong> : 해물가득 칼칼한 짬뽕탕<br><br>

        <strong>얼큰해물짬뽕탕</strong> : 고추, 파기름으로 볶아낸 채소와 해물을 넣은 빨간 짬뽕<br><br>

        <strong>사골만두탕</strong> : 진한 사골에 비비고 만두를 넣은 맛있는 만두탕<br><br>

        <strong>철판모듬소세지</strong> : 버터로 볶아낸 양파와 모듬소세지<br><br>

        <strong>골뱅이무침</strong> : 새콤달콤하게 무친 채소와 골뱅이무침<br><br>

        <strong>오늘의 과일&요거트</strong> : 달콤한 생크림 요거트에 찍어먹는 싱싱한 제철과일<br><br>

        <strong>간장계란밥</strong> : 계란후라이와 간장, 고소한 기름으로 맛을 낸 든든한  계란밥<br><br>

        <strong>얼큰우동</strong> : 가게에서 직접 만드는 얼큰한 어묵 우동<br><br>

 

 

    </div>

    </ul>

  </body>

</html>

 
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
우하하하화이팅 xedition 로고 사이즈가 작게 나옵니다. [2] 2023.04.06 by tree****
BEO 슬라이드 위젯 삽입 후 메뉴가 안보이네요 고수님들 부탁드립니다 [6] file 2022.06.17 by 인천한량
clara 홈페이지를 처음 제작해보는데 [3] file 2021.08.04 by J__
Alexander 사이트맵에서 클릭시 새창열기로 가능한가요? [2] 2021.07.28 by Alexander
호반의별 웹호스팅 이전후 404 not found 현상 [2] 2021.06.09 by 호반의별
김동규 html 텍스트 밀림 현상 질문입니다. file  
가입명 footer 하단에 고정하려면 어딜 수정해야 할까요?  
Crack리브레 존재하지 않는 회원 아이디입니다 [1] 2020.09.07 by 제이와이엔소프트
ppumweb 2단메뉴 [2] 2020.02.01 by LYG
LYG 3차메뉴 표시 방법 이게 맞나요?  
나비 html 사진 슬라이드 질문 [2] 2019.10.21 by 나비
thanksto html 미디어 쿼리 오류 어떻게 해결할 수 있나요? file  
supi**** XEDITION LNB 관련하여 몇가지 질문드립니다. [2] file 2019.09.18 by supi****
오센 input 타입을 textarea로 수정했는데요 [1] 2019.08.02 by sejin7940
내일은희망 배경색을 이미지로 바꾸고 싶어요 [2] 2019.05.15 by 내일은희망
초보개 sql 쿼리 질문  
이퓨 회원가입 select 폼 형식 입력값 불러오기 질문 file  
소라db952 cycle-pager 배너에 a 링크를 걸면 배너 이미지가 풀려요ㅠ [2] 2019.04.02 by 소라db952
세걸 ssd HHD 조합으로 웹서비스 설정 [1] 2019.04.01 by 세걸
Spooky 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. [1] 2019.03.29 by Spooky