DreamCoder.

HTML은 크게 head, body 태그로 나뉘게 된다.head 태그는 브라우저상 보이는 UI적인 요소는 전혀 없고 웹사이트에 관련된 정보가 담겨진 곳.웹사이트의 관련된 정보가 담겨진 곳이기 때문에 css파일이나 Javascript파일을 연결하거나, favicon도 담

CSS를 다루다보면 동일한 코드를 반복적으로 적어야 할 경우가 제법 많을 것이다. 그 때마다 하나씩 반복해서 사용하면 유지보수도 힘들 뿐더러 일일히 코드를 고쳐야 하기 때문에 시간이 많이 소비가 될 수 밖에 없다. 게다가, 코딩을 하는 건 사람이기 때문에 실수도 발생

data attrubute는 HTML5에 추가되어 HTML 태그 자체에서 제공하는 속성 뿐만 아니라 우리가 직접 원하는 데이터를 DOM요소에, HTML요소에 직접 추가 할 수 있는 기능이다. 우리가 원하는 정보를 요소에 추가하고 싶을 때 사용 가능하다.data-\*평소

카드가 있다 가정하면 block는 카드 전체를 의미한다. 안에 들어 있는 img, title, button은 모두 element를 나타낸다.block\_\_element--modifier위 카드에서 element들을 BEM 구조에 맞게 작성하면 이와 같이 작성 할 수

CSS를 적용하다보면 내가 생각 하는 것보다 content의 사이즈가 더 크게 잡히는 경우가 있을 것이다. 서로 width, heigh가 100px이라 가정했을 때 자식요소의 width, height가 100%면 부모의 그만큼을 차지하기 때문에 자식요소인 파란 박스가

CSS에서 레이아웃을 정할 때 position은 너무 중요하다.이 중에 position: static으로 되어 있는데 사실 이 상태에선 top, left, bottom, right 같은 포지션과 관련된 프로퍼티를 적용해도 아무런 영향이 없다. 그대로 있게 된다. 그러나

position: sticky; 를 사용 할 때 top, right 같은 프로퍼티를 지정해주지 않으면 아무 이상이 없다.그렇지만 이에 대한 값을 지정해주게 된다면 들어있는 부모 박스 안에서 포지션이 지정하게 된다. 포지션이 absolute 라면 근접한 부모 박스 중에서

수직이나 수평으로 정렬을 할 때 display:flex-box 를 이용하면 justify-content, align-items를 사용하면 되겠지만 그 것들을 사용하지 않고 수직,수평으로 정렬 하는 법을 알아보자.블록 단위의 박스는 div 태그와 마찬가지로 꽉 차게 마진

background-img를 이용하면 url을 끌어와 사진을 가져 올 수 있다. 그렇지만, 계속 반복되어 끊기는 느낌도 들고 지저분하기 때문에 이를 깔끔하게 다룰 수 있는 CSS를 알아보자.말 그대로 사진을 가져오면 지저분한 것들을 정리 해줄 수 있다. backgrou

코딩을 하다보면 함수는 아무때나 상관 없이 호출을 해도 상관 없지만 변수와 클래스는 그렇지 않다. 선언하고난 뒤에 써야하는 경우인데 그것들을 호이스팅이라 칭한다.자바스크립트 엔진(Interpreter)이 코드를 실행하기 전 변수, 함수, 클래스의 선언문을 끌어올리는 것

자판기를 보면 안에 구조가 어떻게 되어 있는지 알 필요 없이 돈을 넣고 버튼을 누르면 음료수가 뽑아져 나온다. 마찬가지로, 콘센트에 플러그를 꽂으면 구조를 알 필요 없이 전기를 공급하여 사용 할 수 있다.이처럼, API는 그 구조가 어떻게 되어 있는지 알지 않아도 브라