본문 바로가기

Language40

Javascript 주석 주석 // 한 줄 주석 /* 여러 줄 주석 */ 주석활용 1. 공동 업무 진행 시 소스에 대한 정보 전달 2. 작성한 소스를 다시 분석할 때 참고 3. 라이브러리의 용도. 만든 날짜와 만든 이의 정보등을 남김 4. 특정 구문을 잠시 실행시키지 않을 때 5. 파일의 용도를 설명 6. 함수 용도를 설명 2022. 5. 17.
Javascript 변수와 데이터 변수란?데이터의 종류변수와 데이터의 차이를 이해했다. 변수는 데이터를 담는 박스의 개념.변수를 선언하고 값을 입력하지 않거나, 이름이 잘못된 경우 console에서 확인할 수 있다. 오류를 찾는 방법. undefined혹은 error로 표시.null의 쓰임이 뭘까? 초기화할 때 사용한다는 부분이 잘 이해되지 않는다.변수란?데이터를 저장하고, 읽고 쓸 수 있는 장소. 데이터를 저장하는 박스의 개념.변수를 활용해 데이터 중복 제거 및 재사용이 가능. 변수 만들기          var 변수이름 = 데이터; 여기서 var는 변수 선언을 의미하는 키워드이다. 변수를 여러개 만들때var를 이용해 여러줄로 나누어 변수를 구분           var 변수이름1 = 데이터;          var 변수이름2 = 데이.. 2022. 5. 17.
CSS3 flexible box layout display flex속성을 이용해 요소들을 배치하는 방법주축과 교차축을 기준으로 요소를 정리하는 방법flex-direction 속성을 이용해서 주축과 교차축을 바꿀 수 있다. 이를 이용해서 가로로 혹은 세로로 정렬할 때 float보다 편하게 정렬이 가능하다.flex-direction reverse는 어디에 쓰이는걸까? 굳이 순서를 반대로 해서 정렬할만한 경우가 있는지?flexible box layout플렉스 컨테이너(flex container) : 배치할 요소들을 묶어주는 역할.플렉스 항목(flex item) : 플렉스 컨테이너 안에 위치하는 배치할 요소.주축(main axis) : 플렉스 컨테이너 안에서 요소들을 배치하는 기본 방향. 왼쪽(주축 시작점)에서 오른쪽(주축 끝점)으로 수평방향 →교차축(c.. 2022. 5. 16.
CSS display 속성 display:none과 visibility:hidden의 차이display:block과 display:inline-block의 차이display:none 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않는다. (특정 요소를 hover상태에서 노출되도록 할때 사용할 수 있다. )visibility:hidden는 어디에 사용하는가?display 속성화면 보여주는 방식display:none; 화면에서 숨김. 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않음 (삭제의 개념)display:block; 블록레벨요소로 만듬.display:inline; 인라인 레벨로 만듬 / 주로 목록에서 사용 /박스 모델 값이 적용 안됨.display:inline-block; 인라인 레벨로 배치 + 블록 레벨 속성 지정.[화면에.. 2022. 5. 8.
CSS속성 transition 시간에 따른 속성 적용 transition-delaytransition-durationtransition-propertytransition-timing-function transition-timing-function 을 이용해서 자연스럽게 효과를 줄 수 있다. ease-in-out transition이란? 시간에 따라 웹 요소의 스타일 속성이 변함transition : transition 속성을 한번에 설정transition-delay: 트랜지션 지연 시간 설정transition-duration : 트랜지션 진행 시간 설정 / [시간]transition-property : 트랜지션 대상을 설정 / [all], [none], [속성 이름] transition-timing-function : 트랜지션 속도 곡선을 설정속도 곡선 종.. 2022. 5. 6.
CSS 애니메이션 애니메이션 속성을 이해한다.애니메이션을 이용해 요소를 이동시킨다.애니메이션을 이용해 시간차 효과를 줄 수 있다.애니메이션을 이용해 움직임의 속도를 조절할 수 있다.%단위로 키프레임을 지정할 수 있다. 이를 이용해 더 동적인 무빙을 만들어낼 수 있다.애니메이션을 반복할 경우, animation-delay 가 처음에만 적용되는데, 반복 될 때마다 지연되도록하는 방법은?애니메이션이란?CSS3의 animation 속성을 사용하여 자바스트립트나 플래시 없이 웹요소에 애니메이션을 추가할 수 있다. Keyframes : 애니메이션이 바뀌는 지점을 @keyframes 속성을 이용해 정의. from : 애니메이션의 시작 프레임를 설정함to : 애니메이션의 끝 프레임를 설정. @keyframes keyframesName .. 2022. 5. 5.
CSS border 여러 속성 border-styleborder-radius간단하게 버튼을 만들거나 할 때 border-radius로 모서리에 라운드를 주면 자연스럽다.Q : border-style 중에서 outset이나 ridge랑 함께 border-radius를 쓸 수 있나?  A : 쓸 수 있지만 자연스럽진 않다.border 속성이란?border-style : 테두리 스타일 지정border-style은 기본값이 none이기 때문에 테두리 스타일을 지정하지 않으면 다른 속성들을 지정해도 표시되지않는다.주로 사용되는 속성 값은 solid 실선 none테두리 없음. 기본 값. (존재하지않는다는 표현이 더 정확함)hiddennone과 마찬가지로 테두리가 없다. 다만 보이지 않는 상태. none의 경우 테이블끼리 경계가 충돌하면 보이지만.. 2022. 4. 24.
CSS 인라인 요소 , 블록레벨 요소 인라인요소 , , , , , , , , , , , 주로 내용부분 즉 화면에 표시한 콘텐츠. 한줄에 여러개가 정렬. 가로로 배열. 자신만 크기를 인식하여 표시. width, height를 적용하여 사용할 수 없음. 블록레벨요소 , , , , , ~, , , , , , 기본적으로 세로정렬. 한줄에는 하나씩, 즉 가로폭을 자신이 100% 인식. width, height를 적용하여 사용 > background-clip 적용할 때 width랑 padding값이 없어서 제대로 적용이 안됨. 2022. 4. 22.
CSS gradient 속성 그러데이션 효과 적용선형 그러데이션 원형 그러데이션그러데이션 반복그러데이션 효과는 브라우저와 버전별로 사용법이 다르다.한번에 여러개의 그러데이션을 적용할 수 있나?각기 다른 방향으로 생성이 가능한가?그러데이션 효과로 배경 꾸미기그러데이션과 브라우저 접두사그러데이션 함수를 이용해 만드는 배경은 크기가 없는 배경 이미지이므로 그러데이션 값을 background-image속성 값이나 background속성값으로 지정한다.선형 그러데이션linear-gradient( to , color-stop, [color-stop,..]);방향'to' 키워드를 함께 사용to top : 아래에서 위로to bottom : 위에서 아래로to right : 왼쪽에서 오른쪽으로to left : 오른쪽에서 왼쪽으로각도각도이고 그 값은 .. 2022. 4. 19.

티스토리툴바