코드스테이츠 SEB FE 41기/Section 별 내용 정리 (67) 썸네일형 리스트형 section4/Unit2/[HTML/CSS] 심화(11/22) CSS 애니메이션 CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다. 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다. @keyframes 키프레임을 활용하기 위해서는 우선 CSS로 키프레임 블록을 만들어야 한다. /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : .. section4/Unit2/[HTML/CSS] 심화(11/21) 브라우저 웹 브라우저라고도 하고, 웹 탐색기라고도 하는 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신을 한다. 웹 이런 브라우저 상에서 제공되는 웹(Web)은 월드 와이드 웹(World Wide Web)이 풀 네임이며, 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다. HTML 언어를 사용하여 작성된 문서 형태로 제공이 되며, 이러한 문서들을 웹 페이지(Web Page)라고 부른다. 그리고 이런 웹 페이지.. section4/Unit1/[자료구조/알고리즘] 기초(11/18) Tree 자료구조 Tree는 이름 그대로 나무의 형태를 가지고 있다. 정확히는 나무를 거꾸로 뒤집어 놓은 듯한 모습을 가지고 있다. 그래프의 여러 구조 중 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아 있다고 해서 트리 구조라고 부른다. 마치 가계도와 흡사해 보이는 이 트리 구조는 데이터가 바로 아래에 있는 하나 이상의 데이터에 한 개의 경로와 하나의 방향으로만 연결된 계층적 자료구조이다. 데이터를 순차적으로 나열시킨 선형 구조가 아니라, 하나의 데이터 아래에 여러 개의 데이터가 존재할 수 있는 비선형 구조이다. 트리 구조는 계층적으로 표현이 되고, 아래로만 뻗어나가기 때문에 사이클(cycle)이 없다. 여기서 사이클이란 시작 노드에서 출발해 다른 노드를 거쳐 시.. section4/Unit1/[자료구조/알고리즘] 기초(11/17) 자료구조 분류 알고리즘 테스트(코딩 테스트)에 자주 등장하는 네 가지 자료구조 Stack, Queue, Tree, Graph Stack 골목을 자료구조 Stack, 자동차는 데이터(data)로 비유할 수 있다. 이 그림에서 볼 수 있듯이, 가장 먼저 들어간 자동차는 가장 나중에 나올 수 있다. 다시 말해, 가장 나중에 들어간 자동차가 가장 먼저 나올 수 있다. 자료구조 Stack의 특징은 입력과 출력이 하나의 방향으로 이루어지는 제한적 접근에 있다. 이런 Stack 자료구조의 정책을 LIFO(Last In First Out) 혹은 FILO(First In Last Out)이라고 부르기도 한다. Stack에 데이터를 넣는 것을 'PUSH', 데이터를 꺼내는 것을 'POP'이라고 한다. Stack의 특징 1.. section3/Unit8/ [React]Coz’ Mini Hackathon(11/15) To-Do 애플리케이션 만들기 : figma section3/Unit7/[Backend] 인증 / 보안(11/11) Token 해싱 복호화가 가능한 다른 암호화 방식들과 달리, 해싱은 암호화만 가능하다. 해싱은 해시 함수(Hash Function)을 사용하여 암호화를 진행하는데, 해시 함수는 다음과 같은 특징을 가진다. 항상 같은 길이의 문자열을 리턴한다. 서로 다른 문자열에 동일한 해시 함수를 사용하면 반드시 다른 결과값이 나온다. 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나온다. 아래 표는 대표적인 해시 함수중 하나인 SHA1에 특정 입력 값을 넣었을 때 어떤 결과가 리턴되는지 보여주는 예시이다. 이 링크에서 SHA1 함수를 직접 사용해볼 수도 있다. 비밀번호 해시 함수(SHA1) 리턴 값 ‘password’ ‘5BAA61E4C9B93F3F0682250B6CF8331B7EE68FD8’ ‘Pa.. section3/Unit6/[네트워크] 심화(11/9) TCP / IP IP / IP Packet 복잡한 인터넷 망 속 수많은 노드들을 지나 어떻게 클라이언트와 서버가 통신할 수 있을까? (여기서 노드는 하나의 서버 컴퓨터를 의미한다.) 출발지에서 목적지까지 데이터가 무사히 전달되기 위해선 규칙이 필요하지 않을까? 그래서 흔히 말하는 IP(인터넷 프로토콜) 주소를 컴퓨터에 부여하여 이를 이용해 통신한다. IP는 지정한 IP 주소(IP Address)에 패킷(Packet)이라는 통신 단위로 데이터 전달을 한다. IP 패킷에서 패킷은 pack과 bucket이 합쳐진 단어로 소포로 비유할 수 있다. IP 패킷은 이를 데이터 통신에 적용한 것이라고 보면 된다. IP 패킷은 우체국 송장처럼 전송 데이터를 무사히 전송하기 위해 출발지 IP, 목적지 IP와 같은 정보가 .. section3/Unit4/[사용자 친화 웹] 웹 표준 & 접근성(11/5) 블로깅 주제 웹 접근성 웹 접근성 웹 접근성이란? 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다. 웹 접근성을 갖추면 웹에 접근했을 때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다. 결국 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것이다. 웹 콘텐츠 접근성 지침 ☑️ 인식의 용이성(Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 1. 적절한 대체 텍스트 : 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다. 시각적으로 화면을 인식할 수 없는 사용자 혹은 상황을.. 이전 1 2 3 4 5 6 ··· 9 다음
