원래는 for문 안에 초기값; 조건식; 증감문 이렇게 3개가 들어가야 하지만,
초기값의 경우, 밖으로 빼서 정의할 수 있음.
이때, 유의사항 => 반드시 for문 안에 세미콜론(;)이 표기되어야 한다!
| 문자열 메소드 학습하기 (0) | 2023.01.25 |
|---|---|
| 반복문 (for of, while, do while) (0) | 2023.01.25 |
| IF문 작성 시, 괄호 생략관련 (0) | 2023.01.24 |
| 오토셋 서버 활용 ajax load( ) 사용하기 (0) | 2023.01.06 |
| 자바스크립트 템플릿 리터럴 및 역따옴표("백틱") 개념정리 (0) | 2023.01.01 |
1.IF문 작성 시, 실행부가 한 줄로 끝나는 경우
1) 중괄호 없이 생략 가능
2) 아예 조건을 작성한 괄호 옆에다가 작성할 수도 있음
| 반복문 (for of, while, do while) (0) | 2023.01.25 |
|---|---|
| for문 사용 시, 초기값 및 증감문을 밖으로 뺄 때 작성법 (0) | 2023.01.24 |
| 오토셋 서버 활용 ajax load( ) 사용하기 (0) | 2023.01.06 |
| 자바스크립트 템플릿 리터럴 및 역따옴표("백틱") 개념정리 (0) | 2023.01.01 |
| 자바스크립트 내 이미지 경로 가져올 때 (0) | 2022.12.23 |
1.em이란? :
- element의 약자, px, pt와 달리 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 상대 단위!
2.사용방법 :
- em, rem 모두 CSS의 font-size 속성값에 따라 결정된다.
예를 들어 font-size가 16px인 경우,
1em = 16px
2em = 32px
3em = 48px
3.em과 rem의 차이점 :
- em은 해당 단위가 사용되고 있는 요소의 font-size
- rem은 root, 즉 최상위 요소 <html>요소의 font-size 속성 값이 기준이 됨.
*참고사이트
| jQuery PC 및 Mobile 버전 체크 (0) | 2023.02.12 |
|---|---|
| counter-increment 속성 (0) | 2023.02.12 |
| border-box vs content-box 차이점 (0) | 2023.01.24 |
| vh vw 그리고 %와 차이점 (0) | 2023.01.24 |
| 플렉서블 박스 flexible box 레이아웃 (0) | 2023.01.24 |
CSS box-sizing 속성 차이점
1.content-box :
- 지정한 CSS width 및 height를 컨텐츠 영역에만 적용
2.border-box :
- 지정한 CSS width 및 height를 전체 영역에 적용
*참고사이트
https://dasima.xyz/css-box-sizing-content-box-vs-border-box/
| counter-increment 속성 (0) | 2023.02.12 |
|---|---|
| CSS에서 em과 rem 의 의미 (0) | 2023.01.24 |
| vh vw 그리고 %와 차이점 (0) | 2023.01.24 |
| 플렉서블 박스 flexible box 레이아웃 (0) | 2023.01.24 |
| (CSS)에서 hr, td 스타일 적용시 유의사항 (0) | 2022.11.20 |
1.정의 : 현재 실행중인 스크린 크기에 맞춰 상대적 크기 반환
- vh : viewport height
- vw : view width
> 100vh, 100vw가 전체 화면의 기준이 됨.
> 예를 들어, height 1000px / width 800px 이라고 가정 시,
1vh = 10px / 1vw = 8px 이 됨.
> height: 50vh = 500px / width: 25vw = 200px
2.%와 차이점
- vh와 vw는 열려있는 화면 전체의 상대길이를 의미 = 스크롤바를 포함한 길이 반환
- %는 창이 중심이 아닌, %를 사용하고 있는 요소의 부모 요소의 길이에 맞게 반환
*참고사이트
| CSS에서 em과 rem 의 의미 (0) | 2023.01.24 |
|---|---|
| border-box vs content-box 차이점 (0) | 2023.01.24 |
| 플렉서블 박스 flexible box 레이아웃 (0) | 2023.01.24 |
| (CSS)에서 hr, td 스타일 적용시 유의사항 (0) | 2022.11.20 |
| (border)에서 두께와 스타일을 별도로 만들고 싶을 때 (0) | 2022.11.19 |
1.플렉서블 박스 = 플렉스(flex) 박스라고도 부른다.
2.CSS3에서 처음 소개된 레이아웃 모델
3.주요개념
- flex-direction : 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향 설정
1) row : 기본설정 / 왼쪽에서 오른쪽으로
2) row-reverse : row의 반대 / 오른쪽에서 왼쪽으로
3) column : 위쪽에서 아래쪽으로
4) column-reverse : column의 반대 / 아래쪽에서 위쪽으로
- justify-content : 플렉스 요소의 수평 방향 정렬 방식 설정
- align-items : 플렉스 요소의 수직 방향 정렬 방식 설정
- flex-wrap : 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소 위치를 다음 줄로 넘길지 여부 결정
*참고사이트
https://ipex.tistory.com/entry/CSS3-flex-Box-flexdirection-%EC%83%9D%EC%84%B1-%EB%B0%A9%ED%96%A5
http://www.tcpschool.com/css/css3_expand_flexbox
| border-box vs content-box 차이점 (0) | 2023.01.24 |
|---|---|
| vh vw 그리고 %와 차이점 (0) | 2023.01.24 |
| (CSS)에서 hr, td 스타일 적용시 유의사항 (0) | 2022.11.20 |
| (border)에서 두께와 스타일을 별도로 만들고 싶을 때 (0) | 2022.11.19 |
| (css)에서 (margin) 값 설정시 ","는 넣지 말자! (0) | 2022.11.19 |
[36강 addEventListener]
1.EventListener : onkeydown 과 같은 이벤트 속성들을 직접 지정할 수 있도록하는 기능
| 35강 appendChild (0) | 2023.01.24 |
|---|---|
| 34강 JS로 HTML 태그 생성 (0) | 2023.01.24 |
| 33강 키보드 event 체크 (0) | 2023.01.24 |
| 32강 DOM 이란? (0) | 2023.01.24 |
| 31강 <ul>, <ol>, <li>태그 (0) | 2023.01.24 |
[35강 appendChild]
1.appendChild 메서드 : 특정 요소의 하위에 어떤 속성을 추가하고자 할 때, 사용
| 36강 addEventListener (0) | 2023.01.24 |
|---|---|
| 34강 JS로 HTML 태그 생성 (0) | 2023.01.24 |
| 33강 키보드 event 체크 (0) | 2023.01.24 |
| 32강 DOM 이란? (0) | 2023.01.24 |
| 31강 <ul>, <ol>, <li>태그 (0) | 2023.01.24 |
[34강 JS로 HTML 태그 생성]
1.자바스크립트에서 태그를 생성하는 메서드 : document.createElement( 작성하고싶은 태그 입력 )
| 36강 addEventListener (0) | 2023.01.24 |
|---|---|
| 35강 appendChild (0) | 2023.01.24 |
| 33강 키보드 event 체크 (0) | 2023.01.24 |
| 32강 DOM 이란? (0) | 2023.01.24 |
| 31강 <ul>, <ol>, <li>태그 (0) | 2023.01.24 |
[33강 키보드 event 체크]
1.onkeydown 속성 : 해당하는 태그 영역 내에서 키보드 버튼이 눌렸을 때, 동작하게 된다.
2.window( ) : 전역객체 => 최상위, 가장 높은 공간에서 존재하고 있는 객체
3.event : 현재 페이지에서 벌어지고 있는 어떠한 이벤트를 체크해줄 수 있는 속성
- window.event => event는 굳이 앞에 window를 꼭 붙여줄 필요가 없다.
| 35강 appendChild (0) | 2023.01.24 |
|---|---|
| 34강 JS로 HTML 태그 생성 (0) | 2023.01.24 |
| 32강 DOM 이란? (0) | 2023.01.24 |
| 31강 <ul>, <ol>, <li>태그 (0) | 2023.01.24 |
| 30강 storage 데이터 유무에 따른 조건문 (0) | 2023.01.24 |