분류 전체보기
[HTML, CSS] 헤더 아이콘 수정 2 (이미지 스프라이트)
위의 그림은 60px 단위로 아이콘이 만들어져 있는데 이 이미지를 url로 연결하고 아래와 같은 코드를 입력해주면 원하는 아이콘에 맞게 배치된다. .header .header-icon {text-align: center; margin-top: 30px;} .header .header-icon a {width: 60px; height: 60px; display: inline-block; background: url(../img/icon.png);} .header .header-icon a.icon1 {background-position: 0 0;} .header .header-icon a.icon2 {background-position: 0 -60px;} .header .header-icon a.icon3..
[HTML, CSS] 웹 폰트 초기 세팅
/* 폰트 초기화 */ body, input, textarea, select, button, table { font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif; } 윈도우는 설정이 좀 다를 수 있음 ㅠ 윈도우와 맥의 폰트를 동일하게 해주면 padding 의 차이를 좀 줄일 수 있음! 나눔고딕을 제일 많이 씀 - Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 이미지에서 link 부분을 복사한다. ..
[HTML, CSS] 헤더 타이틀 넣기
헤더에 타이틀을 넣을 것인데 Professional Publisher & Designer bin-repository.tistory.com & 요게 뭔가 했더니 그냥 진짜 & 앰퍼샌드 연산자를 말하는 것이었다. 이걸 넣어야 표준에 맞음! * html 문자열 엔티티가 궁금하다면 아래 블로그에 표로 자세히 정리되어 있다 ㅎ https://ooz.co.kr/199
[HTML, CSS] 헤더 아이콘 수정 1
의미있는 아이콘, 없는 아이콘을 구별하여 다른 방법으로 icon 을 태그해야한다. 이런 아이콘들은 의미있는 아이콘이다. 그런데 요즘은 이미지를 background 속성으로 태그한다. 이는 웹 접근성 때문인데, 다룸에 가서 대체 텍스트 속성을 보면 alt 속성을 이용해서 제공하라는 규칙이 나와있다. 그래서 img 를 쓰게되면 무조건 alt 태그를 써야만 한다. 그런데 naver 태그를 보면 img 태그를 안쓴 대신에 대체문자를 사용했다. 이미지가 없어도 Naver라고 뜸 - span 태그로 되어있음. 이 방식은 이미지를 background 로 넣고 가상으로 대체 문자를 만들어준다. (웹표준준수때문) -> 이미지 스프라이트 기법을 사용. 이는 작업하기 편하고 이미지 용량이 줄어든다. - 이미지 스프라이트 기..
[HTML, CSS] 헤더에 메뉴 넣기 (inline / block 구조 차이)
요런 식으로 오른쪽으로 정렬되어있는 메뉴바를 만들고 싶을 때! 1. 헤더 태그안에 필요한 클래스와 a 를 넣는다. Desinger Publisher Youtube 2. css 부분은 아래와 같이 코딩한다. /* 헤더 */ .header {} .header .header-menu {text-align: right;} .header .header-menu a{color: #fff; padding :10px; display:inline-block;} 여기서 주의 할 점은 a 태그안에 text-align 을 할 경우 먹히지 않는 다는 것이다. 인라인 구조(a 태그)는 전체 옵션이 먹히지 않는다. 그렇기 때문에 블록구조인(클래스) header-menu 안에 text-align 옵션을 주고 padding 을 주는데..
[HTML, CSS] 배경 넣기
#header {width: 100%; height: 325px; background: url(../img/header_bg.jpg) repeat-x} 위와 같이 넣어주게 되면 원하는 이미지를 background 로 넣을 수 있다. 그런데 화면을 축소하거나 확대하면 그림이 계속 바뀌면서 움직이는 걸 볼 수 있는데 이걸 고정하려면 #header {width: 100%; height: 325px; background: url(../img/header_bg.jpg) center top repeat-x} 요렇게 center, top 옵션을 넣어주어야 한다.