본문 바로가기

🌌 | WEB DEV115

JS_기본 문법 (1)_변수 ~ 데이터타입 1. 변수 let 변수명; let 변수명 = 값; 변수 선언 키워드 let let a = 10; console.log(a); a = 5; console.log(a); >>> 10 5 console.log()를 통해서 값 출력 상수 const 상수명 = 값; const를 이용해 상수를 선언할 수 있으며 초기화도 반드시 함께 진행되어야한다. 당연히 새로운 값을 할당시키는 것은 불가하다. 상수명은 대문자 및 언더바를 활용하는 것이 일반적이다. MY_NUMBER MAX_COUNT ※ 이때, const로 객체를 생성한 경우 요소 자체를 재할당하는 것은 불가능하지만, 객체 내부의 값을 변경하는 것은 가능하다. 주석 // /**/ 주석은 다음과 같다! // /* */ 2. 자료형 (6종) 1) number 정수&부동.. 2022. 2. 7.

JS_코딩환경 구축(w. VSCODE) JS의 코딩환경을 vscode를 이용해서 구축을 해보았다! 1. 폴더생성 후 .js파일 만들기 (파일명).js 로 생성을 한다. 2. node.js 설치 https://nodejs.org/ko/download/ 해당 OS에 맞는 것으로 설치 3. Code Runner(extension) 설치 4. Run By Language (ctrl + Alt + j) ctrl + k , ctrl + s (바로가기 키)에서 coderunner를 검색하면 위와 같은 화면을 확인할 수 있는데 이 중 Run By Language (ctrl + Alt + j)를 입력한다. javascript를 설정한다. 5. Run code (ctrl + Alt + n) 코드를 실행시킨다! 2022. 2. 7.

CSS_flex(2) 들어가기에 앞서 flexbox를 다루기 위해서 축의 개념을 알아보면, 주축, 교차축이 있다. 주축 = 가로정렬->가로축, 세로정렬->세로축 교차축 = 주축의 수직 위의 축은 flex-direction으로 지정할 수 있는데 가로 : row, row-reverse 세로 : column, column-reverse 위와 같은 값을 넣어주면 된다. 이 축의 개념은 요소를 정렬할 때 필수적인 개념이다! flexbox에는 부모요소인 flex container 자식요소인 flex items 로 구성이 되어있다. 또한 이에따라 적용할 수 있는 속성도 다르다! 참고자료 ↓ (https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concep.. 2022. 1. 30.

CSS_flexbox(1) 수평정렬 flexbox 부모요소 내의 자식요소들에 대한 공간 배분, 정렬을 할 수 있는 모델이다! css에서 레이아웃을 구성할 때 float을 이용하였지만 최근에는 flex를 점점 많이 사용하는 추세이다. 사실 호환성문제로 사용 수가 적었는데 많이 해결이 되었다고 한다. 수평정렬 다른 방법들과의 비교 먼저 기존에 다뤘던 것들을 살펴보자! 1. float item1 item2 item3 .container{ width: 400px; border: 1px solid #000; /* overflow: hidden; */ /*이 속성을 이용해도 된다.*/ } .item { width: 100px; height: 100px; border: 1px solid #000; background: gold; border-radiu.. 2022. 1. 30.

HTML & CSS 활용 프로젝트_ 카드셔플 & 디스펜싱 코드 .container{ width: 500px; height: 500px; border: 1px solid #000; position: relative; } .box{ width: 100px; height: 130px; border: 1px solid #000; border-radius: 5px; position: absolute; top: 35%; left: 40%; } .btn{ width: 50px; height: 50px; border: 1px solid #000; } .box1{ background: crimson; z-index: 1; } .box2{ background: darkorange; z-index: 0; } .box3{ background:gold; z-index: 0; } .b.. 2022. 1. 28.

CSS _transition(2) (timing-function) 저번에 이어서 transition 두 번째 timing-function을 알아보았다. timing-function 전환효과의 시간당 속도를 조정한다. 값의 종류 1. ease : 기본값 / 점점 속도가 증가하다가 느려짐 2. linear : 똑같은 속도로 끝까지 3. ease-in : 천천히 시작하여 끝날때까지 빨라짐 4. ease-out : 빠르게 시작해서 느려지며 끝 5. ease-in-out : 천천히 시작해서 빨라졌다가 다시 느려짐 6. steps(단계 수, jump-term) 7. step-start : steps(1, start)와 동일 8. step-end : steps(1, end)와 동일 9. cubic-bezier(p1, p2, p3, p4) : 베지어 곡선 1~5까지 모두 베지어 곡선.. 2022. 1. 14.

CSS _transition(1) (property, timing, delay) 저번에 css가상클래스 hover를 알아볼 때 잠시 다뤘던 transition에 대해서 좀 더 공부해보았다. transition = 변경 이다. 따라서 요소의 상태 변화를 다룰 수 있는데 transition은 단축 속성이고 property, duration, delay, timing-function 이렇게 4가지가 있다. 각각을 간단히 알아보면 1. property : 변화를 적용시킬 CSS 속성 지정 2. duration : 변화시간 지정 3. delay : 지연 시간 지정 (시간 지난 후 시작) 4. timing-function : 변화되는 과정 중 속도 지정 property & duration div:hover { transition-property: width; transition-duration.. 2022. 1. 14.

CSS의 크기단위들!(px, em, rem, vw 등) CSS의 다양한 단위들에 대해서 알아보자! 그 중에서도 주로 사용하는 것들을 정리해보았다. 우선 2종류로 나눌 수 있다. 절대 단위 고유한 크기를 갖는다. 즉, 타 요소에 영향 받지 않는다. 종류 px : 픽셀 / 컴퓨터 이미지, 디스플레이를 구성하고 있는 최소 단위 상대 단위 요소에 지정된 크기(상속된 크기값 or 기본 크기값)에 대한 상대적인 크기를 갖는다. 반응형 웹등 상황에 맞추어 변해야하는 경우 활용한다. 종류 % : 퍼센트 / 상대 비율 em : 배수 / 상속에 따라서 값이 계속 변한다. (중첩이 됨) rem : 최상위 요소에 대한 배수 / em과 다르게 절대적 기준이 있어 다른 값을 가리키지 않는다. (16px이 기본 설정이므로 아무 설정없이하면 16px적용!) em vs rem 예시 1. .. 2022. 1. 9.

CSS 가상클래스 (3)_순서 가상클래스[2] (first-child, last-child) 저번시간에 이어서 순서부여 가상클래스! 순서부여 가상클래스는html에 따로 클래스를 부여하지 않아도 원하는 요소 접근할 수 있도록 하기 위해서 사용한다. first-child 해당 선택자의 가장 첫 번째 요소 last-child 해당 선택자의 가장 마지막 요소 당연하지만 nth-child와 달리 순서를 뜻하는 숫자는 필요하지 않다. 예시 공지사항 갤러리 2022 신년인사 수강신청 방법 안내 장학금 신청기간 안내 복학 신청 안내 동계 방학 기간중 도서관 운영 안내 전체 CSS코드 .tab-inner { width: 400px; } .btn span { background-color: #ccc; display: inline-block; width: 120px; padding: 5px; font-weight:.. 2022. 1. 7.

이전 1 ··· 8 9 10 11 12 13 다음

티스토리툴바