CSS 레이아웃 배우기

여백을 스타일할 수 있는 margin, padding

Margin

• border 외부에 생기는 여백.

  순서대로 위, 오른쪽, 아래, 왼쪽의 여백 값.

p.example {
  margin: 50px 50px 50px 50px;
}

Pading

• 테두리 안 쪽의 초록색 영역이 padding.

p.example {
  padding: 50px 50px 50px 50px;
}

Border

• 테두리스타일

p {
  border: 5px solid red;
}

p {
   text-decoration: underline;
}

테두리 스타일을 할 때, 내가 원하는대로 디자인할 수 있으니 대부분의 개발자는 border-bottom로 구현하는 것을 선호.

Block

• HTML element(이하 요소)는 block 요소
• 예를 들어, <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등이 모두 block 요소에 해당하는 태그
• 옆(좌우측)에 다른 요소를 붙여넣을 수 없다

  <p>로그인하세요</p>

Inline

• <span>, <a>, <img> 태그 등이 inline 요소입니다.
• inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻.

<span>span의 오른쪽 정렬</span>

css 통해서 성질 바꾸기

• inline 성질을 갖도록 하는 CSS property는 display 와 float있다.

.inlineP {
  display: inline-block;
}
.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}

• 반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있다.

.blockSpan {
  display: block;
}

None

.hide {
 display: none;
}

display: none; 이라는 값을 주면, 해당 요소는 화면에서 보이지 않는다. 있었다가 없었다가 하면서 요소를 보이게 / 안 보이게 할 수 있는 것

margin;auto;

• 좌우 마진을 auto로 설정시 요소를 가로 중앙에 오게 할 수 있다.

.center {
  with: 500px;
  maegin: 0 auto;
}

max-with

• with대신 max-with를 사용하면 작은 창에서는 창의 크기가 기기에 맞게 조절된다.

.center{
max-with: 600px;
maegin: 0 auto;
}

box-sizing

• box-sizing을 사용하면 해당 요소의 패딩과 테두리가 너비에 영향을 끼치지 않는다.

  .new {
  box-sizing: border-box;
  }
  

• -페이지 상의 모든 요소에 동작하게 만들기 위해서는 아래 코드를 넣으면 된다.

* {
  box-sizing: border-box;
}