Frontend

웹 문서의 뼈대웹 문서의 제목, 이미지, 동영상, 문단, 표, 등을 정의하고 그 구조와 의미를 부여하는 정적 언어웹 문서를 꾸미는색상, 레이아웃, 크키, 폰트 등을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어사용자 동작에 반응하는콘텐츠를 바꾸고 움직이는 등 페이지를 동적

Hyper Text Markup Language하이퍼텍스트 마크업 언어프로그래밍 언어가 아닌 표현 언어이다.Hyper Text : 링크(Link)Markup Language : 태그(Tag)를 사용해서 문법을 표기하는 언어 \- 마크업을 사용하는 언어 : SGML,

Cascading Style SheetsHTML에 서식을 지정하는 언어독립 실행 불가능하다. 반드시 HTML 문서가 있어야 CSS 실행이 가능하다.h1 : 셀렉터{ color: color: color : 속성blue : 값셀렉터, 속성, 값을 조합해 어디에, 무엇을,

선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있다.💭 여러 개의 선택자를 적용할 때는 ,(쉼표)를 사용한다.태그명특정한 하나의 태그를 선택할 때 사용ID는 유일태그명 생략하든 말든 결과가 같다..exampl

HTML과 CSS를 축약어(Abbreviation)로 빨리 입력하게 해주는 확장 플러그인CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성하는 기능입력하고 ctrl+Space키 또는 Tab키 누른다.하위요소 (>)동급 요소(+)하위요소 빠져나가기(^)반복

반드시 단위 표기를 해야 한다.0을 입력하는 경우 단위를 입력하지 않아도 된다.HTML에서 단위를 안 붙이는 경우 자동으로 px 적용된다.상대 크기상대 크기1배 = 1em = 100%1.5배 = 1.5em = 150%절대 크기Color Name RGB Color(DEC

태그가 화면에 보이는 방식을 지정하는 속성요소를 화면에 출력하는 방식요소의 원래 영역도 사라진다.💭 div태그 block 형식, span태그 inline 형식💭 inline 형식 vs inline-block 형식width, height, margin 차이inline

HTML5 시대가 되면서 플래시와 같은 플러그인의 도움 없이 웹 브라우저에 3차원 공간을 구현할 수 있게 되었다.HTML5에서 3차원을 구현하는 방법자바스크립트를 사용한 WebGLCSS3을 사용한 3차원 변환대부분의 컴퓨터 프로그램은 화면 좌표를 사용한다. 화면 좌표는

브라우저마다 기본적으로 제공하는 요소에 따른 스타일의 기본값이 다르다.📌 브라우저에서 제공하는 기본 스타일을 초기화 하는 방법 직접 디자인 1\. 있는 그대로 2\. Reset CSS 3\. Normalize CSS 디자인 프레임워크BootStrap등등..아래

CSS에서는 신문과 같이 여러 개의 칼럼(column)으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있다.속성 |!codepenemyixolz-the-styleful/embed/ZErMXQK?default-tab=css%2Cresult

JavaScript 기초를 학습한 내용입니다.

JavaScript 데이터 타입에 대해 학습한 내용입니다.

JavaScript 연산자에 대해 학습한 내용입니다.

JavaScript Window, BOM, DOM에 대해 학습한 내용입니다.

Event Handling(이벤트 처리)

DOM 1 > 숫자키를 누르면 하단의 박스(div)안에 이미지를 생성하시오. 상단 숫자키 사용 가능 우측 숫자키패드 사용 가능 > > DOM 2 >색상과 이름을 입력하면 테이블에 추가하시오. DOM 3

JavaScript var, let, const, Scope에 대해 학습한 내용입니다.

JavaScript 이벤트 버블링, 이벤트 캡처링(이벤트 터널링)에 대해 학습한 내용입니다.

ex49 !codepen[emyixolz-the-styleful/embed/dydabOW?default-tab=js%2Cresult] ✅ 마우스 우클릭 금지 방법 >oncontextmenu = "return false" : 우클릭 방지 onseletstart = "return false" : 마우스 드래그 방지 ondragstart = "return ...