웹 페이지에서 영역별 크기 정하기

너비와 높이 지정하기

• width,height 속성을 사용해 너비값과 높잇값 설정가능
  
  • px: 너비값과 높이값을 px단위로 지정
  • %: 부모 태그를 기준으로 너비값과 높이값을 %단위로 지정
  • vw: 웹 브라우저의 너비를 기준으로 너비값과 높잇값을 백분율로 지정
  • vh: 웹 브라우저의 높이를 기준으로 너비값과 높잇값을 백분율로 지정

See the Pen 너비와 높이지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

바깥쪽 여백 지정하기

• margin 속성을 사용해 태그의 바깥쪽 여백 설정
  • px: 태그의 바깥쪽 여백을 px단위로 지정
  • %: 부모 태그 기준으로 태그의 바깥쪽 여백을 %단위로 지정
  • vw: 웹 브라우저의 너비를 기준으로 태그의 바깥쪽 여백을 백분율로 지정
  • vh: 웹 브라우저의 높이를 기준으로 태그의 바깥쪽 여백을 백분율로 지정

See the Pen 바깥쪽 여백 지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

안쪽 여백 지정하기

• padding 속성을 사용해 태그의 안쪽 여백 설정
  • margin 속성과 이름만 다를뿐 사용법은 같음
  • 기존 박스 크기를 유지하고 싶다면 추가된 padding값만큼 너비값과 높잇값을 빼면됨

See the Pen 안쪽 여백 지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

기존 박스크기를 유지하면서 안쪽 여백 지정하기

• box-sizing속성을 사용해 기존 박스 크기 유지 설정
  • 첫 번째 요소는 기본값인 content-box로 설정되어 있으므로 padding이 크기에 영향을 미치지 않고, 두 번째 요소는 border-box로 설정되어 padding이 크기에 포함됩니다.

See the Pen 기존 박스크기유지 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

테두리의 형태 지정하기

• border-width: 테두리의 굵기 지정
• border-style: 테두리의 모양을 지정
• border-color: 테두리의 색상을 지정
• border: 테두리의 굵기,모양,색상을 한꺼번에 지정가능

See the Pen 테두리의 형태 지정 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

블록 요소와 인라인 요소 태그

• 블록요소
  • 줄을 자동으로 바꿈
  • 너비와 높이를 지정할 수 있다
  • 너비를 지정하지 않으면 부모 요소 너비값으 100%를 상속
  • 블록 요소와 인라인 요소 모두 묶을수 있다
• 인라인요소
  • 자동 줄 바꿈이 되자 않고 옆으로 나열
  • 너비와 높이를 지정할 수 없다
  • 인라인 태그를 사용한 텍스트의 크기가 해당 요소의 크기가 됨
  • 인라인 요소만 묶을수 있다

See the Pen 블록 요소와 인라인요소 by 신범식 (@ulqsqjpw-the-solid) on CodePen.