화면구현/css

css-박스모델

dev-hyeonnnnn 2022. 7. 7. 16:58

border:테두리

boreder-width: 테두리 두께

border_color: 테두리 컬러

border_style:테두리 스타일(단선, 실선)

border: 5px solid red:로 압축가능(순서 상관없음)

 

h1과 a가 같은 내용이면 h1,a {}로 묶어서 사용 가능

 

block level element::화면 전체를 쓰는 태그

inline element:자기자신만큼 크기를 갖는 태그

display:block/inline/none; 으로 바꿀 수 있음 none은 안보이게 함

 

padding: 콘텐츠와 테두리 사이의 여백

margin: 테두리와 테두리 사이의 간격

 

    h1{
      border:5px solid red;
      padding:20px;
      margin:20px;
      display:block;
      width:100px;
    }

 

웹페이지에서 오른쪽클릭 검사를 클릭하고 style을 보면 범위를 볼 수 있다.