Day44 :) BoxModel, Position, Float, Layout

14514 단어 자바개발자과정웹웹

BoxModel

  • 화면 레이아웃 구성 시, HTML 엘리먼트를 박스처럼 다루는 것
    • Contents: 표시하는 내용. 텍스트 혹은 이미지
  • 각 요소는 top, right, left, bottom부로 나뉘어져있으며, 각각 크기 설정 가능

Padding

  • border와 contents 사이의 여백
<!-- 표현법 1 -->
<style>
    div {
        padding-top: 30px;
        padding-right: 20px;
        padding-bottom: 50px;
        padding-left: 10px;
    }
</style>

<!-- 표현법 2 -->
/** 더 간단한 표현으로 쓸 수 있으며, top부터 시계방향 순으로 설정된다 **/
<style>
    div { padding: 20px 50px 30px 50px; }
    		/** Top Right Bottom Left **/
</style>

Border

  • Border: contents와 padding을 감싸고 있는 테두리

Border의 종류

  • {border-style: 종류}로 설정
    • dotted: 점선 테두리
    • dashed: 긴 점선 테두리
    • solid: 실선 테두리
    • double: 이중 실선 테두리
    • groove : 테두리가파인 입체 테두리. border-color 적용가능
    • ridge : 테두리가 튀어나온 입체 테두리. border-color 적용가능
    • inset : 들어간 입체 테두리. border-color 적용가능
    • outset : 튀어나온 입체 테두리. border-color 적용가능
    • none : 테두리를 없앰
    • hidden : 테두리가 존재하지만 보이지 않음
      참고: border-color

Margin

  • Border의 바깥여백. 다른 엘리먼트와의 경계
  • Padding과 같이 top, right, bottom, left 사이즈 설정 가능.(축약도 가능)
<!-- 표현법 1 -->
<style>
div.mar {
    margin-top: -25px;
    margin-right: 10px;
    margin-bottom: 30px;
    margin-left: 100px;
}
</style>

<!-- 표현법 2 -->
/** 더 간단한 표현으로 쓸 수 있으며, top부터 시계방향 순으로 설정된다 **/
<style>
    div { margin: 20px 50px 30px 50px; }
</style>

Position

선택자 {position: 종류; [top: 10px;]}
  • 엘리먼트의 위치를 결정하는 속성
  • 위치 지정 가능(top-right-bottom-left)

Position의 종류

  • 정적 위치(static position): 웹페이지 흐름에 따라 요소가 배치됨. 모든 요소의 default값
  • 상대 위치(relative position): static위치를 기준으로 위치 설정
  • 고정 위치(fixed position): 웹페이지가 스크롤되어도 항상 같은 위치에 고정(배너광고)
  • 절대 위치(absolute position): 부모 엘리먼트 기준으로 위치 설정. 부모 엘리먼트가 없으면 body기준으로 위치 설정

Float

선택자 {float: 종류; [width: 150px; height: 100px;]}
  • 이미지와 text간 배치관계를 설정하는 것
    • MS word의 배치스타일과 비슷한 기능

Layout

  • 다양한 요소들을 적절히 배치하는 것
  • 레이아웃을 위한 특정한 태그가 있는것은 아니고 div나 테이블 등을 이용해 틀을 잡음

div

  • 가장 보편적으로 사용되는 방식
  • div를 이용하여 header, contents, footer등으로 레이아웃을 나눔
<style>
	#header {}
    #content {}
    #sidebar1 {}
    #sidebar2 {}
    #footer {}
</style>
<body>
<div id="header"><h2>Header 영역</h2></div>
<div id="content"><h2>Content 영역</h2></div>
<div id="sidebar1"><p>SideBar1 영역</p></div>
<div id="sidebar2"><p>SideBar2 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>
</body>

table

  • 유지보수가 어려워 요새는 사용하지 않음
<table>
    <tr>
        <td colspan="2">Header 영역</td>
    </tr>
    
    <tr>
        <td>content영역</td>
    </tr>
    
    <tr>
        <td colspan="2">Footer 영역</td>
    </tr>
    
</table>
[TIL]20210727
백준 4344번

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage