![]()
동적(화면에서 변화, 인터렉션) 기능 제작을 위해 사용되는 프로그래밍 언어. ex) 이미지 슬라이드 효과, 팝업 효과와 같은 화면에서의 변화나 사용자간의 인터렉션 응용 범위 : IoT/하이브리드 앱(web+moblie)/서버 개발 (클라이언트와 서버 양쪽 사용 가능.) 사용하는 방법: 태그 안의 src로 js파일 이름을 입력하여 연동시켜야 함! 확인하는 방법: 개발자 도구-console (f12/우클릭 크롬 개발자 검사) 자바 스크립트의 변수 변수 선언 구조: [ var 변수명 ; ] var: 변수를 선언 하겠다. 메모리라는 공간에 영역을 할당 받는 과정=변수 선언... 넣기... 변수 초기화 구조: [ 변수명 = 데이터 ] 변수 선언과 초기화 동시에 하기: 구조: [ var 변수명 = 데이터; ] 변수..
Transform transform: sclae(n,m) width 값을 n배, height 값을 m배 확대 소숫점 : 작게 하기 transform: rotate(n deg); 입력한 각도만큼 (평면적으로)회전 양수/음수 모두 작성 가능 transform: skew (ndeg, mdeg); x축, y축을 입체적으로(3차원적으로) 각도를 비틀 때 사용 n=x축 / m=y축 transform: translate( npx, mpx); 선택한 오브텍트의 좌표를 변경 원래 위치를 기준으로 이동한다. n=x축 / m=y축 마진 패딩 ... prefix 접두사 transform이 css의 최신 언어라서 explorer하위버전에서는 사용 못하는데, 프리픽스를 사용하면 각 브라우저의 하위버전도 사용할 수 있음. (다른 ..
display ... .특정 요소의 css 괄호 안에서 block과 inline의 요소의 성격을 바꾸거나 합칠 때 사용한다! 속성값으로는 3개(inline, block, inline-block)이 있다. inline: 인라인 속성 부여 block: 블록 속성 부여 inline-block: width, height 설정 가능해짐, 네비게이션 버튼 만들 때 많이 사용된다. float ... .특정 요소의 css 괄호 안에서 선택된 요소를 왼쪽 끝/오른쪽 끝에서부터 정렬시킨다. 말 그대로 선택자를 띄워서 레이어층을 만드는 것. 특징: 1) float를 사용한 부모의 영향을 받아서 왼쪽/오른쪽 끝이 결정된다 =감싸고 있는 부모의 크기 안에서만 왔다갔다한다. =(float를 사용한)자식들보다 부모의 위드값이 더 ..
![]()
Block & Inline Block : Y축 정렬, 공간 생성 O, 상하 배치 O Inline : X축 정렬, 공간 생성 X, 상하 배치 X Box Model 브라우저에서 HTML 요소의 공간 배치 기본 레이아웃 구조(틀). content(내용) > padding(패딩) > border(테두리) > margin(마진) 순으로 content를 감싸고 있다. content 글, 이미지, 비디오 등 요소의 실제 내용이 위치하는 영역, 즉 내용물. width(너비)와 height 속성으로 크기가 결정됨. (w,h 속성을 갖는다.) padding 테두리 안쪽의 내부 여백. 요소에 적용된 배경의 컬러/이미지는 패딩 영역까지 적용된다. border 테두리. border의 값은 테두리의 두께를 말한다. 보이지 않아도..
CSS 주요 속성 width, height width : 요소의 너비 설정 height: 요소의 높이 설정 고정값(px)과 가변값(%) %는 부모의 영향을 받는다. (상속 받는다.) font font-size: px, % font-family 브라우저마다 지원한 폰트가 다르므로 여러 개를 입력해야 함. 입력한 순서대로 우선순위가 적용된다. snas-seif: 모든 브라우저에서 적용 가능하기 때문에 맨 마지막에 속성값(=이 경우에는 폰트 종류)을 넣을 때 모두 넣을 때 쉼표를 넣는다. font-style: 이텔릭 font-weight는 굵기(bold)조절시 사용/ 100~900사이의 숫자를 넣을 수 있다. border 요소의 테두리의 두께, 색을 설정한다. border-style: 실선:soild, 점선:..
HTML 구조를 잡을 때 사용하는 태그 Semantic Tag 브라우저와 개발자 모두에게 정확한 의미를 설명해 준다. 구조상 안에 들어간다. According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities." 소개 및 탐색에 도움을 주는 콘텐츠를 나타냄. 웹 사이트의 머리글을 담는 공간. 이미지 등을 활용하여 로고 등이 존재함. 더보기 head / header / heading 구별하기 head 기본 구조 태그 (!doctype.html-html-head-body) 에 속함. 페이지를 열 때 브라우저에 나타나지 않는다. 메타 데이터(이 기록된다. h..
