본문 바로가기

전체 글221

네트워크 기초 용어 알아보기 네트워크 기초 용어 알아보기 네 안녕하세요, 이번 포스팅에서는 네트워크 기초 용어에 대하여 알아보도록 하겠습니다. 네트워크는 우리가 실생활에서 인터넷을 사용하거나, 그 외에 자료 등을 주고받기 위해 통신을 하기 위해 많이 쓰이는데, 네트워크는 개발자나 소프트웨어, 혹은 시스템 엔지니어들도 아주 깊은 부분 까지는 아니라 할지라도 어느 정도는 알고 있어야 하는 부분이라 매우 중요합니다. 그리고 학점을 빠르게 따기 위해서 자격증 공부를 하시는 분들 중에서 네트워크 관리사 2급을 보시는 분들도 계시기 때문에 도움이 될 것 같아서 글을 써보려 합니다. 이번 포스팅은 첫 포스팅인 만큼 가볍게 진행을 하도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 네트워크 기초 용어 1 - 1. 시스템 시스템이란 내부.. 2023. 7. 30.
css 스타일로 변환 효과 주기 css 스타일로 변환 효과 주기 네 안녕하세요, 이번 포스팅에서는 css를 이용해서 변환 효과를 주는 방법에 대하여 알아보도록 하겠습니다. 변환 효과는 css가 지원하는 애니메이션 기능 중의 하나입니다. 우리가 기본 css 외에 여러 사이트에서 애니메이션 효과를 가져와서 주는 것도 css로 표현이 가능한 것들이 있어서 애니메이션 제어에 대해서는 잘 알고 계시면 좋습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 변환 효과 주기 - ,transform 프로퍼티 사용 변환은 다른 두 가지 효과를 주는 것 보다 만들기 쉽습니다. 그냥 transform 프로퍼티를 이용하여 제어를 하면 됩니다. 사용 방법은 아래와 같습니다. transform : rotate(20deg); /* 시계 방향으로 20도 회전*/ 이.. 2023. 6. 30.
css 스타일로 전환 효과 주기 css 스타일로 전환 효과 주기 네 안녕하세요, 이번 포스팅에서는 css로 전환 효과를 주는 방법에 대하여 알아보도록 하겠습니다. 전환 효과도 이전에 작성한 포스팅인 애니메이션 효과처럼 많이 쓰는 방법 중 하나입니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 전환 효과 사용하기 html에서의 전환이란, html 태그에 적용이 된 css의 프로퍼티 값이 변할 때, 그 값의 변화를 서서히 진행시켜서 애니메이션 효과를 내는 방법을 이야기합니다. 그리고 일반적인 애니메이션 효과와 다르게 1회만 이루어진다는 특징이 있습니다. 전환 효과를 사용하는 방법은 다음과 같습니다. 1 - 1. 전환 프로퍼티와 전환 시간 지정하기 : transition 이용 제일 먼저 할 것은 전환 프로퍼티를 이용하여 해당 프로퍼티와 전환.. 2023. 5. 22.
css 스타일로 애니메이션 주기 css 스타일로 애니메이션 주기 네 안녕하세요, 이번 포스팅에서는 css로 태그에 동적 변화를 주는 걸 해보도로 하겠습니다. 자바스크립트를 쓰지 않고 수행 가능한 동적 변화 요소는 다음과 같습니다. 애니메이션 전환 변환 이렇게 3가지이며, 이번 포스팅에서는 애니메이션을 주는 방법에 대하여 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 애니메이션 주기 : @keyframes 사용 css로 애니메이션 효과를 주는 방법은 태그의 모양 변화를 시간 단위로 설정해 만드는 것입니다. 이 방법을 쓰기 위해서는 아래와 같은 작업이 필요합니다. 시간별 애니메이션 장면 작성하기 애니메이션 스타일 시트 작성하기 1 - 1. 시간별 애니메이션 장면 작성하기 시간별 에니메이션 장면을 작성할 때는 @keyfr.. 2023. 5. 22.
css 폼 요소에 마우스 처리 하기 css 폼 요소에 마우스 처리 하기 네 안녕하세요, 이번 포스팅에서는 폼 요소에 마우스 처리를 하는 방법에 대하여 알아보도록 하겠습니다. 우리가 폼 요소에 무언가를 입력하기 위해서는 마우스를 써야 하기 때문에, 마우스 관련 이벤트는 매우 중요한 요소들 중 하나입니다. 그럼 지금부터 어떻게 사용을 하는지 보도록 하겠습니다. 1. 마우스 이벤트 기능 사용하기 폼 요소 입력 시에 사용하는 마우스 관련 이벤트는 크게 두 가지를 씁니다. 마우스가 올라올 때 발생하는 이벤트 텍스트를 입력하기 위해 폼 요소 클릭 시 받는 포커스 이렇게 두 가지가 있습니다. 1 - 1. 마우스가 올라올 때 : hover 사용 마우스가 올라올 때는 hover 속성을 사용하여 이벤트를 줄 수 있습니다. 사용 방법은 이렇습니다. input.. 2023. 5. 15.
css 폼 요소 테두리 꾸미기 css 폼 요소 테두리 꾸미기 네 안녕하세요, 이번 포스팅에서는 폼 요소의 테두리를 꾸며보도록 하겠습니다. 우리가 글자를 입력하는 입력 폼의 테두리를 보면 단순히 각이 져서 있는 양식만 보이지는 않습니다. 그걸 둥그렇게 굴리기도 하고, 여러기지 형태로 나타냅니다. 그래서 이번 포스팅에서는 입력 폼의 테두리를 꾸며보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 폼 요소 테두리 꾸미기 - input [type="text"] 사용 폼 요소를 꾸미기 위해서는 역시 input 태그를 사용하게 됩니다. 일단 무언가 사용자가 입력을 해야 하기 때문에, 거의 반드시 input 태그가 들어간다 보시면 됩니다. 그래서 이렇게 입력 폼을 만들고서 입력 폼 테두리는 이렇게 꾸밀 수 있습니다. input[type.. 2023. 5. 8.
css 폼 요소에 스타일 입히기 css 폼 요소에 스타일 입히기 네 안녕하세요, 이번 포스팅부터는 폼을 꾸미는 시간을 가져보려 합니다. 웹에서 폼이란, 우리가 로그인, 파일 업로드 등과 같이 웹과 사람 간 상호작용을 담당하는 것이라 보시면 됩니다. 그리고 그러한 요소들 역시 css를 입힘으로써 좀 더 시인성이 뛰어나지게 되고, 가독성도 더 높아질 수 있게 됩니다. 그래서 이렇게 중요한 요소인 폼을 꾸며보도록 할 건데, 그중에서도 폼에 입력하는 요소를 꾸며보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 폼 요소 꾸미기 - input [type="text"] 사용 이 방법은 속성 셀렉터를 사용하는 방법입니다. 속성 셀렉터에 대해서 잘 모르시는 분들은 아래 링크를 참고해 주시면 감사하겠습니다. 2023.03.13 - [html.. 2023. 5. 8.
css 표에 마우스 커서를 올렸을 때 셀 색깔 변경되게 하기 css 표에 마우스 커서를 올렸을 때 셀 색깔 변경되게 하기 네 안녕하세요, 이번 포스팅에서는 마우스 커서를 셀에 올렸을 때 셀의 색깔이 변경되게 하는 방법에 대하여 알아보도록 하겠습니다. 이 부분도 시인성 향상을 위해서 사용하는 방법입니다. 그럼 어떻게 쓰는지 바로 알아보도록 하겠습니다. 이 포스팅은 이전에 썼던 포스팅과 연계를 하여 작성하는 포스팅입니다. 아래에 이전에 작성했던 포스트를 기재를 해둘 테니, 참고해 주시면 감사하겠습니다. 2023.04.24 - [html, css, 자바스크립트/css] - css 표 꾸미기 프로퍼티에 대하여 알아보기 css 표 꾸미기 프로퍼티에 대하여 알아보기 css 표 꾸미기 프로퍼티에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 표를 꾸밀 때 쓰이는 프로퍼티에.. 2023. 5. 8.

티스토리툴바