본문 바로가기

45

Javascript | 데이터 타입 모음 자바스크립트의 기본 데이터 타입들을 알아보자!! 자바스크립트에는 여러 개의 데이터 타입들이 존재합니다. 그러면 어떤 데이터 타입들이 존재하고 어떻게 사용할수있는지 알아보겠습니다. 숫자 타입 자바스크립트에서 숫자를 사용해서 간단한 수학을 할 수 있고 또 자바스크립트에 내장돼있은 수학 함수들을 사용해서 sin/cos 같은 수학도 할 수 있습니다. 우리가 아는 기본 수학 기호들은 더하기(+), 빼기(-), 나누기(/), 그리고 곱하기(*) 가있죠 그런데 코딩에서는 수학기호 하나가 더 있습니다, 바로 모듈러(%)입니다. 모듈러는 나누기와 비슷하지만 반대로 작동합니다. 나누기는 나누어진 숫자를 주고 (30 / 3 = 10) 모듈러는 나머지 숫자를 줍니다 (30 % 3 = 0) 자바스크립트 자체에 있는 수학 함수를.. 2021. 8. 9.
Javascript | 자바스크립트, 이건 뭐지? 어서 와, 자바스크립트는 처음이지? 안녕하세요 Javascript(자바스크립트)의 세계로 오신 걸 환영합니다 자바스크립트는 웹 개발의 꽃 이라고 할 수 있는 부분인데요 웹 브라우저에서만 작동되는 언어로 웹 페이지에서 유저의 행동에 반응할때 사용됩니다 예를 하나 들어볼게요 다크모드 아시죠? 웹사이트의 전체적 색이 어두워지는 거 이 다크모드 버튼을 클릭했을 때 웹사이트의 스타일(CSS)을 바꾸는걸 자바스크립트가 해주는 겁니다 이 외에도 정말 많은 일들을 할수있는데요 어떤 것들을 할 수 있는지 알아보기 전에 자바스크립트를 어떻게 사용하고 어떻게 작성하는지를 먼저 알아볼게요 오늘은 처음이니까 제일 기본들만 알아볼게요 자바스크립트 사용하기 자바스크립트는 두 가지 방법으로 사용할 수 있습니다 첫 번째는 HTML의 .. 2021. 6. 21.
CSS 쉽게 배우기 | CSS만으로 애니메이션 만들어 봤니? CSS만으로 재밌는 애니메이션 만들기 안녕하세요 오늘은 CSS편의 마지막으로 애니메이션을 알아볼게요 CSS로 애니메이션이라... 디즈니 같은 애니메이션은 아니지만 재미있는 웹사이트를 만들기는 충분하죠 CSS의 애니메이션을 쉽게 이해하는 방법은 플립북 애니메이션을 생각하시면 됩니다 여러 장의 종이를 사용하는 대신에 CSS 애니메인션에서는 "xx부터 xx까지"라는 콘셉트를 사용합니다 이 범위안에서 요소의 스타일과 애니메이션의 반복, 그리고 속도를 조절하는 거죠 애니메이션을 사용하려면 애니메이션을 넣고 싶은 요소에 애니메이션 속성들을 정하고 키 프레 임안에 바꾸려는 스타일들을 작성하면 됩니다 애니메이션 속성들 알아보기 애니메이션에 필요한 속성들로는 animation-name (애니메이션 이름) animatio.. 2021. 6. 5.
CSS 쉽게 배우기 | Pseudo Class(수도 클라스)2 CSS 수도 선택자로 요소 선택폭 넓히기 저번편에 이어서 수도 클라스 두번째 편입니다 지난번에 수도 클래스에는 상태에 관련되 선택자, 일반 선택자의 연장선, 이렇게 두 종류의 속성을이 있다고 했었죠 이번편에서는 그 두 번째인 일반 선택자의 연장선을 알아볼게요 일반 선택자의 연장선이란? 일반 선택자라고 하면 어감이 좀 이상하지만, 일반 선택자는 우리가 CSS편에서 처음으로 배운 선택자들을 말합니다 그럼 그 선택자들의 연장선이란 뭘까요? 연장선이라기 보다는 추가적으로 사용할수있는 선택자가 더 말이 맞을거 같네요 예시로 설명을 해볼게요 ... ... ... ... 이렇게 컨테이너 요소 안에 자녀 요소들이 있습니다 우리가 배운 일반 선택자로 자녀 요소들의 색상을 바꾸려면 .container p { color: .. 2021. 4. 28.
CSS 쉽게 배우기 | Pseudo Class(수도 클라스) 1 CSS Pseudo Selector (수도 선택자) - CSS state(상태) 배우기 지금까지 여러가지의 CSS속성들과 사용방법, 그리고 반응형 디자인까지 알아봤습니다 그러나 한가지 아쉬운게 있다면, 스타일들이 재미가 없다는거죠 스타일들이 다 고정되있고, 뭔가 생동감이 없달까? 그래서 이번편에서는 지금까지 배운것들을 활용하면서 스타일에 생동감을 주는걸 알아볼게요 생동감을 주는데는 두가지 방법이 있는데요 하나는 요소의 상태에 따라서, 다른 하나는 애니메이션 입니다 이번편에서는 요소의 상태에 따라서 스타일을 바꾸는걸 알아볼거에요 CSS에서 요소의 상태란? 시작하기전에 먼저 집고 넘어갈게있죠? 요소의 상태란 뭘 말하는걸까요? 요소의 상태는 유저의 행동과 상호작용 하는걸 말합니다 유저가 마우스를 움직일때, 클.. 2021. 4. 11.
CSS 쉽게 배우기 | 미디어 쿼리 (@media) CSS 미디어 쿼리 한눈에 알아보기 플렉스 박스와 그리드 레이아웃에서 계속 언급된 단어가 있죠: 반응형 디자인 근데 정확히 뭔지 설명이 잘 안된것같아서 이번편에서는 반응형 디자인과 미디어 쿼리의 연관성을 알아볼게요 웹에서 반응형 디자인의 뜻은? 스마트폰, 테블릿PC 이전에는 데스크탑PC에서 모든 웹사이트를 볼수있었는데요 시간이 지나서 스마트폰과 테블릿PC의 등장으로 이제는 웹사이트를 볼수있는 기기가 다양해졌죠 갑자기 웬 '라떼' 얘기냐? 스마트폰과 테블릿PC의 등장이 반응형 디자인에 큰 영향을 주었기 때문입니다 웹사이트를 PC에서만 볼때는 거의 모든 모니터의 크기가 똑같았기때문에 하나의 디자인만 있으면 충분했는데 스마트폰과 테블릿PC가 등장하면서 PC모니터에 맞춘 디자인이 스마트폰과 테블릿PC에는 맞지않.. 2021. 4. 6.
CSS 쉽게 배우기 | Grid Layout (그리드 레이아웃) CSS 그리드 레이아웃 기초 알아보기 저번편에서 플렉스 박스에대해서 알아봤죠? 확실히 플렉스 박스를 사용하니까 반응형 디자인을 좀더 쉽고 빠르게 만들수 있습니다 그럼 그리드 레이아웃은 뭘까요? 플렉스 박스처럼 반응형 디자인을 만들때 사용하는 방법중 하나 입니다 그러면, 이 둘의 차이점은 뭘까요? 쉽게 말하자면 '차원' 입니다 플렉스 박스는 1차원적이고 그리드 레이아웃은 2차원적이라고 볼수 있겠습니다 플렉스 박스에서는 컨테이너의 반응 방향을 한 방향으로만 (가로 또는 세로) 설정할수있지만 그리드 레이아웃에서는 컨테이너의 반응 방향을 두 방향으로 (가로, 세로) 각각 따로 설정할수 있습니다 또다른 차이점은 디자인의 적용입니다 플렉스 박스의경우 대부분의 반응형 디자인이 컨테이너 요소에 적용되지만 그리드 레이아.. 2021. 3. 28.
CSS 쉽게 배우기 | 플렉스 박스 (Flex-Box) CSS flex-box (플렉스 박스)로 반응형 디자인을 만들어 보자 안녕하세요 이번 편에서는 flex-box (플렉스 박스)를 알아볼 건데요 디스플레 이방 식중 하나로 반응형 디자인에서 많이 사용되는 방식입니다 이 디스플레이 방식의 장점은 지정된 요소들이 브라우저의 크기에 따라서 자동으로 재배치된다는 점입니다 플렉스 박스를 사용하려면 적용하고 싶은 요소들, 그리고 그 요소들을 하나로 묶어둘 컨테이너가 필요합니다 그럼 하나하나씩 살펴볼까요? display: flex 먼저 컨테이너의 디스플레이를 플렉스로 바꿔줍니다 그러면 이 컨테이너 안의 요소들을 여러 플렉스 속성을 사용해서 정렬할 수 있습니다 *중요! 플렉스 컨테이너 안의 모든 요소에 적용되지 않습니다. 컨테이너의 자식 요소들한테만 적용됩니다* .con.. 2021. 2. 15.
CSS 쉽게 배우기 | 디스플레이 (Display) CSS display로 요소의 보이는 방식 설정하기 안녕하세요 이번 편에서는 요소의 표시 방식(?)에 대해서 알아볼게요 표시 방식이라고하면 뭔가 말이 좀 이상한데 쉽게 말해서 요소를 숨기고 싶다, 안 보이게 하고 싶다, 등 요소가 어떻게 표시돼야하는지를 설정하는 겁니다 모든 요소들은 기본의 표시 방식이 있는데 이 방식을 다르게 설정하면 스타일링의 자유도도 높아집니다 기본 디스플레이 방식 값 디스플레이를 배우기 전에 위에서 말한 요소들의 기본 디스플레이 값을 먼저 볼게요 요소들에 기본으로 설정된 디스플레이 값은 block 또는 inline입니다 block값은 요소들이 레고처럼 세로로 나열되는 방식이고 inline값은 요소들이 한 줄에 같이 나열되는 방식입니다 block을 기본 값으로 사용하는 요소중 예로는.. 2021. 2. 1.
반응형