CSS 질문입니다
조회수 1663회
안녕하세요 html,css공부중입니다.
<!doctype>
<html>
<head>
<meta charset="utf-8">
<style>
body{
display: flex;
align-items: center;
}
.container{
display: flex;
flex-direction: column;
}
header{
text-align: center;
border-bottom:1px solid gray;
padding-left:20px;
}
footer{
border-top:1px solid gray;
padding:20px;
text-align: center;
}
.content{
display:flex;
}
.content nav{
border-right:1px solid gray;
}
.content aside{
border-left:1px solid gray;
}
nav, aside{
flex-basis: 150px;
flex-shrink: 0;
}
main{
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>연습코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<h2>목차</h2>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis, accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos assumenda illo eum dicta. Voluptatum quaerat excepturi consectetur, doloremque esse deleniti commodi natus, maxime sit? Officia rerum quibusdam porro dolorum numquam harum soluta ex quo! Vero, nam? Necessitatibus rem hic perferendis maiores obcaecati voluptate sunt autem id doloribus, similique repudiandae nes
</main>
<aside>
광고부분입니다.
</aside>
</section>
<footer>
<a href="https://opentutorials.org/course/1">홈페이지</a>
</footer>
</div>
</body>
</html>
이러한 코드중에서 flex를 이용해 레이아웃을 공부중인데요 align-items: center;사용해 화면 중앙에 위치하게 하였는데 크롬에서 실행했을 때와
IE에서 실행했을 때 결과가 다릅니다.
IE에서는 메인내용 부분이 줄바꿈이 안되어있고 또한 화면을 줄었을때 자동으로 줄어들지 않고 크롬에서는 이런 문제가 없이 잘 실행되는데 왜 익스플로에서는 오류가 생기는건가요? 코드에 문제인지 브라우저가 문제인지 모르겠습니다^
-
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
우선, 코드에 문제가 있어요. body에 flex가 적용되어있어서 그렇습니다. 이걸 제거하면 IE(인터넷익스플로러)에서도 같게 보일거예요.
body { display: flex; }그리고 chrome과 IE(인터넷익스플로러)가 다른것은 말씀하신대로 브라우저마다 기본기술/성능/기능이 달라서 그렇습니다. 크롬은 쉽게말해 더 최근에 만들어졌고, 기능이나 성능이 더 좋습니다. webkit이라는 프레임워크를 바탕으로 만들어졌기 때문에, 애매하거나, 오류인 코드도, 알아서 챙겨주는 부분 더러 있고요. IE에서 되는 것은 크롬에서 대부분 되고, 크롬에서 되는데 IE에서 안되는 부분은 많아요.
- Body부분을 플렉스로 둔이유가 전부 화면 중앙에 위치시키려고했는데 크롬에서는 그게 작동하는데 익스플로어에서는 지원을 안해서 작동을 안하는거같네요... 플렉스 말고 플로어를 이용하라고 조언을 들었는데 플렉스보다 플로어를 이용하는게 더좋은방법인가요? 알 수 없는 사용자 2018.1.19 14:52
- 페이지 디자인 의도를 몰라서 딱 어떤게 좋겠다고 말할순없겠지만, flexbox로 하기 좋은건 flexbox로 하면되요. 딱히 뭐가 더 좋다는 없어요. 박기선 2018.1.19 16:03
댓글 입력