Developer Note/국비과정 수업내용 정리&저장 83

24년 09월 02일

오전javascript 배열우선 자바스크립트 배열은 한 배열안에 여러 종류의 자료형을 같이 쓸 수 있다.arr = [1,2,3,'대해',123123.12414,'ㅂㅇ']그리고 java에서는 배열에서 없는 인덱스 값을 입력하면 오류가 나는데 js는 지정 인덱스에 값이 없다면 그 값을 새로 생성한다.const arr = [1,2,3]console.log(arr[2]) //가능arr[5] = 'a' //5번 째 인덱스에 'a' 값이 생성됨//그러나 그 사이에 값은 undefined로 지정됨이를 “동적 처리” 라고 함.콜백함수란? :다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 를 말한다. 그리고, 함수를 만들때, parameter 를 함수로 받아서 쓸 수 있는데 그 함수를 “콜백 함수” 라고..

24년 08월 30일

오전부트스트랩 사용법 배우는 중 부트스트랩 만으로 레이아웃 만들어보기 하는 중 tr td테이블 생성오전 마지막 시간 자바스크립트 시작오후javascriptundefinednull둘의 차이 *** : undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다.변수이름 선언할 때 보통 카멜표기법 많이씀 , 함수 이름도(첫글자 소문자. 단어 시작할 때 대문자)defer :defer 속성defer 속성은 스크립트를 '백그라운드'에서 다운로드한다.그리고 defer 스크립트는 일반 스크립트와 마찬가지로, 순서를 지키며 실행되므로 앞선 script가 무겁고 뒤의 스크립트가 가볍다고 해도 순서대로 실행된..

24년 08월 29일

오전클론코딩 계속 작업중.. 오늘 클론코딩을 js(자바스크립트) 없이 css만 사용해서 만들기를 하고 있는데 하면서 깨달은 점이 있다.css 만으로도 웹페이지 기능들을 구현가능하지만 너~~~무 오래걸린다.(선생님조차도 배너 하나 만드는데 몇시간이 걸렸음..) css만으로 웹페이지를 만드려고 하면 선택자를 일일히 다 지정해주어야 하기 때문에 일이 너무 복잡해지고 힘들어진다.이럴 때는 js를 사용해서 변수로 작업해야 작업이 수월해짐..banner>.slide-block>#s2:checked~.slide-wrapper{ left:-1160px; opacity: 1;} // id s2가 체크 됐을 때 .slide-wrapper 클래스가 -1160px 만큼 이동.banner>.slide-block>#s..

24년 08월 28일

오전미디어쿼리 : 반응형 웹을 제작하고자 할 때 사용한다.사용법은@media screen and (min-width:375px) and (max-width: 400px) { /*코드 작성*/} //가로너비 375 이상 400 이하일 때 미디어 쿼리 안의 css 를 적용한다는 뜻이다. 분기점 : 스마트폰 세로: 0px ~ 480px스마트폰 가로, 태블릿 : 481px ~ 768px태블릿 가로, 노트북 : 769px ~ 1279px데스크탑 : 1280px ~ (1920px 까지 보통 많이 사용함)이에 맞게 미디어 쿼리를 작성한다면/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/@media all and (min-width:1024px) and (max-width:1279px) { //..

24년 08월 26일

오전현재 TransForm 배우는중 요소가 부드럽게 변하는 효과 주기sitemenu체크박스 만든후에밑에다가 block 속성의 span 태그 3개 만듬 여기서 오른쪽 위 막대3개를 클릭하면 wrapper의 background 색이 바뀐다.visibility : hidden ; 은 말 그대로 요소를 숨기는 것 뿐이기 때문에display: none ; 과 다르게 공간을 여전히 확보중이기 때문에 레이아웃에 영향을 미치고 있는 상태이다.Transform3Dperspective : 뷰어와 요소와의 거리transform-style : 요소의 표현 방식 a{text-decoration: none; color:black;} .top-header>ul{ display: flex; ..

24년 08월 23일

오전display : flex박스안의 요소들을 가로로 배치하는 속성.여기에 보통 같이 많이 사용하는게justify-content : 축 수평방향 정렬flex-start : flex 방향 시작점 기준 (기본값)flex-end : flex 방향 끝점 기준center : 중앙 정렬space-between : flex 방향 양 끝점 기준 (양 끝에 붙혀서)space-around : flex 방향 중앙점과 양 끝 기준 (양 끝과도 간격을 둠)align-items : 축 수직 방향 정렬stretch : 수직 방향에 최대한 늘려서 (기본값)flex-start : 수직 방향에 위쪽flex-end : 수직 방향에 아래쪽center : 수직 방향 가운데baseline : 컨테이너의 기준선에 배치flex-wrap자식 요소들..

24년 08월 22일

오전체크박스체크박스를 만들어주는 속성이메일 수신 동의//id를 지정해서 속성을 주도록 자주 사용한다.css style 에서 선택자input[type=’checkbox’]{}a 태그a:hover{ //a태그에 마우스 커서를 갔다 댔을 때a:active{ //a태그를 클릭(active)했을 때a:visited{ //a태그를 한번이라도 사용(클릭)하고 났을 경우.position **(중요)position : box의 위치를 지정할 때 사용하는 속성static(Default) :box요소가 문서 흐름에 따라 배치(순차적)relative :box요소가 문서 흐름에 따라 배치(순차적)요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.absolute :상위 box요소롤 기준으로 위치 지정가능..

24년 08월 21일

#CSShtml 파일에서 css 파일 불러오기 : //common.css 파일을 불러옴 오후font-sizefont-size 도 크기 단위를 사용한다.px : 고정 크기 지정em : 부모 태그 폰트사이즈 지정 되어있고부모 요소를 기준으로 크기 측정. 부모 font size 가 16이라면 2em 은 32.rem : 기본글자크기(root)(16px) 을 기준으로 크기 측정. 기본크기가 16이라면 2rem은 32% : 상위태그를 기준으로 측정. 상위태그가 32px이라면 50%는 16pxa태그는 부모 속성 영향을 안받음(그래서 따로 지정해줘야됨)font-weight : 글자 굵기text-decoration : 글자 밑줄 , 없애기 등font-family : 글꼴 지정.사용하는 글꼴, 글꼴 사용할 수 없을때 ..

24년 08월 20일

video 태그 : html에서 video 파일을 재생시켜 준다.autoplay : 자동재생 (실행하지 않아도 자동으로 재생이 된다.)muted : 음소거loop: 무한재생 / 자동재생 , 음소거 , 무한재생  유튜브에서도 iframe을 사용해서 동영상 재생창을 화면에 띄운다.유튜브 자동재생 api : iframe body::-webkit-scrollbar{ display: none; / 크롬 웹의 스크롤바를 없앰.  .bg-video{ width :100vw; height : 100vh; position: fixed; left:0; top: 0; ..

24 년 08월 19일

HTML 이란?HTML 은Hyper Text Markup Language 약어로HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.시멘틱 마크업 : 기본 뼈대,구조가 되는 코드문법 DTD : 도큐먼트 타입, 선언하지 않을 경우 비표준모드로 렌더링 되어서다른 브라우저에서 접속한다거나 하는 경우에 레이아웃이 깨져서 보이게 된다 . VS CODE EXTENSION : LIVE SERVER , PRITTER ( 추천 확장팩)10시HTML 기본 구조에 대해 배우는중. VS..