본문 바로가기

엘리스 AI 트랙 4기90

[HTML] 표준 모드와 호환 모드 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 표준 모드와 호환 모드 과거의 웹 페이지는 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)용의 두 가지 버전으로 만들어졌다. 이후 W3C에서 웹 표준을 제정했는데 이 당시 기존의 브라우저들은 새롭게 만들어진 표준을 따르면 웹 사이트를 제대로 표현할 수 없었다. 따라서 브라우저들은 새로운 표준을 기반으로 제작된 사이트와 예전 방식으로 제작된 사이트를 둘 다 렌더링 하기 위해 두 가지 모드를 제공했는데 이들이 바로 표준 모드(standards mode)와 호환 모드(quirks mode)이다. 브라우저는 HTML 문서가 DOCTYP.. 2022. 2. 4.
[HTML] DOCTYPE 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ DOCTYPE DOCTYPE(Document Type)은 HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것이다. 따라서 DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 가장 먼저 선언되어야 한다. DOCTYPE 선언은 대소문자를 구분하지 않는다. DOCTYPE 선언을 해주지 않으면 브라우저는 호환 모드(quirks mode)로 동작한다. 하지만 이 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 심해진다. ✔️ Cross Browsing Issue 모든 브라우저가 W3C 표준을 구현하지만 반드시 동일한 방식으로 구현하.. 2022. 2. 2.
[Frontend] CSS와 JS Animation의 차이점 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ CSS Animation CSS로 웹 사이트에 애니메이션 효과를 줄 때 transition과 animation 속성을 사용할 수 있다. CSS에서의 애니메이션은 JS에서보다 좀 더 간단한 애니메이션을 구현, 처리하는데 사용한다. 특정 영역에 마우스를 올리거나(hover) 특정 영역의 크기를 바꾸거나 하는 것들이 여기 해당한다. 만약 어떤 정사각형을 왼쪽 위에서 오른쪽 아래로 이동하는 애니메이션을 구현한다고 하면 transform의 translate 속성을 바꿔주면 된다. 이를 JavaScript로 구현하기 위해서는 setInterval을 이용해서 top과 left 속성을 계속 변화시켜 주어야 한다. 이때 값이 계속 변화하는.. 2022. 2. 2.
[Frontend] CI와 CD 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ CI 지속적인 통합(CI, Continuous Integration)은 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 의미한다. git과 같은 버전관리 시스템을 사용할 때 여러 명의 개발자가 하나의 공유 저장소를 사용하는 경우가 많다. 이때 새로운 코드의 변경 사항이 저장소에 통합되지 않을 경우 서로 충돌할 수 있다. 따라서 자동화된 빌드 및 테스트 수행 후 코드 변경 사항을 공유 저장소에 정기적으로 병합하는 것이 중요하다. 지속적인 통합에서는 각 커밋에 앞서, 개발자가 통합 전에 추가 검증 단계로 코드에 로컬 유닛 테스트를 수행할 수 있다. 지속적인 통합 서비스는 새로운 코드 변화에 대한 유닛 테스트를 자.. 2022. 1. 30.
[Python] csv와 파이썬 함수들 엘리스에서 제공한 강의와 자료를 보고 정리한 내용입니다. ✅ csv csv(Comma Separated Value)는 어떠한 값들이 구분자로 구분되어 있으며 각 열이 특정한 의미를 가진다. 이때 구분자는 기본적으로 콤마(,)지만 다른 구분 문자도 사용 가능하다. json처럼 키를 따로 두지 않고 의미에 따라 값들을 나열하기 때문에 의미를 모르면 해석이 불가능할 수도 있다. csv는 엑셀에서 열람이 가능하며 key값을 따로 두지 않아 용량이 작다. 값을 저장할 때 데이터에 , 등의 구분자가 들어있을 경우 큰 따옴표로 감싸주면 구분자가 들어있어도 큰 따옴표로 감싸진 것을 하나의 값으로 취급한다. 하지만 이러한 예외가 언제든지 발생할 수 있기 때문에 데이터 오염에 취약하다. ✔️ reader() csv 형식의.. 2022. 1. 30.
[Python] set과 집합연산 엘리스에서 제공한 강의와 자료를 보고 정리한 내용입니다. ✅ set 집합(set)은 중복이 허용되지 않으며 순서가 없는 자료형이다. {} 중괄호를 사용하며 콤마(,)로 값을 구분하거나 set() 키워드로 선언할 수 있다. set1 = {1, 2, 3} set2 = set([1, 2, 3]) # set1과 set2는 같은 값이다. ✔️ 값 추가 하나의 값을 추가하는 것은 add()로, 여러개의 값을 추가하는 것은 update()로 가능하다. sample_set.add(4) sample_set.update([ 5, 6, 7]) ✔️ 값 삭제 값을 삭제하는 것은 remove() 또는 discard()로 가능하다. discard는 해당 원소가 있다면 삭제하고 없다면 아무런 일도 하지 않는 반면 remove는 해.. 2022. 1. 30.
[Python] Dictionary와 JSON 엘리스에서 제공한 강의와 자료를 보고 정리한 내용입니다. ✅ Dictionary 딕셔너리(Dictionary)는 key 값과 value 값을 한 쌍으로 가지는 자료형이다. 중괄호 {} 안에 key: value를 ,로 구분하여 생성한다. 딕셔너리의 key는 값을 찾기위해 넣어주는 데이터이고 value는 찾고자하는 데이터이다. 따라서 key는 변할 수 없는 값으로만 지정할 수 있다. sample_dict = {key1 : value1, key2 : value2, …} ✔️ entry에 접근(value값 얻기) 저장된 value 값을 확인하고 싶을 때는 key값을 이용하는 방식과 get() 메서드를 이용하는 방식이 있다. sample_dict[key] sample_dict.get(key) ✔️ entry 추가.. 2022. 1. 30.
[Python] 파일 다루기와 list comprehension, sorted 엘리스에서 제공한 강의와 자료를 보고 정리한 내용입니다. ✅ 파일 다루기 python에서 파일을 다루는 방법은 다음과 같다. ✔️ open() 인자로 주어진 파일을 열고 해당 파일 객체를 반환한다. open(file, mode='r', buffering=- 1, encoding=None, errors=None, newline=None, closefd=True, opener=None) file : 파일의 path. mode : 파일을 열 때 사용할 모드.(r = 읽기, w = 쓰기 등.) ✔️ read() 파일 전체의 내용을 하나의 문자열로 읽어온다. 비슷한 메서드로 readline(), readlines()가 존재한다. readline()은 한 번에 하나의 라인을 읽어오고 readlines()는 파일 전.. 2022. 1. 30.
[3주차] 자바스크립트의 내장객체 1월 29일 자 학습 내용 정리입니다. ✅ 자바스크립트의 내장객체 자바스크립트는 여러 용도에 활용하는 객체를 내장하고 있다. ✔️ globalThis 전역 객체를 지칭하는 변수이다. 전역 객체는 환경에 따라 다른데 브라우저 환경은 window, node 환경은 global 객체를 지칭한다. globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다. ✔️ window DOM document를 포함하는 창을 나타내는 객체이다. 전역 스코프에 선언된 변수는 모두 window 객체의 프로퍼티가 된다. window 객체를 통해 현재 창의 정보를 얻거나 조작할 수 있다. (참조 https://cansweep.tistory.com/310) ✔️ document 브라우저에 로드된.. 2022. 1. 30.

티스토리툴바