MARGIN5 css block, inline, inline-block 속성 이번에는 웹페이지 상에서 html 태그들이 어떻게 보여지고 다른 태그들과 어떻게 상호 배치되는지 결정하는 display의 속성값 중 가장 기본적이라고 할 수 있는 block, inline, inline-block에 대해 알아보는 시간을 갖도록 하겠습니다. - display: inline 먼저 inline 속성부터 보겠습니다. display가 inline으로 지정된 태그는 줄바뀜 없이 다른 태그들과 나란히 배치됩니다. (span, a, em과 같은 태그들이 inline 속성입니다.) span a em 이렇게 나란히 배치되는 것을 볼 수 있습니다. 하지만 inline 속성은 width와 height 값을 지정해도 무시되고, margin과 padding 속성은 좌우 간격만 반영이 되고 상하 간격은 .. 2021. 12. 22. css margin:0 auto 오늘은 제 포스팅에서도 가운데 정렬을 하기 위해 종종 썼었던 margin:0 auto의 쓰임새에 대해서 알아보도록 하겠습니다. - margin:0 auto의 쓰임새는? margin:0 auto는 이 속성값이 들어가는 html 요소에게 가운데 정렬을 시켜주고 싶을 때 사용하게 됩니다. 근데 가운데 정렬을 하려고 하는데 왜 margin값을 저렇게 주는 것인가 궁금증이 생길 수 있습니다. 그것에 대해서 알기 위해서는 먼저 margin의 속성에 대해서 좀 알아야 합니다. (참고 자료 : https://begindevelop.tistory.com/28) margin값은 해당 요소와 주변의 요소 사이에 여백을 주는 css 속성입니다. 간단하게 하나 예시를 들어보면, 안녕 하세요. 첫 번째 div는 위아래 1.. 2021. 12. 20. css margin, padding 오늘은 css로 페이지를 꾸밀 때 여백값으로 많이 사용되는 margin과 padding에 대해서 알아보는 시간을 갖도록 하겠습니다. 간단하게 설명하면 margin은 바깥쪽 여백, padding은 안쪽 여백을 표시하는 속성입니다. 먼저 그림을 보여 드리겠습니다. 크롬 브라우저에서 개발자 도구로 들어가면 이렇게 padding과 margin에 대해 설명하는 그림이 나옵니다. 보다싶이 영역 안에 텍스트나 이미지 등의 내용이 있으면, 그 내용과 외곽선(border) 사이의 여백값을 나타내는 것이 padding값이 됩니다. 그리고 다른 레이아웃들과의 사이 여백을 나타내는 것은 margin값이 됩니다. 그럼 예제 코딩으로 한번 살펴 보겠습니다. 안녕하세요.1 지금 보면 div container 안에 div c.. 2021. 12. 18. 페이지 footer 영역 마무리, 최종 완성 전 시간에는 footer영역을 하다가 끝났었습니다. 오늘은 footer의 나머지 영역을 끝내고, 이 페이지를 완성하도록 하겠습니다. 왼쪽에 붙어 있는 텍스트 먼저 css를 하도록 하겠습니다. footer .top > div ul li {float:left;} footer .top > div ul li a {color:#fff;font-size: 13px 0;line-height: 45px;} 앞서 ul에도 float left를 줬었지만 텍스트들도 리스트의 형태가 아닌 가로로 쭉 정렬되어 있어야 하기에 ul li에도 float left값을 줬습니다. 그리고 텍스트 설정과 세로 가운데 정렬을 위해 line-height값을 세로 크기값으로 주게 되면 이렇게 됩니다. footer .top > div ul l.. 2021. 12. 15. 페이지 매거진 영역 제작(2) 전 글에 이어서 매거진 영역을 마저 끝내도록 하겠습니다. 지난번에는 딱 여기까지 했었습니다. 먼저 SB Flooring 부분부터 디자인을 해 보겠습니다. SB Flooring[오리지널,헤링본,강,엠보] SB마루는 한국 주거문화에 최적화되어 습기에 강하고, 열효율이 우수한 친환경 차세대 온돌마루입니다. 자세히보기 .magazine .slide_box .left div h3 {color:white;font-size: 20px;} .magazine .slide_box .left div h3 span {font-weight: normal; display: block;} html 코드의 h3 부분부터 css를 했습니다. 원본 페이지의 글씨 색깔, 크기를 맞춰 주고 밑의 [~] 괄호 부분은 줄넘김과 h3의 굵기 효.. 2021. 12. 13. 이전 1 다음
