CSS box model 활용

유관희·2022년 4월 25일
0
post-thumbnail
post-custom-banner

🛫 CSS box model 활용


CSS box model 활용  image

이와 같이 만들려고 한다.

CSS box model 활용  image

‏‏‎ ‎

CSS box model 활용  image

‏‏‎ ‎

WEB 에 box를 만들기 위해서 css h1 값을 font-size=45px, text-align = center, border:1px solid gray 로 box를 만든다.

CSS box model 활용  image

WEB 의 아랫줄을 그으려면 border:1px 을 border_bottom:1 로 바꾼다.

CSS box model 활용  image

‏‏‎ ‎

CSS box model 활용  image

‏‏‎ ‎

CSS box model 활용  image

세로로 줄을 그으려면 항목이 있는 tag 인 < ol> 을 css 로 ol { border-right=1px solid gray;} 로 만든다.

CSS box model 활용  image

세로줄을 리스트에 가까이 하기위해 with: 100px 로 둔다.

CSS box model 활용  image

세로 줄이 윗줄이랑 붙지 않은 이유를 크롬의 검사를 눌러 확인해 본 결과 margin 값이 있어서 떨어져 있는 것이므로 margin=0로 한다.

CSS box model 활용  image

‏‏‎ ‎

CSS box model 활용  image

‏‏‎ ‎

CSS box model 활용  image

‏‏‎ ‎

‏‏‎ ‎

profile
안녕하세요~
post-custom-banner

0개의 댓글