lineHeight7 css line-height 속성 이번 글에서는 줄 높이를 정하는 속성인 line-height를 알아보도록 하겠습니다. line-height는 제 포스팅에서도 생각보다 꽤 썼었는데요, 언뜻 보면 간단해 보이면서도 꽤 많은 세부 속성값들을 갖고 있는데 이 속성들에 대해 알아보는 시간을 갖겠습니다. 1. normal (웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.) 2. length (길이로 줄 높이를 정합니다.) 3. number (글자 크기의 몇 배인지로 줄 높이를 정합니다.) 4. percentage (글자 크기의 몇 %로 줄 높이를 정합니다.) 5. initial (기본값으로 설정합니다.) 6. inherit (부모 요소의 속성값을 상속받습니다.) normal HTML is the standard mark.. 2021. 12. 17. 페이지 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. 공지, 뉴스 영역 마무리&footer 영역 제작(1) 지난번에는 여기까지 했었습니다. 오늘은 컨텐츠 영역에서 공지와 뉴스 영역을 마무리 짓고, 원본 페이지의 마지막 단계인 이 부분까지 최대한 건드려 보는 것으로 하겠습니다. (지난번 글들에서 설명했었던 개념들 같은 경우는 간략한 설명만 하고 넘어갈 수 있습니다.) 현재 남은 부분은 공지와 뉴스의 아래 텍스트들을 리스트 형태로 적용을 시켜야 하는데, 원본 페이지는 이렇게 생겼습니다. 보면 class left에 속해 있는 좌측은 리스트들이 좌우로 배치되어 있고, class right에 속해 있는 우측은 일반적인 리스트의 형태처럼 세로로 정렬이 되어 있습니다. 먼저 공통되는 부분부터 보면 텍스트들의 css가 동일하다는 것을 알 수 있습니다. (일반 텍스트와 날짜를 표시하는 텍스트의 css) 그럼 이 부.. 2021. 12. 15. 페이지 컨텐츠 베너 영역 마무리&공지, 뉴스 영역 제작(1) 오늘은 전 글에 이어 컨텐츠영역의 베너 부분의 마무리와, 아래 공지 부분도 시작하겠습니다. (전 글에서 다뤘던 개념들은 간략한 설명만 하고 넘어가도록 하겠습니다.) 지난번에는 이 상태까지 했었습니다. 그리고 이게 오늘 할 부분의 원본 홈페이지입니다. 이어서 검색하기 버튼의 css를 하겠습니다. .notice > div .top > div a {display: block;height: 45px; line-height: 45px;text-align: center; color: white;background: #2d5b79;font-size: 15px;} 원본의 버튼 디자인을 보면 위의 입력칸이나 select 태그 부분과 width 값이 같고, 글씨는 흰색에 세로 가운데 정렬이 되어 있습니다.(height, .. 2021. 12. 14. 페이지 컨텐츠 베너 영역 제작(1) 지난번에는 매거진 영역까지 해서 끝냈었습니다. 원본 페이지를 한 번 보면, 매거진 영역 밑에 이렇게 되어 있는데 오늘은 위의 이 부분을 해 보겠습니다. (전의 글에서 설명했던 속성들은 짧게 설명만 하고 넘어가겠습니다.) 먼저 전체적인 설명을 드리면 전체 배경색은 흰색으로 되어 있고, 그 영역 가운데에 컨텐츠들이 모여 있습니다.(가운데 정렬) 오늘 우리가 할 부분에서 왼쪽의 테마 갤러리~대리점 찾기 부분은 ul li 리스트로 묶고, 오른쪽의 제품 찾기 영역은 따로 처리하겠습니다. 먼저 html 태그부터 쓰겠습니다. 테마 갤러리 블로그 대리점 찾기 제품 찾기 제품 전체검색 검색하기 전체 영역은 section(class notice)로 감싸 주었고, 아래의 공지, 뉴스까지 포함한 컨텐츠 전체 영역을 표.. 2021. 12. 14. 페이지 매거진 영역 제작(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 2 다음
