전체 글

[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 옵션을 넣어주어야 한다.

[HTML, CSS] 폰트 사이즈 조절과 가운데 정렬~

/* 레이아웃 */ #wrap { color: #fff; font-size: 30px; text-align: center; text-transform: uppercase;} #header {width: 100%; height: 325px; background: #111;} #contents {width: 100%; height: 800px; background: #222;} #footer {width: 100%; height: 200px; background: #333;}

[HTML, CSS] 스킵메뉴

https://www.wah.or.kr:444/ 요런데 가서 보면 웹 접근성에 관한 지침을 볼 수 있다. 우리는 웹사이트를 만들 때 이러한 지침을 따라야 한다! 가장 먼저 스킵메뉴를 만드는 법을 알아보겠다. 스킵메뉴란 tab 을 이용해서 마우스가 아닌 키보드로 화면을 제어하고 메뉴버튼을 누를 수 있게 하는 기능이다. naver, daum 등 대표적인 사이트는 모두 적용이 되어있다. 이런식으로 내가 만들어둔 class 의 이름을 href 로 연결하여 스킵 메뉴바를 만들어 준다. css 부분은 이런식으로 코딩해 준다. /* a 링크 초기화 */ a {color : #222; text-decoration: none;} a:hover {color : #390;} /* 스킵 내비게이션 */ #skip {} #sk..

[JavaScript] 정규표현식 (Regular Expression)

정규표현식이란? 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식! 자바스크립트의 경우 내장되어있으므로 편하게 사용할 수 있음 패턴 만들기 var pattern = /a/; var pattern = new RegExp('a'); RegExp 객체의 사용 - exec() 예를 들어서 url 과 같은 정보를 추출하고 싶을 때, test 하고 싶을 때, 필요한 정보를 치환하고 싶을 때 사용 console.log(pattern.exec('abcdef')); //["a"] /a./ 의 경우 a를 포함하여 한문자까지 나타낸다고 볼 수 있음! var pattern = /a./; console.log(pattern.exec('abcde')); // ["ab"] - test() : 우리가 찾는 정보가 있는지 ..