본문 바로가기

분류 전체보기

 (89)
JS #2-자바스크립트 기초 개념2 (전역 실행 환경, TDZ) 자바스크립트 사용 방식 1. 내부방식 (스크립트 자체를 html 파일 내에 넣어서 사용한다) 2. 외부 방식 (html과 js 파일을 따로 주어 불러주기하여 사용한다.) 2번 방식으로 사용한다. 캐시 외부 방식으로 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하므로, 성능상의 이점이 있으나 바로 수정 반영이 안될 때가 있다. ->강력 새로고침으로 해결해줄 수 있다. 코드 구조 문 -> 값을 반환하지 않는다. 식 -> 값을 반한한다. 암시적 세미콜론 자바스크립트는 '암시적'으로 세미콜론으로 인식하여 실행이 된다. 다만 불완전하게 줄바꿈이 일어나는 경우는 예외 대괄호 앞에서는 세미콜론이 있다고 인식하지 않기 때문에 위와 같은 상황에서는 처리가 되지 않는다. 변수 : 변할 수 있는 수 상수..
JS #1-기초 개념 & 개발환경설정 웹브라우저에서 JS의 기능은 제약이 걸려있다. (웹브라우저를 통해 로컬 파일에 접근할 수 없도록 만들어졌다.) *동일 출처 정책에 의해 도메인이 같은 웹페이지에 대해서만 데이터 교환이 가능하다. ㄴ A 사이트에서 B사이트에서 받아온 페이지상의 정보에 접근할 수 없다. JS만의 강점 html/css와 완전히 통합할 수 있음 간단한 일은 간단하게 처리할 수 있게 해줌 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨 서버, 모바일앱 등에서 구동이 가능하다. 서버: node 라이브서버 터미널에서 실행하기 명령어로 npm 실행하기 npm run dev --> dev를 스크립트로 등록한 상황이다 run을 붙이면 npx로 실행시켜주는 것이다. 2. eslint 설치, 실행하기 $npm init @eslint/c..
Bootstrap 사용 방법 1. getbootstrap 사이트 접속 > all release 버전 클릭 2. 희망하는 버전 클릭 3. css 코드 복사 후 css 파일 link 위쪽에다가 붙여넣기
html/css #21-모달창 만들기, has() 모달 창이 덜컹거리지 않게 하는 방법 모달창 전체를 싸는 div를 하나 만들어서 100vw로 한다. 모달창은 전체 창 (배경 포함) 을 가져간다. 백그라운드를 가져감 head의 크기 조정(반응형) .modal-inside { margin: auto; width: 100%; max-width: 640px; box-shadow: 0 0 20px lime } head의 width는 100%로 주고, max를 통해 제어한다! ㄴ 반응형에 용이 모달의 내용이 늘어나는 경우 modal 전체 페이지에 overflow: auto 를 주어 컨텐츠가 늘어나면 스크롤이 생기도록 한다. 모달창은 재사용성을 고려한다. ... ㄴ modal modal-inside는 재사용성이 가능한 애들이므로, 다음 요소는 통으로 구분되어 가져..
html/css #22-table table의 기본 마크업 구조 ㄴ table > tr > td 연도 제목 감독 관객수 2015 어벤저스 조스 웨던 20명 caption으로 테이블에 제목 넣기 테이블 연대기 rowspan으로 table안의 상하 값이 겹칠 때 병합해준다. 연도 제목 감독 관객수 2015 어벤저스 조스 웨던 20명 2015 어벤저스 20명 colspan으로 table의 좌우 값이 겹칠 때 병합해준다. 총 관객 수 8명 th 태그로 제목행 나타내기 * 제목행에 해당되는 부분에는 태그를 사용한다. 연도 제목 감독 관객수 scope 속성 추가 : 웹 접근성 고려하기 스크린 리더기가 읽기 쉽도록 scope 속성을 추가해준다. 연도 제목 감독 관객수 colspan, rowspan을 사용해서 병합 테이블 만들기 1..
html/css #20-position sticky 속성, 회의실 대시보드 position: sticky ㄴ기본은 relative, 밑의 요소와 충돌하는 순간 fixed로 바뀐다. ㄴ해당 컨테이너가 끝날 때 까지 동작하고 사라진다! 드래그하면 해당 부모 요소의 끝 길이까지 남아있다가 함께 사라진다! 회의실 대시보드 코드 리뷰 wrapper에 padding 필요할 땐 box-sizing: border-box 값 주기 .wrapper { display: flex; height: 100vh; padding: 20px; box-sizing: border-box; border-radius: 28px; } ㄴ 전체 창 기준으로 패딩을 줄 때는 box-sizing: border-box; 를 해줘서 스크롤이 잡히지 않고 예쁘게 마무리 되도록 한다. position:sticky 적용한 head..
html/css #19-form form으로 데이터 보내기 action: 보낼 곳을 적는다. (ex. 이메일주소 비밀번호 로그인하기 form태그 세부 내용 채우기 legend는 form태그에 종속적인 제목 태그이다. label for 를 통해 각각의 용도를 설명해준다. button type은 submit *lable의 for과 input의 ip를 동일한 이름으로 잡아준다. 이메일로 로그인하기 이메일주소 비밀번호 로그인하기 all: unset ㄴ 윈도우에서 제공하는 쓸만한 속성들도 모두 unset 되므로 주의 ㄴ 대표적으로 display: block 요소들이 inline 으로 변한다. button 요소를 컨테이너 크기만큼 가득 채우기 (button / input) inline-size: 100%로 맞춰야함! display: block -..
html/css #18-plate 상하단 반응형 중앙정렬 (flex 정리) 1. 우선 flex를 통해 상하 중앙정렬 시켜주고 height: 600px max-height: 80vh; ㄴ 고정값 600px 값이 max-height를 통해 중앙정렬된다! 1. flex row로 작성 body { margin: unset; } .flex { box-shadow: inset 0 0 20px red; display: flex; height: 100vh; padding: 30px; /*창이 줄어들때 안정감 있게 줄어들기 위해서*/ box-sizing: border-box; } .box { box-shadow: inset 0 0 20px blue; max-width: 960px; max-height: 600px; height: 100%; flex-grow: 1; margin: auto; /*..

티스토리툴바