본문 바로가기
728x90

분류 전체보기177

자바스크립트#06 : 객체 배열은 요소에 접근할 때 인덱스를 사용한다. 객체는 키(key)를 사용한다. 객체는 중괄호로 생성하며, 쉼표로 연결하여 입력한다. JSON 형태! 자바에서의 클래스로 이해하면 되겠다. const product = { 제품명 : "7D 건조 망고" , 유형 : "당절임" , 성분 : "망고, 설탕, 메타중아황산나트륨, 치자황색소" , 원산지 : "필리핀" } 여기서 product는 참조변수이며, Map형식과 비슷하다. 키와 값 뒤에 쉼표를 넣어 구분해주었다. 객체 요소에 접근하는 것은 두 가지 방법이 있다. 1. 대괄호[] 사용 : product["제품명"] -> "7D 건조 망고"를 출력. "제품명", "유형", "성분", "원산지"가 배열의 index처럼 사용되는 것이다. 2. 온점 . 사용 : pro.. 2022. 12. 16.
자바스크립트#05 : 함수 자바스크립트에서 함수는 코드의 집합을 나타내는 자료형이다. 익명함수 function () { } 자바스크립트에서 이름을 부여 받지 못한 익명함수가 존재한다. (자바와는 다른점!) func라는 변수에 익명함수를 선언하여 집어 넣었다. func는 참조 변수가 된 것이다. 위 코드에서 function () { }은 이름을 부여 받지 못한 익명함수이다. 이 경우, 참조변수를 기존의 alert(), prompt() 함수처럼 호출할 수 있다. typeof로 함수의 자료형을 확인하면, 익명함수의 자료형은 function으로 출력된다. 또한 함수 자체도 단순한 자료로 다루어지기 때문에 출력이 가능하다. 선언적 함수 (명명함수) 선언적 함수는 이름을 붙인 함수이다. function name() { } 명명함수는 함수명을.. 2022. 12. 15.
HTML & CSS #14 : 반응형 웹 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이 반응형 웹 디자인 이다. 화면 크기가 바뀔 때마다 반응하여 화면 요소들을 자동으로 바꾸어 구현하는 것을 의미한다. viewport 실제 내용이 표시되는 영역이다. 뷰포트를 지정하면 기기 화면, 혹은 크기가 조정된 화면에 맞추어 확대 혹은 축소해서 요소들을 표시해준다. html파일에서는 태그 안에 태그 안에 뷰포트를 지정해 줄 수 있다. 일반적인 사용법으로는 위 코드를 기억하면 된다. Grid System 화면을 여러 개의 column으로 나누어 배치하는 방법 주로 960픽셀 12 칼럼의 그리드 시스템을 사용한다. 1. 고정 그리드 : 화면 너비를 일정하게 고정하여 레이아웃을 만드는 방법 2. 가변 그리드 : 화면 너비를 백분율과 같은 가변 값으로 지정.. 2022. 12. 14.
HTML & CSS : 애니메이션 keyframes hover transition 실습 css파일 @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR:wght@100&display=swap'); body { font-family: 'Do Hyeon', sans-serif; text-align: center; } .prod-list { list-style: none; margin: 0; padding: 0; } .prod-list li { position: relative; float: left; padding: 0; margin:.. 2022. 12. 14.
HTML & CSS #13 : CSS 애니메이션 변화(transform) 특정 요소의 크기나 형태 등 스타일이 변경되는 것 스타일시트에서는 수평과 수직으로 웹 요소를 변형시키는 2차원 변형과 z축을 더한 3차원 변형이 있다. translate 함수 지정한 방향으로 이동할 거리를 지정하여 해당 요소를 이동시키는 함수이다. transform: translate(tx, ty) transform: translateX(tx) transform: translateY(ty) transform: translateZ(tz) transform: translate3d(tx, ty, tz) 호버기능을 활용하여 translate함수를 적용시켜보았다. .movex:hover { transform: translateX(50px); } .movey:hover { transform.. 2022. 12. 14.
자바 : 피라미드 * 만들어보기 2022. 12. 14.
자바스크립트#04 : 반복문 배열 (array) 여러 자료를 묶어서 활용할 수 있는 특수한 자료 참조 변수에 넣어서 처리한다. (배열의 참조변수는 상수! 따라서 const 처리 해줄것!) 자바스크립트의 배열은 '자료구조-배열'이 아닌 '자료구조-리스트'로 이해하면 된다. 기존 문법의 배열은 모든 공간이 같은 자료형을 갖고 있어야 하지만, 자바스크립트의 배열은 다양한 형태의 데이터를 배열에 넣을 수 있다. 심지어 함수까지도 넣을 수 있다. 아래 사진과 같이 배열의 요소갯수와 함께 요소가 나타난다. 인덱스 배열 인덱스는 다른 언어와 마찬가지로 0부터 시작한다. 배열 요소 개수 배열.length 배열 요소 추가 1. 배열 뒷부분에 요소 추가 : .push("요소") 처음 todos는 삭제되고 가장 최근의 새로 생성된 todos가 새로 생.. 2022. 12. 14.
HTML & CSS #12 : CSS 선택자 연결 선택자 컴비네이션 선택자, 조합선택자 라고도 한다. 선택자와 선택자를 연결해 적용 대상을 한정하는 선택자이다. 하위 선택자 부모 요소에 포함된 모든 하위 요소에 같은 스타일이 적용된다. 자식 선택자 부모 요소 > 자식 요소 자식 요소에 스타일을 적용하는 선택자 인접 형제 선택자 요소1 + 요소2 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소만 적용 두 요소는 같은 레벨이면서 인접해야한다. 형태 선택자 요소1 ~ 요소2 형제 요소들에 스타일을 적용할 때 사용 모든 형제 요소에 적용 가능 속성 선택자 지정한 속성을 가진 요소를 찾아 적용시킬 때 사용 [속성] 대괄호를 사용하는데, 사용여부는 마음대로! a[href] { } =>이런식으로 사용하면 된다. [속성 = 값] 선택자 ==로 생각하면 된다... 2022. 12. 14.
HTML & CSS #11 : 멀티미디어 HTML5부터는 웹 브라우저에서 직접 멀티미디어를 재생시킬 수 있다. , - 외부 파일 삽입 웹 브라우저에서 직접 재생할 수 없는 pdf, 플래시 무비 등 삽입하는 태그 태그 오디오 재생 mp3 파일로 대부분 사용 width, height : 크기 조절 autoplay : 오디오 자동 재생 (크롬, 모바일 제외) controls : 컨트롤 막대 표시 loop : 반복 재생 muted : 소리 끄기 preload : 재생 전 파일 다운로드하여 준비시킴 (none : 재생눌러야 다운로드, metadata : 메타 정보만 다운로드, auto : 웹 문서를 로드할 때 미디어 파일도 모두 다운로드. 기본값은 auto) poster : 포스터 이미지(재생 불가능 시 대신 표시하는 이미지) 속성값은 "경로" 태그 웹.. 2022. 12. 13.
728x90