Recoding & Share Devlog

박스 모델에 대해서 알아보면 먼저 F12를 통하여 해당 영역의 크기를 볼 수가 있습니다. 예를들면 이런식으로 내부에 크기가 있고 그 위에 패딩 보더 마진 이런식으로 보여지는것을 통틀어서 박스모델이라고 합니다. 코드의 주석과 내용을 보고 결과 화면을 보겠습니다. 박스모델 /* 박스모델 - 한 요소가 박스의 모양을 갖는 모델 - width, height, padding, border, margin 로 구성 - 더 정확히 말하면, width, height, padding-top, padding-right, padding-bottom, padding-left, border-top, border-right, border-bottom, border-left, margin-top, margin-right, margi..

이번 포스팅에서는 지금까지 기재한 내용을 기반으로 예제를 만들어 보겠습니다. 예전 사이트에서 많이 써본 텝 모양 만드는것 그리고 화살표를 만들어서 활용하는 포스팅 그리고 현재로도 프로필사진을 둥글게 하는 여러 속성에 대한 것입니다. 마크업은 간단합니다 html 부분을 먼저 보면 텝모양 만들기 내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다. 내용이 들어갑니다.내용이 들어갑니다. 화살표 만들기 프로필 사진 이런식으로 간단한 마크업입니다. 전체 코드를 확인해서 어떤 CSS 속성이 들어갔는지 보겠습니다. 실습 hr { margin-top: 50px; margin-bottom: 20px; } #title { width: 200px; height: 40px; border-radius:30p..

이번에는 저번에 하지 않은 margin, padding, border에 대한 포스팅입니다. 이런식의 레이아웃을 구성을 해보겠습니다. 실제로 많이 색상 이나 그림자 모양을 만드는 것은 많이 사용이 됩니다. 먼저 html 마크업을 보면 간단합니다. ABC Hello 이정도의 마크업만 되어있습니다. div 3개와 hr 요소가 있네요 그럼 css는 어떻게 되어있을지 보겠습니다. 보더 hr { margin-top: 30px; margin-bottom: 30px; /* margin은 바깥쪽 여백을 의미합니다. top, right, bottom, left가 있습니다. 이 모든 것을 포괄하는 것이 margin 입니다. */ } #box { width: 100px; height: 100px; background:#03D..