07.06(Document 객체)
2020. 7. 6. 20:30
프로그래밍/JavaScript
Document 객체 웹 페이지 그 자체를 의미 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 함 Document 메소드 Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공 - HTML 요소의 선택 - HTML 요소의 생성 - HTML 이벤트 핸들러 추가 - HTML 객체의 선택 HTML 요소의 선택 메소드 설명 document.getElementsByTagName(태그이름) 해당 태그 이름의 요소를 모두 선택 document.getElementsById(아이디) 해당 아이디의 요소를 선택 document.getElementsByClassName(클래스이름) 해당 클래스에 속한 요소를 모두 선택 document.getEl..
07.03(var, let, const의 차이와 data type)
2020. 7. 3. 20:09
프로그래밍/JavaScript
변수 선언 방식 var var는 변수 선언 시 여러번 선언해도 에러가 나오지 않는다는 단점이 있음 var name = 'hello' console.log(name) //hello 출력 var name = 'javascript' console.log(name) //javascript 출력 코드량이 많아진다면 변수 재선언으로 인한 문제가 발생할 가능성이 높아짐 let, const ES6 이후, var를 보완하기 위해 추가된 것이 let, const임 변수 재선언 X let name = 'hello' console.log(name) //hello 출력 let name = 'javascript' console.log(name) // Uncaught SyntaxError: Identifier 'name' has ..
07.02(semantic tags)
2020. 7. 2. 20:37
프로그래밍/HTML
semantic tags 자신의 의미를 브라우저와 개발자 모두에게 명확히 나타내는 요소 시맨틱태그를 사용하여 코드의 가독성을 높이고 명확하게 함 non-semantic 요소 - , 자신의 컨텐츠에 대해 아무것도 설명해주지 않음 semantic 요소 - , , 자신의 컨텐츠를 명확하게 정의 semantic tags 태그 설명 내용을 정의 페이지 콘텐츠를 제외한 콘텐츠를 정의 링크, 광고, 사이드바 표시 등 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의 요소에 대한 캡션을 정의 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정 문서 또는 섹션의 바닥글을 지정 주로 저작권, 연락처 정보 등 내용이 삽입되며 , , 등 다른 레이아웃 사용가능 문서나 섹션의 머릿글을 지정 ..
07.01(animation)
2020. 7. 1. 20:19
프로그래밍/CSS
animation 과정없이 변형된 여러가지 상태 보여줌 요소의 현재 스타일을 다른 스타일로 천천히 변화시킴 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(@keyframes)을 정의해야 함 animation 속성 속성 설명 animation 모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음 animation-name 애니메이션 효과의 이름을 설정 animation-duration 애니메이션 효과를 재생할 시간을 설정 animation-delay 애니메이션 효과가 나타나기까지의 지연 시간을 설정 animation-iteration-count 애니메이션 효과가 몇 번 반복될지를 설정 animation-iteration 애니메이션의 진행 방향을 설정 animatio..
06.30(transition)
2020. 6. 30. 20:00
프로그래밍/CSS
transition 시간의 흐름에 따라 스타일 속성의 변화되는 모습을 표현 ① transition ② transition-delay ③ transition-duration (절대 생략하면 X 제일 중요) ④ transition-property ⑤ transition-timing-function transition 속성 속성 설명 transition 모든 transition 속성을 이용한 스타일을 한 줄에 설정 transition-delay 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정 transition-duration 전환(transition) 효과가 지속될 시간을 설정 transition-property 요소에 추가할 전환(transition) 효과를 설정 transition-..
06.29(transform)
2020. 6. 29. 20:40
프로그래밍/CSS
transform 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있음 - 해당 요소를 움직임 - 해당 요소를 회전시킴 - 해당 요소의 크기를 변경함 - 해당 요소를 기울임 - 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킴 CSS3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공함 2D transform 속성 속성 설명 transform 요소에 2D 또는 3D 변형(transform)을 적용 transform-origin 요소에 변형(transform)을 적용하는 변환 중심을 설정 2D transform 메소드 메소드 설명 matrix(n,n,n,n,n,n) 6개의 매개변수로 모든 2D 변형 메소드를 한 번에 설정..
06.26(table)
2020. 6. 26. 21:56
프로그래밍/CSS
CSS table 속성 ① border ② border-collapse ③ border-spacing ④ caption-side ⑤ empty-cells ⑥ table-layout table 속성 속성 설명 border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음 border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정 border-spacing 테이블 요소(th, td)간의 여백을 설정 caption-side 테이블의 캡션(caption)을 설정 empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정 table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정 border 테이블의 테두리(border)를 설정 이 속성..
06.25(position)
2020. 6. 25. 21:49
프로그래밍/CSS
position position 속성은 HTML 요소가 위치를 결정하는 방식을 설정 ① 정적 위치(static position) 지정 방식 ② 상대 위치(relative position) 지정 방식 ③ 고정 위치(fixed position) 지정 방식 ④ 절대 위치(absolute position) 지정 방식 position 속성 속성 설명 position HTML 요소의 위치를 결정하는 방식을 설정 top 위치가 설정된 조상 요소의 위로부터의 여백을 설정 right 위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정 bottom 위치가 설정된 조상 요소의 아래로부터의 여백을 설정 left 위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정 z-index 겹쳐지는 요소들이 쌓이는 스택(stack)의..