SIKI TISORY

◈ getElement ◈  • getElementHTML 요소의 Class, Name, Id, Tag 값을 이용하여 요소에 접근 • querySelectorCSS 선택자를 사용하여 요소에 접근 • getElement vs querySelector일반적으로 getElement가 더 많은 브라우저에서 지원되며 *속도가 빠르기 때문에 더 많이 사용되나, 성능보다는 개발의 편의성을 위해 querySelector를 사용하는 개발자도 있음 * HTML Collection vs NodeList ◈ getElement의 종류 ◈ • getElement의 종류id는 동일한 값을 가질 수 없기 때문에 getElement Tag, Class, Name은동일한 값을 여러 태그에서 가질 수 있기 때문에 getElements ..

◈ JavaScript ◈  • JavaScriptJavaScript는 브라우저에서 실행되는 언어로써 인터프리터 방식의 객체지향 프로그래밍 언어이다. • ES6ES란 JavaScript의 표준 규격을 의미 하는데, 이는 ECMA에서 정하게 된다. ES6은 가장 최근의 표준 규격으로써 JavaScript 개발 시 ES6 이상의 버전을 사용하는것이 권고됨 ◈ JavaScript 작성 방식 ◈ • inline자바스크립트의 코드가 매우 짧거나 간단한 용도로 사용해야할 때 HTML 태그 안에 직접 코드를 작성하는 방식  • internalHTML 태그 내에 직접 작성하는 것이 아니라, 를 별도로 작성하여 사용하는 방식. 자바스크립트 코드의 위치는 head, body 안에 작성 하거나 이후에 작성할 수 있음  • ..

◈ 와이어 프레임 ◈  • 와이어 프레임(WireFrame)UI/UX 기획 과정에서 진행되는 작업으로써 선(Wrie)을 이용하여 윤곽선(Frame)을 잡아 페이지의 구조를 보여주는 설계도로써 프로젝트의 초창기에 설계됨와이어 프레임을 도와주는 여러가지 툴들이 있지만, 실습 시 파워포인트 또는 drawio로 진행 • 장점1. 개발자 : 사이트의 기능을 시각적으로 보기 때문에 쉽게 이해할 수 있음2. 디자이너(퍼블리셔) : 디자인 컨셉을 명확히 잡아 구현할 수 있음3. 클라이언트 : 요구사항이 잘 전달되어 진행되고 있는지 확인할 수 있음 • 예시(drawio의 기본 템플릿)  ◈ 스토리 보드 ◈  • 스토리보드기획 과정에서 페이지의 전체적인 흐름(텍스트, 이미지, 등)이 어떻게 진행되는지 구체적인 내용들을 모..

◈ 애니메이션 ◈  • Animation애니메이션은 웹 요소들을 부드럽게 움직이거나 변화시키는 기능을 수행함*keyframe 외에도 다른 속성과 기능들이 있음 • 속성  ◈ 애니메이션 속성 ◈ • animation-name: [이름]애니메이션 이름 • animation-duration: [초]s애니메이션이 완료(0%  100%) 까지 걸리는 시간 • animation-timing-function: [속성값]애니메이션의 시간에 따른 변화 속도 • 속성값 종류1. linear : 처음부터 끝까지 일정한 속도로 진2. ease : (Default) 천천히 시작되어 빨라지고, 마지막에 다시 느려짐3. ease-in : 천천히 시작4. ease-out : 천천히 종료5. ease-in-out : 천천히 시작되어..

◈ 가상 클래스 선택자 ◈   • 가상 클래스 선택자특정 상태에 있는 요소를 선택하기 위해 사용 • 종류 • :active사용자가 활성화 한 요소 (버튼 클릭, 메뉴에서 특정 게시판 선택 등)  • :hover사용자가 마우스를 올렸을 때 • :focusinput 박스 등 입력칸이 포커싱 되었을 때  • :link한번도 방문한 적 없는 링크 • :visited방문한 적 있는 링크  ◈ 트랜지션 ◈  • 트랜지션(Transition)CSS의 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 해주는 기능 • 종류  • transition-timing-function  오늘은 가상 클래스 선택자와 트랜지션에 대해 정리를 해보았습니당 곧 세미 프로젝트 끝나는데 화이팅하고 공부 더 열심히하면서 블로그 업로드 해야겠..

◈ CSS 용어 ◈  • 컨테이너(container)요소들을 포함하고 있는 상위(부모) 요소 레이아웃을 구성하는 요소들을 묶어서 그룹화 하는 역할을 수행하며 이를 묶어주는 역할을 하는 요소를 컨테이너 라고 부름* 일반적으로 div, section, article, main 등의 요소에 많이 사용됨  • 아이템(item)레이아웃을 구성하는 요소 container 안에 포함된 각각의 요소들을 아이템이라고 부름* div, span, p 등 다양한 요소들로 구성할 수 있음  ◈ float ◈  • float각각의 요소들의 배치를 변경하여 다른 요소들과 어떻게 상호작용할 지 컨트롤 할 수 있는 속성 (다음 요소 위에 떠있게 함) • 참고float예전에 자주 사용되던 속성으로 최근에는 flexbox 또는 grid로..

◈ 블록 레벨 요소 vs 인라인 레벨 요소 ◈  • 블록 레벨 요소가능한 최대 가로 너비를 차지하여 한 줄 전체를 차지하는 요소 - 종류1. div2. p3. h1 ~ h64. ul5. li6. hr7. footer8. 등등... • 블록 레벨 요소 예시-1h3로 이루어져 있어 한 줄 전체를 차지하는 블록 레벨 요소 • 블록 레벨 요소 예시 - 2                                                                                                 필요하지 않은 영역까지 공간을 차지함 (블록 레벨 요소)   • 인라인 레벨 요소필요한 만큼만 공간을 차지하며 텍스트와 함께 표시되는 요소 - 종류1. span2. a3. strong4. e..

◈ 텍스트 색상 속성 개요 ◈  • 색상 속성 개요 텍스트의 색상을 지정하며 색상 이름이나 RGB값, HEX코드 등을 사용하여 지정 가능 • 사용 방법 ◈ 텍스트 색상 속성 방식 ◈ • 색상 이름red, blue, green과 같이 색상의 이름을 영어로 직접 작성하여 사용하는 방식 • RGB 값0부터 255까지의 숫자로 각 성분의 강도를 나타내며, 투명도 또한 설정 가능 • HEX 코드16진수의 값으로 색상을 표현하는 방식이며 # 기호로 시작함 ◈ 배경 색상 속성 ◈ • 배경 색상 속성 개요 배경의 색상을 지정하며 색상 이름이나 RGB값, HEX코드 등을 사용하여 지정 가능 • 사용 방법기본적인 사용 방법은 텍스트 색상 속성과 동일하다   ◈ 글꼴 속성 ◈ • font-family폰트의 글꼴을 설정해주는..

◈ CSS ◈  • CSS(Cascading Style Sheets)HTML을 꾸며주기 위해 사용되는 마크업 언어 • 기본 구문  ◈ CSS 작성 방식 ◈ • inline 스타일HTML 요소의 style 속성을 사용하여 직접 CSS 스타일을 지정하는 방식 • 내부 스타일 시트HTML 문서의 head 태그 내에  • 외부 스타일 시트 (사용 권장)CSS 스타일을 별도의 외부 파일로 만들고, HTML에서 link 태그를 사용하여 파일을 연결하여 사용하는 방식 ◈ CSS 선택자 종류◈    • 참고고유성 충돌 방지를 위해 적절한 선택자를 사용해야 함 * 고유성 충돌 : 동일한 스타일을 적용하는 여러 선택자가 있을 때 발생하며, 이를 해결하기 위해서는 선택자를 고유하게 만들거나 우선 순위를 조절해야 함  ◈ C..

◈ input 태그 ◈  • input 태그사용자로부터 입력을 받을 때 사용 • type 속성입력 필드의 유형을 지정하는 속성으로써 텍스트 입력 필드, 체크박스, 라디오 버튼 등을 지정할 수 있음 • type 속성의 유형1. text  2. password  3. checkbox  4. radio  5. email  6. number  7. hidden  8. …  ◈ input 태그 속성 ◈   ◈ button 태그 ◈   • button 태그사용자와 상호작용을 할 수 있는 버튼을 생성 • type 속성버튼의 유형을 지정하는 속성으로써 일반 버튼, 제출 버튼, 리셋 버튼 등을 지정 • type 속성의 유형1. button  2. submit  3. reset ◈ button 태그 속성 ◈  ◈ form..