HTML/CSS/JAVASCRIPT

HTML > 페이지의 제목, 문단, 표, 이미지, 동영상등 웹의 구조를 담당 홈페이지의 뼈대를 담당 CSS > 실제화면에 표시되는 방법(색상,크기,폰트,레이아웃등)을 지정해 콘텐츠를 꾸며 주는 시각적인 표현을 담당 홈페이지에 살을 붙여줌 JS > 콘텐츠를 바꾸고 움직이는등 페이지를 동작시키는 동적 처리를 담당 홈페이지에 뇌!

HTML의 기본문법은 아래와 같다태그와 태그 사이에 내용을 추가하면 되며 태그에 속성을 주고싶을경우이처럼 시작태그에 속성(attribute)와 값(value)를 추가 해주면 기능이 확장 될수 있다.

각 태그간에 요소관계에 대해서 알아보자. > 1번 class를 부모요소 2번 클래스를 자식요소 라고 한다. 당연히 2개만 나오면 좋겠지만 여러가지 예제를 봐도 단 2개만 쓰는 경우는 드물다. > 위와 같다면 3번 4번 은 형제요소로 볼수있으며 3,4번에게 1번은 조

요소가 화면에 출력되는 특성을 가진 글자와 상자를 알아보자인라인(inline) 요소란? 글자를 만들기 위한 요소인라인(inline)요소의 대표로는 span 태그가있다이처럼 html 에서 작성을 해보았고 실행 해본결과 위 처럼 문구가 나왔다 뭔가 2줄로 작성을 했지만 한

블록(block) 요소란?상자(레이아웃)을 만들기 위한 요소를 뜻함블록의 대표적인 요소로는 div 태그가 있다위와 같이 블록(block)을 작성해 보았고 실행결과위처럼 결과가 나왔고 코드에 작성한대로 2줄로 나오게 되었다.이유는 인라인(inline)과는 반대로 수직으로

HTML을 작성하기 앞서 사용중인 VS코드의 !+tab을 하면 나오는 기본코드이다처음 위와 같은 코드를 접했을때 정말 이게 무슨소리 인가 ... 싶었다하나하나 천천히 풀어보면이외에도 css를 연결할때 쓰는 link 태그 style태그 JAVASCRIPT를 가져오는 경우

주석이란 코드를 작성할때 알아보기 쉽게 하기위해서 작성하는 메모 같은 역활을 한다. 작성 방법은예를 들어 1번보다 2번이 한눈에 어디에 뭐가있는지 알아보기 쉽다. 이처럼 주석을 달면 한눈에 알아보기 쉽고 오류가 발생하거나 변경하고싶은 부분이 있다면 쉽게 찾아서 변

전역속성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성으로 대표적으로 style, class, id등 이 있다.1\. style : 요소에 적용할 스타일을 지정(css 파일을 따로 만들지 않을시)2\. class : 요소를 지칭하는

제목처럼 css 와 HTML연결을 굳이 하지않고 HTML태그에 style 속성을 줘서 조절하는 방법도 있지만 그렇게 하면 코드가 난잡해지기 때문에 HTML의 head 부분에 CSS를 미리 연결해서 사용한다.연결방법은 link 태그를 이용하며이처럼 작성하면 되는데 rel

CSS 기본문법은 아래와 같다이런식으로 작성하면 된다.이렇게 작성이 되어있을경우 이렇게 나온다!

\* : 전체 선택자 -> 모든 요소를 선택tag 선택자 : 태그 이름선택자-> 태그이름 요소를 선택.name : 클래스 선택자 -> class 속성의 값이 name인 요소를 선택span.num_1{color:red;} -> span태그중 id 값이 num_1인 요소

복합선택자일치 선택자(Basic Combinator) : 두 가지 조건을 동시에 만족하는 요소 선택자식 선택자(Child Combinator) : ~의 자식 요소 -를 선택\*자식요소 : 특정 요소 바로 아래에 속한 요소후손(하위) 선택자(Descendant Combi

선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다. 사용방법 >  대표적인 종류 > :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를

CSS도 연결한 이후 자바스크립트 연결 방법에 대해서도 알아보자자바스크립트 연결의 경우 크게 3가지 경우가 있으며 각 위치에 따라서 차이가 존재 한다1) HTML코드와 분리 되어있어서 유지 보수가 쉽다.2)자바스크립트 파일이 캐시(자주사용되는 파일이나 데이터를 미리복사

이벤트란 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 1) 마우스 이벤트click: 요소에 마우스를 클릭했을 때 이벤트가 발생dbclick: 요소에 마우스를 더블클릭했을 때 이벤트가 발생mouse

사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것 => '이벤트 핸들러''이벤트 핸들러'는 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리 인라인 방식 & 고전방식 : DOM Level 0 / 단점 : 동일한 객체에 동일한 이벤트

1.함수를 우선 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블럭으로 이해하면 된다.2.함수를 우선 지시사항들의 묶음(과정)으로 이해하면 된다.3.함수는 재사용 가능한 영역을 정의하고, 정보영역을 캡슐화하는데 사용되는 구문이다. (여러번 호출 가능)4.일반적으로