헤더 네비게이터 인터렉션 구현하기

0. 개요 해더를 누르면 해당 페이지로 바로 가는 웹 페이지 예시를 만들어 보았습니다 1. HTML 구조 우선 웹 페이지의 기본 구조를 HTML로 작성합니다. 페이지 상단에 네비게이션 바(header)가 위치하고, 이어서 본문(content) 부분으로 나누었습니다. first second third fourth " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스

티스토리 스킨 자작 (0.4v)

드디어 방학을 하고 뭘 할지 고민해봤는데 초심으로 돌아가서 바닐라를 공부하다가 삘이 딱 꽃혀서 블로그 스킨을 만들기로 했다 근데 쉬울줄 알았는데 생각보다 만드는 난이도가 있어서 어려웠다 이 블로그에 바로 적용시키는건 쫌 그런거 같아서 테스트용 블로그를 만들어서 거기서 만들었다 https://sooooooohwan.tistory.com/ 티스토리는 제발 치환자좀 어떻게 해줘

html+css 로 인터랙션 사이드바 만들기

티스토리 스킨을 제작하는데 사이드바와 네비게이션을 어떻게 짜면 좋을까 에대한 디자인적인 아이디어가 없어서 웹사이트를 검색하면서 찾아보는데 어딜가도 내가 원하는 깔끔한 인터랙션을 가진 사이드바가 없어서 내가 직접 만들었다 하루정도 찾아본 결과 해외 사이트에서 책갈피 효과같은 꽤 멋진 인터렉션을 가진 사이트를 찾았는데 보고 이런식으로 만들면 멋질꺼 같아서 바로 만들어 봤다 밑에는 html코드인데 따라 해보기 쉽게 가장 간단한 구성요소로만 만들었고 아래 css는 복잡하니까 나중에 디자인 수정을 쉽게 하기 위해서 위쪽으로 색상코드나 크기등을 변수로 조정할수 있게 만들었다 :root{ /* memu */ /* size */ --memu--width:280px; --memu--interval:40px; /* col..

html input 타입 속성 종류

속성 input에는 다양한 속성들이 있는데 html5에 들어오면서 20개가 넘는 속성이 있는걸로 알고있다 type(필수 속성) 1.text(기본값) : 텍스트를 입력받는 칸 2.password :text 속성값과 같지만, 문자를 숨겨서 표시(별표 처럼) 3.button : 버튼을 만듦 (button태그가 따로 있는데 조금 다르다) 4.checkbox : 체크박스를 만듦 (여러개를 다중 선택 가능) 1 2 3 4 5.radio : 라디오 버튼을 만듦 (한가지만 선택 가능) Apple Banana 5.button : 버튼을 만듦 (button태그가 따로 있는데 조금 다르다) 6.submit : 전송 버튼을 만듬(input태그로 쓰여진 정보들을 전송) 7.reset : 재설정 버튼을만듦(input태그에 쓰여진..

html 에디터 추천 (vsCode)

1줄요약 : 점유율 1위! 많은 기능! 가볍다! 무료! html과 관련된 글들을 쓰기에 앞서 내가 가장 많이 쓰고 친구들에게도 추천해주고 있는 에디터를 추천해줄까하는데 c언어 등에서 Visual Studio를 다루어 봤다면 더 익숙하게 들릴수도 있는 이름인데 바로 Visual Studio Code 라는 에디터 이다. (줄여서 약칭으로 vsCode 라고 많이 쓴다) 바로 이 에디터에 장점을 말해보자면 크게 4가지 정도가 있다고 생각하는데 vsCode에 장점 1. 메우 가볍다. vsCode는 Visual Studio같은 컴파일러가 기본적으로는 없기 때문에 설치나 제거가 빠르고 다른 에디터 보다 더 가볍다는 느낌이 많이 든다(물론 이 점때문에 c 처럼 컴파일링이 필요한 경우에는 별로도 컴파일러를 설치해줘야 한..

html input

3줄 요약 개념 : html에서 사용자에 입력값을 종류별로 받을수 있게 해주는 태그 html을 배우는 초반에 가장 강력하고 자주 찾게되는 태그 속성과 타입에 종류가 많아서 그때그때 찾아보는게 편한 것 같다(쓰다보면 외워짐) 시작하기에 앞서 input태그는 초반에 배우는 다른 태그들 보다도 훨씬 속성이 많고 필요한 기능마다 대응하는 타입을 활용하는 법을 알아야 하기 때문에 처음엔 조금 어렵다고 느낄수도 있다. 하지만 input태그는 실제로 많이 쓰이고 있고 다른 사이트들을 보아도 여러 쓰인 예시들을 볼수 있는데 가장 흔하게 찾아볼수 있는곳에서 예시를 찾아보면 네이버 검색창들을 예로 들수 있다 저 이미지에 해당하는 검색창에 코드를 찾아보면 보다시피 input 태그로 이루워져 있는것을 알 수 있다. 그런데 이..