html 질문입니다.
본문
html, css 공부 후 복습겸 사이트를 하나 만들고있는데, full 화면일때는 괜찮다가 화면을 줄이면 사진 빼고 모든 택스트가 밀려버립니다.
근데 위아래로 줄이면 안밀리더라구요.
네이버나 구글 같이 창을 줄이면 글자가 안밀리고 안보이는 그대로 창만 줄어들었으면 좋겠는데 해결책을 도통 모르겠습니다.
구글링 몇시간 해서 하라는거 다 해봐도 안되네요.
코드는 보시는 페이지의 코드입니다. 제발 도와주세요..
<!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;
}
font-family: 'Yeon Sung', cursive;
position:absolute;
left:950px;
top:230px;
font-size:25px;
text-decoration: underline;
font-size:50px;
}
position:absolute;
left:520px;
top:320px;
border-radius: 10%;
overflow: hidden;
}
position:absolute;
left:880px;
top:320px;
border-radius: 10%;
overflow: hidden;
}
position:absolute;
left:1240px;
top:320px;
border-radius: 10%;
overflow: hidden;
}
font-family: 'Yeon Sung', cursive;
position:absolute;
left:590px;
top:495px;
font-size:30px;
font-decoration:strong;
}
font-family: 'Yeon Sung', cursive;
position:absolute;
left:520px;
top:545px;
font-size:23px;
}
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>
답변 2
ㅜㅠ 미디어쿼리 말고 그냥 고정된채로 있고 싶은건데요 ㅜㅠㅜ답변 감사합니다.
해당 요소에 min-width 설정해 보세요.
https://homzzang.com/b/css-65
안되네여....min-width 해도...
현재, 사이트가 구조적으로 아주 안 좋게 설계되었네요.
HTML CSS 다시 공부해 보세요.
https://homzzang.com/b/html
https://homzzang.com/b/css
ps.
대략 이런 식으로 해당 요소의 최소 너비를 설정해놔야 화면 크기가 줄어도 글자가 안 뭉개집니다.
https://codepen.io/sinbi/pen/OJRaRQY
