Events Listener HTML 삽입 미리보기할 수 없는 소스 addEventListener("event",function) HTML 삽입 미리보기할 수 없는 소스 이벤트는 어떤 특정한 행위에 대한 것으로 특정 트리거가 발생되면 함수를 실행시킬 수 있게 해주는 javascript문법이다. addEventListener() 함수로 이벤트를 넣어 줄 수 있다. "click" 말고도 hover, load 등 많은 이벤트들이 있으니 MDN을 참고 바란다. https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한..
HTML 태그에 접근 방법 HTML 삽입 미리보기할 수 없는 소스 document에 접근하여 태그를 가져오면 태그는 많은 속성들이 있는데 이를 변경해줄 수 있다. style , events , innerText 등 정말 많은 요소의 속성을 변경해줄 수 있다. document.getElementById HTML 삽입 미리보기할 수 없는 소스 속성 id를 기준으로 Element를 가져올 수 있다. const h1 = document.getElementById("title") getElementsTagName HTML 삽입 미리보기할 수 없는 소스 해당되는 태그들을 가져올 수 있다. 만약 해당되는 태그가 여러 개일 경우 배열로 반환된다. const tag = document.getElementsByTagNam..
메타 데이터 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 메타 태그는 웹사이트의 추가적인 정보를 명시해주는 태그이다. 태그 안에 위치하여있으며 빈 태그(내용이 없음)이다. 속성 속성 설명 charset , 인코딩 방식을 지정 http-equiv , HTTP header의 이름을 값으로 가질 수 있음 name , 메타 데이터의 정보를 정의 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
Expression , Statement HTML 삽입 미리보기할 수 없는 소스 Expression HTML 삽입 미리보기할 수 없는 소스 Expression은 값이 될 수 있는 것들을 의미한다. '5' , 5 , true , "Hello" , 5+4+3+2와 같이 값이 될 수 있는 것들은 모두 Expression(표현식)이라고 한다. Statement HTML 삽입 미리보기할 수 없는 소스 Statement는 하나의 문장을 의미한다. Expression도 Statement의 일부이다. 반복문, 조건문도 Statement이다. let variable = "Hello"; ❗ 저작권 및 참고 더보기 https://icons8.com/icon/TZ69zUw6d3Lu/right Right icon in Flat..
Bootstrap HTML 삽입 미리보기할 수 없는 소스 특징 HTML 삽입 미리보기할 수 없는 소스 Bootstrap은 트위터에서 개발한 것으로 class를 이용하여 보다 쉽게 레이아웃 등 프런트 개발에 도움을 주는 toolkit입니다. 지금은 5버전까지 나와있으며 css와 js 파일로 구분되며 Document도 잘되어 있어 쉽게 따라 할 수 있습니다. https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 버전에 따라 사용법과 의존성이 다를 수 있지만 금방 습득할 수 있습니다. 버전에 따라 사용하고 싶으면 구글에 "boostrap [version] cdn"을 치..
Block HTML 삽입 미리보기할 수 없는 소스 Block Level의 특징 HTML 삽입 미리보기할 수 없는 소스 Block은 , 같은 태그들이 있습니다. Block은 위에서 아래로 레이아웃이 잡히는 요소로 서로 좌/우에 배치 될 수 없습니다. 특징 기본 width의 값이 100%이다. padding과 margin을 모든 방향으로 사용할 수 있다. width와 height를 지정할 수 있다. 자식 요소가 쌓일 수록 height는 자동으로 늘어난다. 레이아웃을 잡을 때 사용된다. Inline HTML 삽입 미리보기할 수 없는 소스 Inline의 경우 Text를 다룰 때 사용됩니다. Block과는 다르게 같은 Inline요소들은 서로 좌/우에 배치될 수 있습니다. , , 가 Inline에 해당됩니다. I..
계속 추가할 예정입니다. 크기 HTML 삽입 미리보기할 수 없는 소스 width , height HTML 삽입 미리보기할 수 없는 소스 가로/세로의 크기를 지정해 주는 속성입니다. div { width: 300px; height: 300px; } 여백 HTML 삽입 미리보기할 수 없는 소스 margin / padding HTML 삽입 미리보기할 수 없는 소스 margin과 padding은 여백을 줄 수 있는 속성입니다. 말로 설명하는 것 보다 그림으로 설명하는 것이 이해가 빠를 것 입니다. 300 x 300의 박스 형태에서 padding은 border기준으로 내부 여백을 의미하고 margin은 border 기준으로 외부의 여백을 의미합니다. border은 선 입니다. 선언 방식 margin / paddi..
HEAD 태그 안의 태그들 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 Title 태그는 제목을 의미하는 태그입니다. 아래의 이미지의 "글쓰기"가 바로 태그가 사용되는 부분입니다. HTML 삽입 미리보기할 수 없는 소스 Meta 태그는 웹 페이지의 대한 정보를 나타냅니다. 해당 문서가 어떠한 방식으로 인코딩 되야 하는지 해당 글의 작성자는 누군지 부가 정보는 뭐가 있는지에 대하여 나타내 줍니다. Attribute Description charset 인코딩 방식을 설정 name 검색 엔진에 제공하기위한 정보 content name에 대한 정보의 내용 HTML 삽입 미리보기할 수 없는 소스 Link 태그는 외부에 있는 문서를 연결할 때 사용합니다. favicon 또는 css..
