Jeden Tag, aufrichtig und lustig.

css 10. layout 본문

CSS

css 10. layout

a-nanas 2022. 7. 2. 00:40

layout

기본 레이아웃

<body>
  <div id="container">
    <header id="header">
      <h1>사이트 제목</h1>
    </header>
    <aside id="sidebar">
      <h2>사이드바</h2>				
    </aside>
    <section id="contents">
      <h2>본문</h2>
    </section>
    <footer id="footer">
      <h2>푸터</h2>
    <footer>
  </div>
</body>

 

3단 레이아웃

html

<body>
		<div id="container">
			<header id="header">
				<h1>사이트 제목</h1>
      </header>
			<aside id="left-sidebar">
				<h2>사이드바</h2>				
      </aside>
			<section id="contents">
				<h2>본문</h2>
      </section>
			<aside id="right-sidebar">
				<h2>사이드바</h2>
      </aside>
			<footer id="footer">
				<h2>푸터</h2>
			<footer>
		</div>
	</body>

css

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
#container{
  width: 1200px;
  margin: 20px auto;
}
#header{
  width: 100%;
  height: 120px;
  background-color: #acacac;
}
#left-sidebar{
  width: 250px;
  height: 600px;
  background-color: #e9e9e9;
  float: left;
}
#contents{
  width: 800px;
  height: 600px;
  background-color: #f7f7f7;
  float: left;
}
#right-sidebar{
  width: 150px;
  height: 600px;
  float: left;
  background-color: #e9e9e9;
}
#footer{
  width: 100%;
  height: 100px;
  background-color: #888888;
  clear: left;
}

** 실무에서 꼭 사용되어야 하는 속성 : box-sizing : border-box;

* {
  box-sizing: border-box;
}

 

수평 내비게이션 만드는 법

*내비게이션 : 웹사이트에서 메뉴를 의미 -> <nav></nav>

 

목록을 block레벨에서 inline레벨 요소로 바꿔야한다.

ex.

display : inline-block; /*인라인 레벨 요소와 블록 레벨 요소 모두 지정*/

 

float

float속성은 웹 요소를 문서 위에 떠있게 만든다.

 

<p>태그처럼 문단의 좌측이나 우측에 이미지를 표시해야 할 경우에 사용할 수 있다.

 

ex.

<style>

img{

float : left ;

}

</style>
<body>
<img src = "apple.png">

<p>blah blah</p>
</body>

*clear속성 : float속성 해제하는 속성

float : left;

 

 

 

저작자표시

'CSS' 카테고리의 다른 글

css 12. position  (0) 2022.07.19
css 11. margin  (0) 2022.07.19
css 9. style 시트  (0) 2022.06.17
css 8. 미디어 쿼리  (0) 2022.03.26
css 7. grid  (0) 2022.03.26
'CSS' Related Articles more