HTML , CSS , JS

html : 배우 역할로써 웹에서 보여주는 글, 이미지등을 보여준다.1) html창에 글자를 적어도 미리보기 화면에 나오지만브라우저가 인식하지 못한다. 브라우저가 인식할 수 있도록 하려면 태그라는걸 만들어서 안에다가 글자를 작성 해야한다.2) div 태그 특징메모

body 크기는 화면 크기에 비례한다.html 문서는 DOCTYPE이 선언되어야 한다.(codepen은 코드를 쉽게 작성하기 위한 에디터이기 때문에 DOCTYPE이 선언된 상태로 숨겨져 있다.) html 문서는 크게 head와 body로 구분되어 있다.head : ht

display 알고 가기1.사람이 태어날 때부터 머리카락과 눈알을 가지고 태어나는 것 처럼 태그도 기본적으로 너비, 높이, 배경색, 뭔지모를 display도 가지고 태어난다. display는 사람의 성별처럼 정체성을 나타내는 속성이라고 생각하면 된다.block :

상위엘리먼트와 하위엘리먼트를 부르는 명칭 상위엘리먼트와 하위엘리먼트를 부르는 명칭

nth-child : 여러개의 요소를 생성하고 각 요소에 따로 속성을 부여할 때 사용이미지에 30개의 div태그를 만들었다.css에 div태그를 사용하면 전체적으로 적용되서 각각의 요소에 적용하려면 class나 id를 사용해야 하지만 div: nth-child {}를

하이퍼링크 → 사이트로 이동가능한 형태특징1) 클릭해서 이동할 수 있는 형태를 만들어줘야 한다.2) a태그에는 target이라는 속성이 기본적으로 들어있고, \_self라는 값이 기본값이다. \_self는 내가 보고있는 페이지가 바뀌면서 사이트 이동3) \_blank는

1) 화면 상에서 객체를 배치하거나 위치를 변경할 때 사용한다.2) css 속성이며 아들태그에 상속이 되지 않는다.3) top, right, bottom, left 등을 사용하여 위치를 설정할 수 있다.1) position: static; → 정적 위치 (모든 html

absolute와 fixed는 한가지 특징을 제외하고 전부 동일한 특징을 가지고 있다.1) absolute가 처음 적용되었을 때, static상태인 위치에 고정되어있다.2) absolute, relative, fixed는 위치속성으로 화면 특정 좌표에 고정될 수 있다.

overflow 1) 상위엘리먼트가 하위엘리먼트를 어떻게 처리할 것인지 결정하는 속성 2) overflow: hidden; → 글자가 넘칠 때 box크기 바깥에 있는 것들은 잘라서 보여줌 overflow: hidden; 적용 3) overflow: auto;

transform과 transition을 사용하면 위에 움직이는 도형처럼 html 요소에 동적인 효과들을 줄 수 있다.transform 속성은 요소에 회전, 크기 조정, 이동, 기울임 등의 변형을 주고,transition 속성은 변형의 제어를 담당합니다(동작 시간, t

1\. flex를 적용하고 싶을 때는 item을 감싸고 있는 container에 display: flex를 적용 시켜야container의 자식 엘리먼트인 item이 flex가 적용될 수 있다. (하단 이미지 참조)만약 위처럼 flex를 사용하지 않고 inline-blo

※ flex-item은 row값일때 width: auto = 0이다.flex-grow는 flex-item이 felx-container에 남는공간을 사용하겠다는 의미를 가진다.flex-grow 사용 시 여백까지 사용위에 이미지의 flex-grow: 1;로 인하여 각각 f

HTML과 CSS로 만들어진 웹 페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어.다양한 이벤트(마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣을 수 있다.내부 스크립트자바스크립트 코드는 ＜script＞태그를 HTML문서