CSS만으로 구현하는 탭UI

Javascript 없이 CSS만으로 구현된 탭입니다.

크기조절이 간단해 간단한 형태의 탭을 페이지에 붙이는데 유용합니다.

탭의 여러가지 크기 조절은 CSS 파일을 열어 크기 숫자값만 조정해주면 됩니다.

전체 탭 가로 크기 변경 

2행의  "width: 600px" 를 원하는 크기로 변경

컨텐츠 영역 높이 변경 

28행의 "height: 300px" 값을 원하는 높이로 변경

상단탭 항목 너비 변경 

4행의 "width: 120px;" 를 원하는 개별 탭 크기값으로 변경. 그리고 9, 10, 11행의 값을 순서대로 변경한 탭 크기값의 x1, x2, x3배 값으로 입력(예를 들어 110px로 탭 개별항목 너비를 변경했으면 9, 10, 11행의 값은 110px, 220px, 330px 가 됩니다.)

탭 항목 삭제

예를 들어 4번째 탭을 삭제할 경우 "csstab.html" 파일을 열어 17, 18행 삭제, 42~46행을 삭제하면 됩니다.

원칙은 해당하는 CSS 항목들도 CSS 파일에서 찾아 지워주면 좋겠지만, 삭제하지 않아도 무방합니다.

탭 항목 추가

예를 들어 5번째 탭을 추가하는 경우를 예를 들면17, 18행을 복사해 그 밑에 붙여넣은 후, 4추가된 행의 숫자 4를 5로 변경합니다. 예를 들어 "tab-4"를 "tab-5"로 변경합니다.

그 다음 42~46행을 복사해 46행과 47행 사이에 붙여넣습니다. 붙여넣은 내용에서 "content-4"를 "content-5"로 변경합니다.

이제 CSS 파일을 변경합니다.

압축파일에 있는 가로 120px 탭 항목 크기를 그대로 사용한다고 가정을 합니다.

24행을 복사해 그 바로 밑에 붙여넣은 후 새 행의 숫자 4를 5로 변경

15행을 복사해 그 바로 밑에 붙여넣은 후 새 행의 숫자 4를 5로 변경. 이때 기존 행(15행)의 끝에 콤마를 붙여야 합니다.

11행을 복사해 그 바로 빝에 붙여넣은 후 새 행의 숫자 4를 5로 변경

하면 됩니다.