selfstarter

CSS header 부분 정리 본문

Web/Html

CSS header 부분 정리

selfstarter 2019. 12. 30. 20:51

클론코딩 순서

  • 전체적인 화면 배치를 끝내고 요소를 꾸미자

한국어 언어 설정

  • 한국어 사이트이기 때문에 ko라고 써야 화면난독기가 한국어로 잘 작동한다
    <html lang="ko">

시멘틱 태그

  • 시멘틱 태그로 인해 데이터에 의미를 부여하고, 컴퓨터가 데이터를 효과적으로 추출할 수 있다(div, table로 홈페이지를 만들면 안된다)
    <header></header>

hide

hide class는 none을 하면 시각장애인 센스리더에서 읽어지지 않으므로 -1000px을 해서 화면에서 안보이도록 만든다

.hide {position: absolute; left:-1000px;}

inline-block

  • inline-block은 요소들이 코드상으로 실제로 enter쳐서 떨어져 있으면 1px 씩 들어간다.

a에 너비를 넣는 이유

  • a를 클릭하기 때문이고, a를 넓게 주어서 빈 공백을 클릭해도 h1클릭한 것 같은 효과를 얻기위해서 a에 너비 높이를 지정해야한다.

    header h1 a {width: 110px; height:81px}

대메뉴 클릭영역

  • 대메뉴는 클릭영역을 큼직하게 주는 것이 좋다.
  • 클릭영역을 넓히기 위해 li가 아니라 a에 주도록 한다
    header .lnb li {display:inline-block;}

높이 가운데 정렬

  • 높이가 81px일 때 line-height도 81px로 주면 세로 가운데 정렬이 된다
    header .spot li a {display:block; height:81px; padding: 0 10px; line-height:81px;}

transform 속성

  • transform은 위치 이동
  • transform: translateY(-50%);는 자기 높이에 50% 올린다는 의미
    header .spot li:after {content: ""; position: absolute; left: 0; top:50%; width:1px; height:7px;
background-color:#ccc; transform: translateY(-50%);}

    글씨 밑줄

  • text-decoration은 밑줄을 그을 수 있지만 글자와의 간격을 떨어뜨릴 수 없다
  • 이 때 글자를 으로 감싸고 span에 위치 기준을 주고, span 다음에 밑줄을 그리도록 한다
    header .lnb li a:hover span {position: relative;}
header .lnb li a:hover span:after {position:absolute; left:0; bottom:-9px; content:""; display:block;
width:100%; height: 1px; background: #2d5b79;}

'Web > Html' 카테고리의 다른 글

CSS정리(float, :before, :after, overflow, clear, box-sizing, position)  (0) 2020.06.10
기본 HTML 구조  (0) 2020.05.22
리베하얀님 HTML4, CSS1,2, 전체 초기화 CSS파일 정리  (0) 2019.12.29
line-height 줄의 높이를 지정하는 속성  (0) 2019.11.26
Html Table 구조  (0) 2019.11.01
'Web/Html' Related Articles more
Comments