HTML/CSS 강의 8일차 : 레이아웃,링크걸기,그래픽스타일(그라디언트),크로스브라우징,웹폰트

 

 

반응형 사이즈일때 영역잡은거 뒤쪽 배경 처리하는법

div으로 잡고 그 안에서 영역잡기

 

css으로가면 그 div에 width 100%주면됨 브라우저 사이즈 늘렸을때 뒤에 배경이 잘리지않음

 

 

 

 

 

 

그래서 header에 네비게이션 주는방법은 ul을 이용해서 주고

ul은 원래 수직정렬이니까 float:left로 수평정렬 해주고 text-align:center로 텍스트들 중앙정렬 해줌

그러면 상하가 중앙이 안되어있는데 그럴땐 lin-height이용해서 상하 중앙정렬 해주면 상하좌우 가운데로 옴

 

 

 

 

 

 

이렇게 영역잡고 레이아웃 제작하면됨

 

 

 

 

 

 

a href="경로" 해주면 링크 걸림

target넣어줘야 새창으로 열림 title 넣어줘야 웹접근성 완성

 

 

 

 

근데 a태그는 기본값이 밑줄+파란색폰트라서 a태그 폰트컬러 검정색, 텍스트 데코레이션 none해주면 없어짐

 

 

 

 

이건 홈페이지 들어가서 키보드 탭키 누르면 바로 위에 웹 접근성을 고려한 퀵메뉴?같은것들

 

 

 

 

 

css에서 a태그에 포커스 걸어주면 키보드가 접근 했을 때 보여주는 스타일임

 

 

 

 

 

 

이미지 불러오면 로딩속도 느려지니까 css3에서 등장한 그래픽 스타일들

border-radius는 모서리 둥글게 하는거고 시계방향으로 적용하면 됨

box-sizing은 보더값이 안쪽으로 width값에 포함되는거고

box-shadow는 말그대로 드롭쉐도우 주는거 첫번째는 x좌표 두번째는 y좌표 세번째는 블러값이고 그담에 컬러코드(스케치랑 똑같음)

 

 

 

 

 

text-shadow도 줄수 있음

rgba값에서는 마지막 a가 알파값인데 opacity랑 동일하지만 차이점이 있음

알파는 배경만 투명도 넣어주는거고 opacity는 전체 투명도임 

 

 

 

 

 

 

유용한 사이트로는 caniuse 사이트에서 마크업으로 크로스브라우징 체크하는거 있고

colorzilla에서 그라디언트 스타일 css값으로 보여주는 사이트가 있음

 

 

 

 

 

*크로스 브라우징 중요

그래픽 스타일의 경우 css3이기때문에 낮은버전의 브라우저와 여러가지 브라우저에서 먹히지 않을수 있기 때문에 항상 체크하는것을 크로스브라우징 함

 

사파리, 크롬 [-webkit-]

파이어폭스 [-moz-]

익스플로러 [-ms-]

오페라[-o-]

 

colorzilla에서 css스타일 복사해서 붙여넣기해서 살펴보니까 아예 old브라우저버전에서는 그라디언트 안보여주고 그냥 백그라운드 컬러로 처리하는듯, 내가 직접 하드코딩 하는것보다 colorzilla에서 카피해서 갖고오면 될 듯 싶음

 

 

 

 

 

 

예제로 그라이디언트 스타일이 들어간 버튼을 만들어 보았는데 직접 하드코딩 안하고 colorzilla에서 css스타일 카피해옴 굿

 

 

 

 

 

그래서 이건 버튼 마우스오버 했을 때 핑크색으로 바뀌는거 보여줌

이건 :hover 넣어주고 바뀌는 부분만 스타일 입력함

 

 

 

 

 

 

 

폰트 다람쥐도 있다. 폰트 스쿼럴 사이트 영문 폰트 제공 사이트

 

 

 

 

.ttf다운 받으면 woff이랑 eot확장자를 만들 수 있기 때문에 폰트 다운받을 땐 .ttf확장자로 받아야한다.

웹폰트 만들어주는 스타일은 @font-face

 

크롬, 사파리 woff

익스 .eot