1. HTML 양식 작성 MS Visual Studio Code 에서 ! 만 누르면 아래에 자동으로 Emmet ~ 이 나옴. 이렇게 해서 HTML 코드를 빠르게 생성! 2. 태그 작성 div 누르고 tab 키 누르면 자동으로 태그가 생성됨 클래스는 . 아이디는 # 을 이용하면 자동으로 생성됨! 3. 부모, 자식, 형제 노드 div>ul>li 입력 후 tab 키 div>ul+ol 입력 후 tab 키(형제노드) 상위에 추가하고 싶을 경우: div>ul>li^ol: ol 태그를 ul 태그와 같이 입력하고 싶을때 ^ 이용. 4. 그룹화 하기 div>(header>ul>li2>a)+footer>p* 입력 후 tab 키 5. 텍스트 입력하기 p{hello} 입력시 hello 6. 자동 번호 넣기 p.class${i..
Material Theme Material Icon Theme Prettierctrl + shift + p > settings 검색 후> prettier quote 검색 > JavaScript › Preferences: Quote Style 을 Single 로 변경 윈도우에서는 ctrl + 를 이용해 설정함 ctrl + shift + p > settings 검색 후> prettier quote 검색 > JavaScript › Preferences: Quote Style 을 Single 로 변경 4. bracket pair colorizer: 괄호에 컬러감을 줌으로써 코드의 가독성을 높여줌. 5. indent rainbow: 들여쓰기 된 부분이 rainbow 되어 한눈에 알아보..
CSS(Cascading Style Sheet) Cascading 의 개념: 정의된 세부적인 정의가 있다면 그걸 사용하고, 정의되어 있는게 없다면 다음 기본으로 지정된 것으로 넘어가는 개념 Flexbox: box 와 item 들을 자유자재로 사용할 수 있게 해줌! 2가지만 이해하자 ① Flexbox는 container(box) 에 적용 될 수 있는 것과 각각의 item 에 적용될 수 속성들이 따로 존재한다. container 에 적용 할 수 있는 속성들: display: display: flex 라고 해야 flex box로 사용 가능! flex-direction: 기본값은 row(왼→ 오 로 감), row-reverse(오→왼), column( 위→아래), column-reverse(아래→위) flex-..
1. semantic Tags - 너무 div 태그만 사용하지 말고 아래처럼 의미있게 써보자!!! 2. vs : 블로그에서 포스트 1개, 신문기사에서 기사 1개 자체를 묶을때. 자체만으로 독립적으로 다른 페이지에 보여줬을 때 전혀 문제 없을 때 사용. =⇒ 메인 안에 있는 다른 내용들과 전혀 상관 없이, 독립적으로 고유한 정보를 나타낼 때 사용 : article 안에 서로 연관있는 내용들을 묶어 주고 싶을 때. 3. vs 화면 같으면 읽을때는 최애!! 를 강조하게 됨. 즉, : 시각적으로만 이탤릭 체로 변환됨. 별다른 의미 없음! (ex. 책의 제목, 인용구) : 강조하는 이탤릭채. 4. vs : 시각적으로만 볼드체. : 정말 중요한 볼드체! 5. vs vs : 순서가 중요함. : 순서가 없는 목록을 나..
1. : 요소의 정보나 설명을 지정 2. : 요소에 적용한 스타일(CSS) 지정 3. : 요소를 지칭하는 중복 가능한 이름 4. : 요소를 지칭하는 고유한 이름 5. : 요소에 데이터를 지정
요소 내용 내용 text: 사용자에게 일반 텍스트를 입력 받을 때 사용 checkbox: 사용자에게 체크 여부를 입력 받음 요소가 화면에 출력되는 특성: 인라인 요소, 블럭 요소 1. 인라인(Inline) 요소: 글자를 만들기 위한 요소들 a. span: 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 요소가 수평으로 쌓임. 포함한 콘텐츠 크기만큼 자동으로 줄어듬. ex1) Hello //width: 요소의 가로 너비를 지정하는 CSS 속성 ex2) Hello //height: 요소의 세로 너비를 지정하는 CSS 속성 ex3) Hello //margin: 요소의 외부 여백을 지정하는 CSS 속성 ex4) Hello //padding: 요소의 내부 여백을 지정하는 CSS 속성 인라인 요소(ex. s..
DOM API: 자바 스크립트에서 HTML 을 제어하는 여러 가지 명령어 Box!! let boxEl = document.querySelector('.box'); console.log(boxEl); // HTML 요소(Element) 1개 검색/찾기 const boxEl = document.querySelector('.box'); // HTML 요소에 적용할 수 있는 메소드 boxEl.addEventListener(); // 인수(Arguments)를 추가 가능 boxEl.addEventListener(1, 2); // 1 - 이벤트(Event, 상황) boxEl.addEventListener('click', 2); // 2 - 핸들러(Handler, 실행할 함수) boxEl.addEventListene..
- 부트스트랩 이란? CSS 모음집! - HTML 에서 부트스트랩 import 하는 방법 --> 아래의 코드를 태그 안에 넣어준다. - 부트스트랩 컴포넌트 가져오기 https://getbootstrap.com/docs/4.0/components/alerts/ Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. getbootstrap.com
드림코딩 엘리님 강의를 듣고 알아본 것! Material Theme Material Icon Theme Prettierctrl + shift + p > settings 검색 후> prettier quote 검색 > JavaScript › Preferences: Quote Style 을 Single 로 변경 윈도우에서는 ctrl + 를 이용해 설정함 4. bracket pair colorizer: 괄호에 컬러감을 줌으로써 코드의 가독성을 높여줌 5. indent rainbow: 들여쓰기 된 부분이 rainbow 되어 한눈에 알아보게 함. 6. auto rename tag: HTML 편집 시 도움을 줌. ex) 태그 변경시 앞 태그를 바꾸면 뒷 태그도 자동으로 변경됨. 7. cs..
