본문 바로가기

개발/HTML, CSS, JS34

변수, 예약어 변수 데이터를 저장하고 저장된 데이터를 참조(사용)하는 데이터의 이름을 짓는 개념 let이라는 키워드 외에도 var나 const를 사용하여 변수를 선언할 수 있다. 그러나 요즘 사용하는 자바 스크립트에서는 var 키워드는 사용하지 않는 것을 권장한다. 재사용 한 번 선언된 변수는 재사용이 가능하다. => 여러 번 사용할 수 있음! 재할당 let 키워드를 사용해 선언된 변수는 값을 재할당이 가능하다. 그러나 const 키워드를 사용해 선언된 변수는 값을 재할당할 수 없다. 재할당 하려고하면 TypeError가 발생한다. => 일단 const를 사용하여 변수를 선언하고 만약 재할당 해야하는 상황이 발생하면 const를 let으로 코드를 수정하여 사용하는 것이 좋다. 예약어 this, if, break 등은 .. 2023. 1. 11.

데이터 종류(자료형) 자바 스크립트에서 사용되는 데이터의 종류들을 살펴보자. 자바 스크립트는 데이터로 동작한다. 1. String(문자 데이터) 세가지 종류의 기호를 사용하여 문자 데이터를 선언할 수 있다. 변수를 선언할 때에는 let 이라고 표기하여 선언한다. 백틱 기호를 사용하여 문자열을 표현하면 데이터 중간 어딘가에다가 다른 데이터를 보간해서 끼워넣을 수 있다. 이때 ${ } 기호를 사용한다. 2. Number(숫자 데이터) 3. Boolean(불린 데이터) Boolean 데이터는 true, false 두가지 값만 존재한다. 4. Undefined 할당되지 않은 상태의 데이터 5. null null도 어떻게 보면 undefined와 비슷하다고 할 수 있지만 근본적으로 의도적으로 비어있음을 명시했다는 점에서 차이가 있다... 2023. 1. 11.

개요 표기법 HTML, CSS, JavaScript를 통틀어서 4가지의 표기법이 존재한다. dash-case(kebab-case). snake_case, camelCase, ParcelCase thequickbrownfoxjumpsoverthelazydog 라고 작성하면 무슨 의도로 작성한 것인지 한 눈에 파악하기가 어렵다. 그렇기 때문에 기호를 사용하여 컴퓨터는 하나의 단어로 인식하게 하면서도 사람이 읽기 쉽도록 각 단어를 구분해줄 필요가 있다. 1. dash-case 대쉬 기호를 사용하는 표기법 주로 HTML과 CSS에서 사용된다. 2. snake_case 언더바 기호를 사용해서 단어와 단어를 구분해주는 표기법 snake_case 역시 HTML과 CSS에서 주로 사용된다. 3. camelCase 첫번째 단.. 2023. 1. 11.

변환(2) 지난 시간에 배웠던 transform 속성의 값으로 사용되는 변환 함수 중 관찰 대상의 원근 거리를 지정하는 perspective 함수를 알아보았다. 이번 시간에 배울 perspective 속성은 함수가 아니라 속성이다. perspective 함수가 관잘 대상의 원근 거리를 지정하는 함수였다면, perspective 속성은 하위 요소를 관찰하는 원근 거리를 지정하는 속성이다. 원근 거리를 적용하는 대상이 다르다. perspective 속성은 관찰 대상의 부모에 원근 거리를 적용하며, perspective 함수는 원근 거리를 관찰 대상에 직접적으로 부여한다. 기준점이 관찰 대상을 기준으로 적용되느냐, 관찰 대상의 부모 요소를 기준으로 적용되느냐의 차이이다. 주관적인 판단이긴 하지만 perspective 함.. 2023. 1. 9.

변환(1) transform transform의 속성은 값으로 여러가지 변환 함수를 띄워쓰기로 구분하여 다양하게 활요할 수 있다. transform의 속성 값으로 사용할 수 있는 변환 함수의 종류로는 원근법, 이동, 크기, 회전, 기울임을 통제하는 변환 함수들이 있다. transform에 사용할 수 있는 변환 함수는 크게 2차원 변환함수, 3차원 변환함수 이렇게 2가지 종류로 나뉜다. translate는 이동을 담당하는 변환 함수로 인자로 x축, y축으로 얼만큼 이동시킬 것인지 명시해주어야 하며 단위는 px(픽셀)이다. scale 함수는 요소의 크기를 늘려주는 변환 함수로 인자로 몇 배를 늘릴 것인지 명시해주며 단위는 없다. 보통 한 쪽 방향으로만 크기를 키우는 경우는 잘 없기 떄문에 scaleX, scaleY 함.. 2023. 1. 9.

전환 hover이나 active등의 가상 요소 선택자를 사용하여 요소가 선택되었을 때만 스타일을 적용할 수 있게 된다. 그러면 특정 요소가 선택되었을 때 기존의 스타일에서 새로운 스타일로 전환하게 되는데, 이때 자연스럽게 전환되도록 보이게 하기 위해서 transition이라는 속성을 사용할 수 있다. transition 요소의 전 상태와 후 상태를 자연스럽게 만들어주는 전환 효과를 지정하는 단축 속성이다. 단축 속성이라는 것은 그것에 해당하는 개별적인 속성이 있다는 뜻이다. 그 중에서 지속시간을 명시하는 transition-duration 값은 반드시 명시해주어야 하는 필수 포함 속성이다. 1. transition-property 전환 효과를 적용할 속성의 이름을 지정하는 속성으로 기본 값은 all 이다. 그.. 2023. 1. 9.

플렉스(정렬) items 여기서 살펴볼 속성들은 플렉스 컨테이너가 아닌 아이템에 적용되는 속성들이다. order Flex item들의 정렬되는 순서를 지정해줄 수 있다. 기본적으로 0이라는 값이 들어있으며 이는 순서가 없음을 의미한다. 기본값이 적용된 item보다 더 앞에 배치하기 위해서는 order값을 음수로 지정해주면 된다. HTML 구조를 변경하지 않고도 order 속성만을 이용해서 아이템들의 순서를 바꿀 수 있다는 장점이 있다. 숫자가 작을 수록 앞에 배치되는 것을 확인할 수 있다. flex-grow 요소가 증가하는 비율 기본적으로 값이 0으로 설정되기 때문에 flex-grow 속성값을 별도로 지정해주지 않으면 요소는 늘어나지 않는다. item들의 flex-grow 속성 값을 1로 지정해주면 세 요소에 모두 값이 1로 적.. 2023. 1. 9.

플렉스(정렬) Container(2) flex-wrap 요소들의 줄바꿈 여부를 설정하는 속성 기본적으로는 nowrap으로 설정되어 있어 줄 바꿈이 허용되지 않는다는 뜻이다. 줄 바꿈을 허용하지 않으면 item이 container를 튀어나가려고 하면 item을 찌그러트려서 어떻게든 한 줄에 담으려고 하게 된다. flex-wrap 속성의 값을 wrap으로 해서 줄 바꿈을 허용하면 item이 container를 나가려고 하면 자동으로 줄바꿈을 하게 된다. justify-content 주 축의 정렬 방법을 결정. 우리는 대부분 flex 정렬을 수평 정렬을 하기 위해 사용하기 때문에 대부분 수평 정렬의 방법을 결정하기 위해 사용된다고 생각하면 된다. 이때 item들의 순서는 변경되지 않는다. => 주의할 점은 오른쪽 정렬을 한다고 해서 right를 .. 2023. 1. 8.

플렉스(정렬) Container(1) 플렉스 정렬이란? : 수직이든 수평이든 1차원의 하나의 축을 가지고 정렬을 하는 개념. 하지만 대부분 수평 정렬을 하는데에 사용된다. 블록 요소는 기본적으로 수직 방향으로 쌓이기 때문에 아무런 설정이 없으면 수직 방향으로 블록이 쌓이는 것을 볼 수 있다. 하지만 display 속성의 값으로 flex를 주게 되면 블록이 수직 방향이 아닌 수평 방향으로 정렬된다. 부모 요소의 display 속성 값을 flex로 선언하면, 블록들은 수직이 아닌 수평 방향으로 쌓이게 된다. 이때 flex 값이 부여된 부모 요소는 container가 되고 그 요소의 자식 요소들은 item이 된다. Container와 Item에 대한 개념이 왜 필요하느냐? container에 부여할 수 있는 속성이 따로 있고, 마찬가지로 item.. 2023. 1. 8.

이전 1 2 3 4 다음

티스토리툴바