🖼Front/HTML&CSS

HTML에서 직접 이벤트를 연결하는 방법 HTML에서는 이벤트를 생성하고, onevent(ex. onclick, onfocus 등)에 자바스크립트 메서드를 연결하여 HTML-DOM에서 자바스크립트가 해당 이벤트에 반응하게 한다. 또는 아래와 같이 직접 HTML 속성에 직접 자바스크립트 코드를 작성하는 방법도 있다. (여러 구문일 경우 세미콜론으로 구분한다.) JavaScript 에서 이벤트를 관리하는 방법 자바스크립트에서는 기본적으로 event-driven programming 모델을 사용한다. 쉽게말해 해당 이벤트가 발생하면 브라우저에서 자바스크립트로 작성한 이벤트 관리 메서드(event handler)를 호출한다. let btn = document.getElementById('btn'); btn.ad..

웹 브라우저에게 해당 문서를 어떤 형식으로 읽어야 할지 알려주는 힌트입니다. 웹페이지의 시작과 끝, 루트 태그 모든 태그들은 html 안에 존재한다. 웹페이지의 정보, 메타데이터, 외부 파일 링크. 단 자바스크립트 는 body 마지막 부분에 적는 것이 좋습니다. 웹 브라우저가 코드를 읽다가 스크립트를 만나면 html DOM트리가 변경될 수 있으니 모든 작업을 멈추기 때문. - 웹브라우저의 제목 표시줄에 나오는 제목. - 문자 인코딩, 웹 페이지에 필요한 모든 요약 정보 - CSS 등 외부 파일을 연결 할 때 사용 - html 코드 내에 스타일을 직접 지정하고 싶을 때 사용 브라우저에 실제로 표시되는 내용 - 단순 줄 바꿈 태그, 닫는 태그이 없어도 된다. - 문단을 나누는 태그, paragraph - 기..

HTML 문서의 내용과 해당 문서의 정보, 구조를 저장하는 파일입니다. 1. 태그 HTML (Hypertext Markup Language)는 이름답게 태그를 이용해서 문서의 정보를 나타냅니다. 문서내용 2. 기본구조 ~ 태그는 최상단(= 루트) 태그를 의미합니다. 문서의 모든 내용이 html 태그 안에 들어가 있으며 문서의 기본 언어 속성 값을 html 태그 안에 적습니다. ... 3. 메타데이터 참고로 meta-data는 해당 문서를 설명하는 정보를 의미합니다. ... 4. body 작성 이는 아래 CSS 설명 이후에 실습하면서 알아봅시다. CSS Style-Sheet로 문서와 그 문서를 꾸며주는 스타일을 분리하기 위해서 만들었습니다. HTML의 태그에 스타일을 적용할 때 우선순위대로 단계적으로(ca..