입문자를 위한 기초 css (5-6) - display 속성 & border 속성 및 박스모델

5. display 속성 & border 속성

복습

• 블록 레벨 요소 :
  자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
  ex) div , p , h1 ...

• 인라인 요소 :
  자기에게 필요한 만큼의 공간만 차지
  ex) sapn , a ...

display 속성

• 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.

div{ display: inline;}
a{ display: block;}

display 속성 값

• inline : 인라인으로 처리
• block : 블록 레벨로 처리
• inline-block : 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리
• none : 표시하지 않음.

border 속성

• 요소가 차지하고 있는 영역에 테두리를 그릴 수 있따.
• 속성값으로 테두리의 두꼐,모양,크기 등을 함께 지정할 수 있다
  -> "단축속성"

span{ border: 2px solid green;}

border 속성값

• border-color : color 값
• border-width : thin,medium,thick 등 또는 px,em,rem 단위
• border-style : none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등

각각의 블록 레벨과 인라인 요소들을 border의 크기를 지정해준 결과이다.

블록 레벨을 인라인으로 , 인라인 요소를 블록 레벨로 display 속성을 사용해서 변경한 결과이다.

6. 박스모델 1편, 박스모델 소개

박스모델 (Box-Model)

• 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 "박스"라 표현하며 css는 박스의 크기, 위치 ,속성(색,배경,테두리모양)을 결정할 수 있다.

하나의 박스는 4개의 영역으로 구성된다

• 콘텐츠 영역 : width, height
• 안쪽 여백 : padding
• 경계선(테두리) : margin
• 바깥쪽 여백 : border-width

박스의 영역을 설정한 결과이다

• 블록 레벨 요소에 적용한 결과이고 , 인라인 요소에는 원래 width와 height를 설정할 수 없다.
• 정 하려면, display: inline-block 으로 설정해주면 width와 height를 정해줄 수 있다.