배치 position static ; 기준 없음, 기본값 relative ; 요소 자신의 원래 위치를 기준으로 배치. 배치 전 자리는 비게 됨 - 배치를 위한 용도보다는, 보통 position:absolute의 구조상의 부모요소에 위치 상의 부모요소가 될 수 있도록 부여 absolute ; 위치 상 부모 요소(상위 요소 中relative인 요소)를 기준으로 배치 - 상위 요소로 쭉 올라가서, position:relative인 요소를 기준으로 배치함. 없다면 루트 요소인 viewport를 기준으로 배치 - 보통, 부모 요소에 position:relative를 두고, 자식요소에 position:absolute를 둬 배치 - display:block으로 변경됨 fixed ; 뷰포트(브라우저)를 기준으로 배치 ..
글꼴 font-size : 글자의 크기. 16px(기본값), 단위 font-style ; 글자의 기울기. normal(기울기 없음, 기본값), italic(이텔릭체) font-weight : 글자의 두께. normal(400,기본값), bold(700), 100~900(수치로 설정) font-family ; 글꼴(서체) 지정, 여러 개 지정된 것 중 가장 먼저 적용되는 글꼴 사용. san-serif(고딕체 계열, 대부분), monopsace(고정너비 글꼴 계열), cursive(필기체 계열), fantasy(장식 글꼴 계열) -> 하나씩 써보기 line-height ; 한줄의 높이. 숫자(요소의 글꼴 크기의 배수로 지정), 단위 문자 color ; 글자의 색상. 색상 text-decoration ; 문자..
width, height ; 요소의 가로/세로 너비 auto ; 기본값 / 단위(px,ev,vm) max-width, max-height ; 요소가 커질 수 있는 최대 가로/세로 너비 none ; 기본값 / 단위 min-width, max-height ; 요소가 작아질 수 있는 최소 가로/세로 너비 0 ; 기본값 / 단위 margin ; 요소의 외부 여백(공간)을 지정하는 단축 속성 0 ; 기본값 / auto ; 가로(세로)너비가 있는 요소의 가운데 정렬에 활용 / 단위 -음수도 가능 padding ; 요소의 내부 여백(공간)을 지정하는 단축 속성 0 ; 기본값 / 단위 / % ; 부모 요소의 가로 너비에 대한 비율로 지정 -음수도 가능 border-radius ; 요소의 모서리를 둥글게 깎음 borde..
전역 속성 ; HTML에서, 모든 요소에 적용할 수 있는 속성 title="설명" ; 요소의 정보나 설명을 지정 style="스타일" ; 요소에 적용할 스타일을 지정 class="이름" ; 요소를 지칭하는, 중복 가능한 이름 id="이름" ; 요소를 지칭하는, 고유한 이름. 자주 사용 x data-이름="데이터" ; 요소에 데이터를 지정, 보통 js에서 사용 ex) 사과> 바나나 js) const els=document.querySelectorAll('div') ; els.forEach(el=>{ console.log(el.dataset.fruitName) }
이번에 배워볼 주제는 JavaScript의 객체입니다! 1. 객체 객체는 객체지향언어인 C++에서도 자주 쓰는 용어인데요 객체란, 실생활에서 우리가 인식할 수 있는 사물입니다. 예를 들어, 고양이는 하나의 객체(cat)입니다. 고양이라는 객체의 property에는 name,age,weight이라는 특성을 가질 수 있고, 고양이라는 객체의 method에는 eat(), sleep(), play()라는 행동을 가질 수 있습니다. 객체란, 이름과 값으로 구성된 property의 정렬되지 않은 집합입니다. 이 property의 값으로 함수가 올 수 있는데 이를 method라고 합니다. 객체의 선언 let gggangdori={ name:"깡돌이", family:"말티즈", age:10, // property ba..
JavaScript ; 1995년, 웹페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어 - 일반적으로 HTML문서에 내재, 브라우저에서 실행 - 인터프리터 언어 ; C언어처럼 컴파일 작업을 거치지 않고 바로 실행할 수 있는 언어 - 타입 명시 x + TypeScript ; MS에서 개발한 자바스크립트의 상위 언어 자바스크립트 프레임워크 ; 자바스크립트로 작성된 애플리케이션 프레임워크 - 라이브러리 ; 부모 코드에 의해 호출될 함수들을 제공 / 프레임워크 ; 애플리케이션 디자인 전반을 정의 ex) AngularJS, ReactJS, Node.js, Vue.js ECMA (=ES) ; Ecma International이 ECMA-262기..
의사 클래스 ; 선택하고자 하는 HTML요소의 특별한 상태 명시할 때 사용 동적 의사 클래스 :link ; 한 번도 방문 하지 않은 상태 :hover ; 마우스 올려놓은 상태 :active ; 마우스로 링크 클릭하고 있는 상태 :visited ; 한 번 이상 방문한 상태 :focus ; 초점이 맞춰진 input 요소를 모두 선택, input, a, button, label, select에 가능. tabindex="-1"를 통해 탭으로 선택할 수 있게 만들 수 있음 상태 의사 클래스 - :checked ; 체크된(checked) 상태의 input 요소를 모두 선택함 - :enabled ; 사용할 수 있는 input 요소를 모두 선택함 - :disalbed ; 사용할 수 없는 input 요소를 모두 선택함 ..
