네이처리 노트

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🎀 Transition 속성을 서서히 변화시킵니다. display는 block & none 일 때, transition이 적용되지 않는다! 하지만 시각적으로만 숨김으로써 적용할 수 있습니다. reference 1,2 참고 ≫ transition-timing-function : transition의 진행 속도를 조절합니다. ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( n, start|end ) | cubic-bezier( n, n, n, n ) | initial | inherit ex) 모달 효과 (opacity로 적용해보기) .cu..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🎀 가상셀렉터 Focus 아웃라인 제거하기 input:focus, button:focus, textarea:focus, select:focus { /* 가상셀렉터를 가지는 요소 */ outline: none; } 🎀 마우스 클릭이벤트 pointer-events : none; none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다. auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다. inherit : 부모 요소로부터 pointer-events 값을 상속받는다.Option 🎀 텍스트 효과 element { user-select : auto; /* 드래그나 더블클릭시의 효과..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🎀 Position 태그를 어떻게 위치시킬지를 정의한다. ▽ 기본값 div.static { position: static; } ▽ 기본적으로 표시된 위치(본래위치)를 기준으로 새로운 위치를 지정 할 수 있습니다. top이나 left로 새로운 위치를 지정하지 않는 이상 표시된 위치와 다르지 않습니다. div.relative { position: relative; left: 100px; top: -100px; } ▽ 지정된 부모 요소(static아닌 다른값)를 기준으로해서 fixed 시키는 것과 같다고 생각하면 됩니다. div.parent { position:relative; } div.child { position:absolute; ..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🎀 폰트 앞에 입력한 폰트를 우선 적용한다. 컴퓨터에 지정된 폰트가 설치되어 있지 않을 경우, 뒤에 입력한 폰트가 적용된다. font-family: 'Roboto', sans-serif; font-family: 'Noto Sans KR', sans-serif; 폰트 색상 color: #000000; /*퓨어 검정*/ color: #555555; /*연한 검정*/ color: rgb(100,100,100); /*RGB 코드*/ color: aqua; /*웹 브라우저에 지정된 색상*/ 폰트 두께 font-weight: lighter /*100(최소)*/ font-weight: normal /*400*/ font-weight: bold ..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🎀 기본 선택자 *{ } /*전체 선택자*/ div{ } /*태그 선택자(태그명을 정확하게 표기)*/ .classname{ }/*클래스 선택자 (classname변경가능)*/ #idname{ }/*ID 선택자 (idname변경가능)*/ 🎀 복합 선택자 하위선택자와 자식선택자 div ul {} /*하위선택자: 해당하는 모든 하위요소*/ div>ul {} /*자식선택자: 바로 아래 자식요소*/ 조금 더 자세히 설명하자면 여기서 확실하게 해야할 것은 div가 여러개 이므로 부모div를 정확하게 명시해줘야한다. /* CSS */ div.eric>ul 인접형제선택자와 일반형제선택자 div+ul {} /*인접 형제 선택자: div를 뒤따르는 ..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 input button은 스스로 닫는 태그 (열린태그) button은 스스로 닫지 않는 태그 하위 요소를 추가할 수 있다. 디자인 측면에서도 자유도가 더 높아진다. 이것을 클릭 해보세요 input의 한계를 넘기 위해 나온 것이 button이다. Reference 1) 버튼에 타입을 쓰는 이유 버튼에 타입을 쓰는 이유 (button type="button") 프롤로그 가끔 이렇게 type을 명시한 버튼을 마주칠 때가 있는데 전 항상 궁금하더라구요. "아니 버튼이면 버튼이지 버튼 타입 버튼은 대체 뭐람" 그러고보면 비슷하게 타입을 명시하는 이라는 nykim.work 2) input과 button의 공통점과 차이점

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🔮 양식 form과 속성 웹서버에 정보 제출하기위한 양식 범위 input과 속성 사용자에게 입력 받을 데이터 양식 type에 따라 위의 속성이 다르게 사용된다. input type의 종류는 아래와 같다. 같은 name 속성 그룹 내 하나만 선택 가능 가려지는 양식 이미지 제출 버튼, 처럼 사용 보이지 않지만 전송할 양식, value 속성으로 값을 지정 해당 범위 내 모든 양식 해당 범위 내 고유한 양식 ▶input file 일 때, 파일가져오기 버튼 이미지 변경하기 (CSS) ▶input file 일 때, 이미지 미리보기 (JS) ▶input text 일 때, 검색창으로 활용하기 (JS) label과 속성 라벨 가능한 요소의 제목 ..

공부하면서 나름대로 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🔮 콘텐츠 구분 1부터 6단계가 있고, 숫자가 낮을 수록 높은 단계의 제목 로고, 제목, 검색을 포함 작성자, 저작권, 관련문서를 포함 독립적으로 구분, 재사용 가능한 영역 문서의 일반적인 영억, h1~을 포함하여 식별 문서의 별도 콘텐츠, 광고나 링크 사이드바 다른페이지 링크 제공, 메뉴, 목차, 색인 아무것도 나타내지않는 콘텐츠 영역, 꾸미는 목적 🔮 문자 콘텐츠 정렬된 목록, 순서 및 중요도를 알수있음 (Ordered List) 정렬되지 않은 목록 (Unordered List) 목록 (List Item) ol과 ul은 자식으로 li만 포함가능 1번은 토마토입니다 2번은 고등어입니다 하나의 문단 (Paragraph) 문..

공부하면서 나름대로 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🔮 Doctype Web에게 HTML버전을 알려주는 코드 ( Visual Studio 기준, 자동으로 최신버전 html5 실행됨) // 최상단에 작성한다. 🔮 옵셔널태그 (주요 범위) HTML파일의 구조가 눈에 잘 들어오게 한다. 필수는 아니므로 사용하지 않아도 무관. 태그의 고유 속성들은 실행하는데 문제없음. // html 문서 범위, head 와 body를 담고있음 // 문서 정보를 설정 (스크립트문서 실행 외 다수) somthing // 문서 구조를 설정 (보여지는 부분) ... 웹사이트 제목 ... Reference 메타태그(META TAG) 속성정리 및 사용 방법 검색엔진 최적화(SEO)를 위한 메타태그의 속성에 ..