inline-block4 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. 페이지 컨텐츠 영역 제작 전 시간까지 베너&비주얼 영역을 작업해 봤었는데, 이번에는 메인 홈페이지의 비주얼 아래 영역인 컨텐츠 영역을 만들어 보려 합니다.(아래 이미지 부분입니다.) 먼저 저 이미지들을 가져와야 하는데, 여기 작은 이미지들을 모아놓은 파일을 보면 위쪽 중간쯤에 검은색, 파란색 이미지들이 있는 것을 볼 수 있습니다. 파란색 이미지는 홈페이지에서 해당 이미지에 마우스 커서를 올리면 글씨와 함께 파란색으로 변하게 하기 위해 있는데요, 지금부터 한번 보겠습니다. 먼저 저 부분에 해당하는 html 코드부터 작성하겠습니다. 제품정보 바닥재 벽면재 도어재 몰딩재 시트재 가구재 전 시간에는 section 태그로 전체를 묶고 class값으로 visual을 주었었습니다. 이번에는 제품정보에 해당하는 부분을 작업하니 cl.. 2021. 12. 9. 페이지 비주얼 영역 제작(1) 오늘은 지난번 베너 작업에 이어 그 아래 비주얼 부분을 만들어 보겠습니다. (앞 글에서 나온 css나 태그에 대한 설명은 생략하거나 간략히 하고 넘어가겠습니다.) 오늘치를 다 끝냈을 때의 화면입니다. - index.html 작업 먼저 지난번 베너 작업에서는 전체 body 태그 안에 큰 틀인 header 태그로 묶어 그 안에서 베너 부분을 다 만들어 주었었습니다. 한솔홈데코 대메뉴 제품정보 시공사례 고객센터 기업소개 사업분야 관련서비스 제품찾기 SITEMAP BLOG 이제 header 태그에서 베너 부분을 모두 끝냈으니 아래에 비주얼 부분 전체를 묶어줄 새로운 태그가 필요하겠죠? 여기서는 부문, 구역을 묶어주는 section 태그로 비주얼 전체 부분을 묶어줄 겁니다. 먼저 만들어야 할 사이트의 이미지를 보.. 2021. 12. 7. 사전 준비&페이지 header 제작(1) 이번에는 어떤 홈페이지와 유사한 페이지를 비슷하게 만들어 보는 작업을 시작하겠습니다. (이번에는 코드 전체가 아닌 설명 중간중간 꼭 필요한 부분만 코드와 같이 쓰겠습니다.) (현재는 해당 홈페이지의 디자인이 바뀌어 있어 해당 포스팅의 내용과의 디자인이 다릅니다.) - 소개 & 사전 준비 먼저 어떤 것을 하는지에 대해 소개해 드리겠습니다. 이 페이지와 비슷한 페이지를 만드는 작업을 하겠습니다. 시작하기 전에 사전 준비로 페이지에 있는 이미지들이 필요한데, 먼저 크롬 웹스토어에서 두 가지를 다운받아 줍니다. 1. Full page screen capture 먼저 저 페이지는 지금 스크롤로 아래까지 내용이 있는 상태이기에 스크롤과 상관 없이 전체 페이지의 모습을 찍어주는 확장 프로그램을 설치합니다. (.. 2021. 12. 7. 이전 1 다음
