오물오물 개발일기

Vanilla JS를 이용한 DropDown Menu 만들기 - 선택창이나 메뉴를 숨길시 필요한 DropDown 형식의 메뉴 - dropdown__toggle 을 클릭시 dropdown__items 에 show라는 클래스가 추가된다. .dropdown__items { max-height: 0; overflow: hidden; border: 1px solid rgba(224, 226, 231, 0.75); border-radius: 3px; transition: max-height 300ms ease-in-out; } .dropdown__items.show { max-height: 100vh; } - dropdown__btn 을 클릭 하면 dropdown__toggle에 선택 메뉴가 표시되고 dropdow..

Vanilla JS를 이용한 Tab Menu 만들기 - 자주 쓰이고 기본적인 TabMenu 만들기이며 기본 원리는 탭에 따른 내용은 display : none -> block .tab-container__item.active { border-bottom: 2px solid #369fff; } - 메뉴가 선택 될 시 active라는 클래스를 추가적으로 가지며 border-bottom에 변화를 준다. .content-container__content { display: none; } .content-container__content.target { display: block; } - 메뉴 선택시 해당하는 content에 target라는 클래스를 추가적으로 가지게 하고 display를 활용하여 표시한다. Ta..

* title 문서의 대제목을 나타낸다. 검색 최적화(SEO)에 제일 중요하다. 키워드를 단순히 나열하는것은 좋지않다. 페이지마다 맞게 변경해준다. 무엇에 관한내용인지 적어준다. hi * link 외부와 리소스를 연결할때 사용한다. rel attribute를 사용하여 요소와의 관계를 명시해두는것이 좋다. * 관련 링크 https://developer.mozilla.org/ko/docs/Web/HTML/Element/link : 외부 리소스 연결 요소 HTML link 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. link는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있 developer.mozilla.org * scri..

* abbr 준말이나 머리글자를 나타낸다. title attribute를 사용하면 전체 뜻이나 설명을 제공할 수 있다. 상당수의 미군들은 외상 후 스트레스 장애 즉, PTSD로 인한 고통이 심각하다. * address 지리적위치, 경도, 위도, 메일, URL, 전화번호, SNS 등의 주소를 나타낼때 사용한다. href attribute를 통해 연락 링크를 걸 수 있다. molly.daleo3o@gmail.com 010-1234-5678 * pre 작성자가 표시한대로 표현이 된다. console.log("hello");

* table 엑셀과같은 표 형식을 만드는 태그 table, tr, th, td로 구성된다. tr : 테이블 세로줄을 의미한다. th : 타이틀을 명시할때 사용한다. td : 테이블 한셀의 데이터를 명시한다. rowspan과 colspan을 이용하여 셀병합을 한다. scope attribute를 사용하여 row, col value를 사용하여 명확히 명시 할 수 있다. , 월 화 수 목 금 1교시 HTML CSS Web MySQL node.js 2교시 HTML 3교시 Web의 역사 Web의 역사 점심시간 4교시 CSS node.js 컴퓨터 공학이론 Javascript Javascript 5교시 MySQL 컴퓨터 공학이론 6교시

* button 버튼기능을 하는 태그 submit : 폼양식을 제출하기 위한 type button : 단순 버튼의 기능을 하며 보통 Javascript와 연동을 하여 event를 발생시킨다. reset : 입력값을 초기화하기 위한 type * 과 똑같은 기능을 한다. 하지만 열고닫는 태그사이에 이미지등의 커스텀적인 부분이 좀더 가능하다. 물론 input또한 가능함으로 어느 태그를 쓰느냐의 차이는 없는듯 하다.

* textarea 많은 내용의 텍스트를 받기 위해 사용된다. (글 제목, 본문내용 등등) name, placeholder 등의 attribute를 사용 할 수 있다. rows(줄) cols(칸) attribute를 사용하여 사이즈를 수정 할 수 있으나 css에서 대부분 변경을 한다.

* select & option 드롭다운 형식의 선택지를 제공한다. select 태그에 name attribute를 부여한다. multiple attribute를 사용하면 여러가지의 선택지를 받을 수 있다. HTML CSS JS submit

* radio 선택지 중에 한가지만 고를 수 있다. 연관된 선택지의 경우 name을 일치시키며 각 선택지에대한 value값을 부여한다. 구독 미구독 확인 * checkbox 선택지중 다중선택이 가능하다. radio와 마찬가지로 연관된 선택지의 경우 name을 일치시키며 각 선택지에 value값을 부여한다. 사과 바나나 메론 확인

* input 사용자가 정보를 입력하고 입력을 받기 위함 의 형식으로 type attribute를 무조건 기재를 해야한다. type : text, email, password, number, file, tel, button, submit .... type 이외에도 value(초기값)나 required, disable(사용불가).. 등등 있으나 필수는 아니다. * placeholder : input창에 띄어놓는 문구로 클릭시 사라지게된다. (안내문구) minlength : 최소 문자 길이를 제한한다. maxlength : 최대 문자 길이를 제한한다. required : 필수적으로 받아야하는 input창에 요청을 한다. submit * 이메일 형식에 맞는 input을 받을 수 있다. submit * type..