FrontEnd

CSS 색상 단위 색상 이름 영문 표기 black, red, blue, gray, green... RGB RED, GREEN, BLUE 세가지 색상의 조합(빛의 삼원색)으로 표현하는 방식 R, G, B에 해당하는 각 값을 0255 또는 0%100%로 표현 RGB(R, G, B) 로 표현한다. rgb(100%, 0%, 100%) -> 마젠타 RGBA RGB + Alpha 의 약자이며 투명도(Transparent)가 추가 된 것. 투명도를 0.0(투명) ~ 1.0(불투명) 의 수치로 표현한다. rgb(0, 255, 255, 0.5) -> 반투명 Cyan(옥색, 청록색) rgb(r, g, b, a) / rgba(r, g, b, a) 둘 다 상관없이 값만 넣어준다면 알맞게 적용된다. 16진수 표현법, Hexad..

id, class 속성 Global Attribute, 공용 속성이다. 모든 태그들이 다 가지고 있는 속성 id 속성 HTML 문서에서 각 요소들을 구분하기 위해 사용한다. HTML 문서에서 id들은 고유한 값으로 부여되어야 한다. CSS를 적용하거나 JS Event 처리코드를 적용할 때 사용한다. '#' 기호와 연계해서 사용한다. class 속성 태그들을 그룹지을 때 사용한다 여러 태그 요소들에게 같은 클래스 값을 적용하여 같은 그룹으로 표현한다. 같은 클래스 값을 가진 태그들에게 공통적인 스타일을 적용할 수 있다. 선택자, Selector HTML 문서에서 특정 요소를 선택하는 CSS 문법 선택한 요소들에게 일괄적으로 같은 스타일을 적용할 수 있다. 선택자의 종류 전체 선택자 모든 태그..

CSS 레이아웃 화면에 표현될 요소를 배치하는 작업 어떤 요소를 어디에 어떻게 배치할 것인가에 대한 전략 태그의 모양을 설정하고 배치될 위치, 다른 요소들과의 관계 등을 지정한다. 태그의 기본적인 영역(공간)의 크기 width : 컨텐츠 영역의 너비 height : 컨텐츠 영역의 높이 padding : 내부 여백 border : 테두리 margin : 외부 여백 CSS 여백 태그 요소를 감싸고 있는 투명한 공간 padding(내부여백), margin(외부여백) 으로 구성한다. 내부여백, 외부여백 둘 다 top, right, bottom, left로 구성된다. 설정 방법 padding과 margin 둘 다 설정 방법이 똑같다. ex) margin 기준으로 작성하였으며 padding, margin 둘 다 크..

DOM, Document Object Model 문서 객체 모델 document 객체를 통해 관리된다. document 객체는 window 객체의 내장 객체 중 하나 HTML 문서의 body 태그의 내용 요소들을 다룰 수 있다. 자바스크립트 코드로 HTML 문서의 요소(태그)들에 접근하고 관리할 수 있게 해주는 객체 모델 DOM 관련 용어 요소 (Element) HTML 문서 내의 태그 문서 객체(Document Object) 자바스크립트 코드를 이용하여 요소에 접근할 수 있도록 객체화한 것 HTML요소와 자바 스크립트코드의 연결 지점(인터페이스) DOM 트리(tree) 모든 문서 객체들을 트리구조로 표현한 것 모든 요소들을 계층적 구조인 트리 구조로 저장해둔 것 노드(Node) DOM 트리의 구성 요소..

DOM 객체 함수, DOM API Node 생성 document.createElement("tagName") 요소노드 만들기 ** HTML 표준 태그가 아니어도 생성된다. h1, h2 등 표준태그가 아닌 test 같은걸 넣어도 생성된다. document.createTextNode("Text") 텍스트 노드 만들기 Node 추가 DOM객체.appendChild(대상객체) DOM 객체에 대상객체를 연결한다(자식으로 추가해준다) ex) var pTag = document.createElement("p") : p태그 요소 생성 document.body.appendChild(pTag) : body 태그에 pTag 요소 추가 ** document.body 와 body 태그는 똑같다. ex2) var div = do..

JS Event 처리코드 작성(등록)하는 방법 이벤트(Event)가 발생하면 해당 이벤트에 알맞은 동작을 수행할 수 있도록 코드를 작성해둬야한다. 이벤트 처리코드 == 이벤트 핸들러(handler) == 이벤트 리스너(Event Listener) 이벤트가 발생했을 때 그 상황에 맞춰 동작할 코드 HTML 태그의 이벤트 속성을 이용한 인라인 방식으로 등록하기 button onclick="alert('clicked')"> div onmousemove="console.log('moved')"> DOM을 이용한 이벤트 리스너 바인딩 - 1 (Event Attribute 사용) button id="btnOk"> 라고 하면, script 태그를 이용하여 btnOk.onclick = fu..

자바스크립트에서 제공하는 기본 대화상자 alert 확인버튼과 메세지를 출력하는 Alert 창, 주로 확인용으로 사용된다. 확인 버튼과 메세지를 출력하는 Alert 창 confirm 확인버튼, 취소버튼, 메세지가 들어가는 Confirm 창 반환값이 Boolean 타입이다 확인, 취소 두가지와 메세지가 들어가는 Confirm 창 (반환값이 Boolean 타입이다. True(확인) Or False(취소)) prompt 확인버튼, 취소버튼, 메세지, 텍스트필드가 들어가는 Prompt 창 확인, 취소 두가지와 텍스트필드, 메세지가 들어가는 Prompt 창

MDN 자바스크립트 레퍼런스 참고하기 자동 형변환 Number + Sting -> Sting ex) 123 + "Hello" -> "123Hello" Boolean + String -> String ex) true + "Hi" -> "trueHi" Boolean + Number -> Number ex) true + 5 -> 6 true + true +5 -> 7 (true == 1, false== 0) 강제 형변환 /// 문자 -> 숫자 parseInt( "숫자형태" ) parseFloat ( "숫자형태" ) Number( "숫자형태" ) /// 숫자 -> 문자 String( 숫자 ) 숫자데이터.toString(n) 숫자데이터.toFixed(n) // Number 파랑 console.log(50); //..

CSS, Cascading Style Sheets HTML, XHTML, XML 등의 마크업 언어(Markup Language)가 화면에 표현되는 방법(스타일, 모양)을 기술하는 언어 부모태그에 스타일을 적용하면 자식태그도 해당 스타일이 적용된다. CSS를 HTML에 적용하는 방법 인라인(Inline) 방식 HTML 태그의 style속성을 이용하여 스타일을 적용하는 방법 장점 : 태그를 보면서 스타일을 지정할 수 있다. 단점 : 각각의 태그에 스타일을 일일히 적용해야하기 때문에 관리가 힘들어진다. 임베디드(Embedded) 방식 head 태그 내에 style 태그를 생성하고 그 안에 작성한다. CSS 선택자(Selector)를 이용한다. 장점 : HTML 문서에 적용된 모든 스타일을 한번에 확인할 수 있..