[JS] 자바스크립트로 HTML 객체 만들기
·
Frontend
DOM Script인 document 객체를 활용하면 자바스크립트로 HTML 객체를 생성할 수 있습니다. 1. 객체 만들기 메소드 매개변수 기능 반환값 createElement str element element에 해당하는 태그 요소 반환 element createAttribute str attr attr에 해당하는 속성 반환 attribute 여기서 객체의 속성을 지정하는 방법은 두 가지가 있습니다. 1. createAttribute() 생성 attribute 변수를 따로 생성한 뒤 nodeValue에 속성값을 입력하는 방법입니다. 이 후 setAttributeNode() 함수를 이용해 element에 부여합니다. function createTag1(){ var element = document.cre..
DOM Script에 대해서
·
Frontend
문서객체모델(Document Object Model)은 HTML과 XML 문서에 대한 프로그래밍 인터페이스입니다.DOM은 각 문서의 요소를 객체(속성+메소드) 단위로 두어 트리 형태로 관리합니다.때문에 DOM을 이용하면 웹 페이지의 문서 구조나 내용을 자유롭게 수정할 수 있습니다.자바스크립트가 HTML 문서에 접근하기 위해서는 DOM이 제공하는 API를 사용해야만 합니다.일반적으로 많이 사용하는 DOM 객체는 document가 있습니다.
[JS] 알림창 종류 정리
·
Frontend
JS를 사용하면 웹상에서 나타나는 다양한 종류의 알림창을 구현할 수 있습니다.아래 정리한 함수는 모두 windows객체에 바로 종속되어 있습니다.1. Alert일방향 알림입니다. 알리는 정보와 확인 버튼으로만 이루어져 있습니다.window.alert("message_alert");2. Confirm예/아니오로 응답할 수 있는 알림입니다. 알리는 정보와 확인/취소 버튼으로 이루어져 있습니다.확인/취소는 각각 true/false를 반환합니다.window.confirm("message_confirm");3. Promptwindow.prompt("message", "default_entry_content");문자열 입력을 할 수 있는 알림입니다. 알리는 정보와 엔트리, 확인/취소 버튼으로 이루어져 있습니다.확인..
[JS] HTML에 JavaScript 코드 삽입하기
·
Frontend
JavaScript(JS) 코드를 웹에 적용하려면 HTML 코드 안에 JS 코드를 삽입해야 합니다.JS 코드를 삽입하는 방법은 크게 두 가지가 있습니다.1. HTML 코드에 직접 추가HTML 코드에 직접 JS 코드를 추가할 때는  여기서 document.write()는 JS에서 document 오브젝트의 쓰기 함수입니다.2. 외부 JS 파일 불러오기JS파일을 불러올 때도   두 방법을 모두 사용하여 다음과 같은 HTML 코드를 만들 수 있습니다. /* 1. HTML에 직접 추가하기 */ /* 1. HTML에 직접 추가하기 */ /* 2. JS 파일 불러오기 */ /* 2. JS 파일 불러오기 */
[CSS] CSS 선택자 정리
·
Frontend/CSS
선택자(Selector)는 마크업 언어에서 작성된 요소들 중 원하는 범위를 선택하는데 사용됩니다.선택자를 이용하면 원하는 요소들에 CSS 스타일을 적용할 수 있습니다. 선택자를 통해 특정 속성(property)을 원하는 값(value)로 설정하기 위해서는 다음과 같은 문법을 따릅니다.Selector { property : value }선택자범위*모두#cid 속성값이 c.cclass 속성값이 cE태그 이름이 EE FE의 하위 FE > FE의 자식 FE + FE 앞에 있는 F E : first-child 부모의 첫 자식인 E E : link E가 방문 안한 자원 E : visited E가 방문 한 자원 E : active E가 활성화 됐을 때 E : hover E 위에 마우스가 지나갈 때 E..
[CSS] CSS에 대해서
·
Frontend/CSS
종속형 스타일 시트(Cascading Style Sheet, CSS)는 마크업 언어가 실제로 표현되는 스타일을 나타내는 스타일 시트 언어(Style Sheet Language)입니다. HTML과 같은 마크업 언어가 웹 문서의 내용을 정의하면, CSS를 통해 요소의 크기, 글자, 배경, 위치, 형태 등을 변형할 수 있습니다. 때문에 HTML 구조가 동일해도 CSS 파일이 다르다면 전혀 다른 웹사이트를 만들 수 있습니다. CSS는 HTML의 태그 안에서 정의되며, 외부 CSS 파일을 불러오거나 HTML 내부에서 직접 작성할 수도 있습니다. 내부에서 직접 작성할 때 : 외부 파일을 불러올 때 :
[HTML] HTML 태그와 속성 정리
·
Frontend
HTML의 태그는 요소(element)의 종류를 나타내며, 그 용도에 따라 다양하게 존재합니다.일반적으로 태그를 사용할 때는 다음과 같은 문법을 따릅니다. content  태그용도htmlhtml 전체head헤더title페이지 제목. 브라우저 탭에 나타나는 이름body본문div구역 구분p문단 구분  title: 툴팁 (텍스트에 마우스 대면 나오는 설명)span문단 내 영역 구분a링크. href 또는 자체 페이지의 앵커로 이동    href : 웹 페이지 urlimg /이미지 출력 (닫는 태그 없음)  src : 이미지 이름 (확장자 포함)  alt : 대체 이름  width : 너비  height : 높이br /줄바꿈 (닫는 태그 없음)hr가로선 긋기h1 ~ h6소제목ul순서 없는 글머리ol순서 있는 글머..