본문 바로가기

화면구현/css

css-박스모델

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을 보면 범위를 볼 수 있다.

'화면구현 > css' 카테고리의 다른 글

css-flexbox/연습  (0) 2022.07.15
css-미디어 쿼리(반응형 웹)  (0) 2022.07.11
css-그리드  (0) 2022.07.07
css-선택자  (0) 2022.07.06
css-기본 문법(css삽입하기)  (0) 2022.07.06