[All] 탭 구성하기(list 내부의 탭)

-


여러 종류의 탭이 있지만,
이번 형태는 탭에 들어가는 컨텐츠가 버튼과 별도로 분리되어있지 않고, list안에 버튼과 함께 존재하여 position 값으로 위치를 잡아주는 것입니다.

설명하기가 힘드리기가 힘들어 아래의 코드를 봐주시면 됩니다.


댓글

댓글 쓰기

이 블로그의 인기 게시물

[CSS] 마우스 hover 시, transition을 이용해 배경색 채우기

-
블로그를 옮기고 첫번째 글입니다. 차근차근 코드들을 옮기고, 수정작업을 거칠 것입니다. 이번 내용은 css만으로, 움직임효과를 내는 것인데요. 마우스를 태그에 올렸을때, 왼쪽에서부터 오른쪽으로 배경색이 차는 듯한 효과를 낼 수 있습니다. 아래의 코드를 통해 자세한 사항이 확인 가능합니다. See the Pen jGxKpm by eunjun ( @eunjin10914 ) on CodePen .
자세한 내용 보기

[HTML5] 웹 접근성/ 기본 언어 명시하기

-
HTML5에서 기본언어를 명시하는 것은  화면 낭독 프로그램이 언어를 인식해 자동으로 음성 변환을 하거나, 선택된 언어에 적합한 발음을 제공하기 때문에 필요한 작업입니다. 아래와 같이 HTML5를 구성할때 html 태그에 명시하시면 됩니다. < ! DOCTYPE html > < html lang = "ko" > //이곳에 명시합니다. < head > < meta charset = "UTF-8" > < title > < / title > < / head > < body > < / body > < / html > 언어별로 속성값이 다르며, 자주 사용하는 한국어, 영어, 프랑스어, 독일어, 중국어, 일본어는 아래에 표기해두었습니다. 한국어(ko) 영어(en) 프랑스(fr) 독일어(de) 중국어(zh) 일본어(ja)  그외의 언어는 하단의 링크를 참조해주세요. https://www.w3schools.com/tags/ref_language_codes.asp
자세한 내용 보기

[CSS3] CSS3를 이용해 input range 스타일링하기

-
HTML5 요소를 이용해, 손쉽게 range 을 조절할 수 있습니다. input element 의 type="range" 을 이용해서 말이죠. 물론, 최신 기술이다보니.. IE는 9버전 이상부터 지원합니다. 이 range 태그는 브라우저별로 상이하게 보이며, 미적으로도 평범? 하기때문에 수정이 하고싶다는 생각이 드실 수 있습니다. 그럴때는 CSS를 통해서 변화를 주실 수 있습니다. input[type=range] { -webkit-appearance : none ; /* 기본슬라이드 숨기기*/ width : 100% ; /* Firefox에서는 특정한 넓이가 필요*/ background : transparent ; /* Chrome에서 투명하게 출력 */ } input[type=range] ::-webkit-slider-thumb { -webkit-appearance : none ; } input[type=range] :focus { outline : none ; /* input range에 포커스 되었을 경우 기본 블러처리 제거 */ } input[type=range] ::-ms-track { width : 100% ; cursor : pointer ; /* IE에서 기본슬라이드 숨기기 */ background : transparent ; border-color : transparent ; color : transparent ; } 아래의 코드를 보면서 설명하겠습니다. See the Pen input range styling by jemaime ( @eunjin10914 ) on CodePen . 실질적인 CSS들은 많지 않은데, 크로스브라우징에 맞춰 속성을 주다보니 길어졌습니다. 접두어들이 붙으며 헷갈릴 수 있으니 잘 구분해서 사용하시길 바랍니다. 아래는 제가 참고한 참고사이트입니다. 제...
자세한 내용 보기