css Data List

CSS 레이아웃 | 데이터카페

DDataDeveloper
2024-01-10 09:52:00
/ 목차 /
CSS 레이아웃
블록 레벨 요소와 인라인 요소
레이아웃 설계
CSS 레이아웃
- CSS 레이아웃은 웹 페이지의 구조와 디자인을 정의하는 데 사용되는 스타일 시트의 일부입니다. 다양한 방법으로 웹 페이지의 요소들을 배치하고 정렬할 수 있습니다

블록 레벨 요소와 인라인 요소
- 블록 레벨 요소(block-level elements): <div>, <p>, <h1> 등 ,인라인 요소(inline elements): <span>, <a>, <strong> 등 블록 레벨 요소는 한 줄을 차지하고, 인라인 요소는 내부 내용에 맞게 줄을 차지합니다. display 속성을 사용하여 요소를 블록 레벨로 지정할 수 있습니다.

레이아웃 설계
- 웹페이지 목적에 따라서 달라질수는 있으나 일반적인 레이아웃을 지정할때 헤더(header), 본문(main), 푸터(footer)로 구분됩니다

header
웹페이지의 최상단부분. 주로 사이트의 이름, 검색창, 네비게이션 등의 내용이 포함됩니다

main 
본문 영역입니다. 일반적으로 body 내에서 1개만 존재합니다. header와 footer를 제외한 모든 내용의 부모 요소입니다.

footer
웹페이지의 최하단부분. 주로 상호명, 연락처, 개인정보처리방침 등의 내용이 포함됩니다.

html
<html>
  <head>
    <title>Basic Layout</title>
  </head>
  <body>
    <header>
      <p>header</p>
    </header>
    <main>
      <p>main</p>
    </main>
    <footer>
      <p>Footer</p>
    </footer>
  </body>
</html>


css
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

main {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}
Comment