본문 바로가기

컴퓨터 사이언스/TIL 정리85

[프론트엔드][파이썬]TIL DAY-29 함수 함수(function)는 특정 작업을 수행하는 명령어들의 모음에 이름을 붙인 것으로, 작업에 필요한 데이터를 전달받을 수 있으며, 작업이 완료된 후에는 작업의 결과를 호출자에게 반환할 수 있다. 함수를 사용하기 위해 함수의 이름으로 입력함으로써 함수를 호출(call)한다고 하고, 우리가 여러 번 반복해야 되는 처리 단계를 하나로 모아서 필요할 때 함수를 호출하여 사용할 수 있다. print()나 input()함수와 같이 파이썬이 기본적으로 제공하는 함수도 있지만, 다음과 같은 방법으로 우리가 직접 함수를 정의하여 사용할 수도 있다. def 내가 정의하는 함수 이름(매개변수1, 매개변수2, ...) : ex) def get_area(radius) : 명령문1 area = 3.14*radius**2 명령문2.. 2022. 5. 10.
[프론트엔드][자바스크립트] TIL Day-21 overflow와 ::before& ::after # overflow의 속성값은 visible이 기본값이고, 위의 속성들이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이를 설정하거나, white-space를 nowrap으로 설정해야 한다. ::before( :before)과 ::after( :after) 선택한 요소의 첫 자식으로 의사 요소(pseudo elements)를 하나 생성한다. 보통 content 속성과 함께 쌍으로 사용되는데, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인이다. 옆의 CSS 스타일링을 참고하면서 보면, id btnMnav는 display: none;을 주어 삼선(햄버거 버튼)을 만들게 되고, ::before는 span요소의 앞에 붙어서 아래 이미지에서 보듯 사이트의 삼선(햄버거 버튼)에서의 맨 위의 선을.. 2022. 4. 25.
[프론트엔드][자바스크립트] TIL Day-20.1 DOM 문서 객체 모델 자바스크립트는 정적인 HTML에서 벗어나 동적으로 사용자와 상호작용할 수 있게 기능하게 하는 것이다. 웹 페이지는 한 번 화면에 출력되면 자기 자신을 바꾸는 능력이 없다. 그것을 가능하게 해주며 HTML을 제어하는 언어가 바로 자바스크립트이다. 이 때, 자바스크립트는 웹 페이지(웹 문서)와 그 안에서 사용한 텍스트, 이미지, 표 등의 모든 요소들을 각각 다른 객체(Object)로 인지하여 처리한다. 이렇게 자바스크립트를 이용해 웹 문서의 객체들을 이용해 웹 문서에 접근하고 제어하는 시스템을 문서 객체 모델(DOM, Document Object Model)이라고 한다. (여기서는 HTML 웹 문서를 대상으로 하므로 HTML DOM을 기준으로 설명한다.) 예를 들면 웹 문서 전체는 document 객체이고,.. 2022. 4. 22.
[프론트엔드][자바스크립트] TIL Day-19.2 수학 객체, 배열 객체, 문자열 객체 객체의 종류 1. 내장 객체 : 브라우저의 자바스크립트 엔진에 이미 내장되어 있어 필요한 경우에 객체를 생성해 사용 가능 ex) 문자(String) 객체, 날짜(Date) 객체, 배열(Arrary) 객체, 수학(Math) 객체 등 ㅡ 실행 예: Date 객체를 생성한 후, 메서드 getDate( )를 사용하여 오늘 날짜를 결과로 얻음 ① 날짜 객체 ② 수학 객체(Math Object) : 수학과 관련된 기능과 속성을 제공 종류 설명 종류 설명 Math.abs(숫자) 숫자의 절댓값을 반환 Math.pow(숫자, 제곱값) 숫자의 거듭제곱값을 반환 Math.max(숫자1, 숫자2, 숫자3, 숫자4) 숫자 중 최대값을 반환 Math.min(숫자1, 숫자2, 숫자3, 숫자4) 숫자 중 최소값을 반환 Math.ra.. 2022. 4. 21.
[프론트엔드][자바스크립트] TIL Day-19.1 Sort( )함수 및 동작원리, 곁들여 Return값 a - b 완벽 이해해보기 MDN Web Docs를 보며, 다른 자료들을 참조하며 이해해나간 내용을 정리한다. sort( ) 메서드는 배열의 요소들을 정렬하여 반환한다. 다만, 그 정렬은 기본적으로 문자열의 유니코드 순서를 따르므로, 특별히 수를 정렬할 때 우리가 생각하는 숫자의 크기 순서대로 정렬되지 않는다. 다음 콘솔 박스를 보면 숫자들의 배열을 그냥 sort( ) 메서드를 적용하면 다음과 같이 정렬됨을 알 수 있다. 이것이 바로, 숫자의 크기대로 정렬되지 않고 숫자가 문자열로 변환되어 문자열의 유니코드 순서를 따라 정렬되는 것이다. 살펴보면 맨 앞자리의 숫자가 기준이 된 뒤, 그 뒤에 digit이 늘어나는 것을 앞자리 숫자(0, 1, 2, ...) 의 하위 문자열로 인식하여 정렬해놓은 것을 볼 수 있다. 그래서, 정렬 순서를.. 2022. 4. 21.
[프론트엔드][자바스크립트] TIL Day-18.2 Object 객체와 날짜 객체 객체란? 자바스크립트는 객체(Object) 기반 언어이다. 이 객체는 기능과 속성을 가지고 있다. 이때 기능들을 메서드(method)를, 속성을 프라퍼티(Property)라고 한다. 기본형 : ① 객체. 메서드( ); | ② 객체. 속성; | ③ 객체. 속성 = 값; ① 작동 -> 객체의 메서드를 실행한다. ② 작동 -> 객체의 속성값을 가져온다. ③ 작동 -> 객체의 속성값을 바꾼다. 객체의 종류 1. 내장 객체 : 브라우저의 자바스크립트 엔진에 이미 내장되어 있어 필요한 경우에 객체를 생성해 사용 가능 ex) 문자(String) 객체, 날짜(Date) 객체, 배열(Arrary) 객체, 수학(Math) 객체 등 ㅡ 실행 예: Date 객체를 생성한 후, 메서드 getDate( )를 사용하여 오늘 날짜를.. 2022. 4. 21.
[프론트엔드][자바스크립트] TIL Day-17.1 반복문의 continue continue 문은 현재 혹은 레이블이 지정된 루프의 현재 반복에서 1. 명령문의 실행을 종료하고 2. 반복문의 처음으로 돌아가 3. 루프문의 다음 코드를 실행한다. 위 코드를 해석하면, text라는 변수를 let을 이용하여 문자열(String)일 것을 예고하며 비워둔 채로 변수 선언을 하고, for문 안에서 i를 let으로 변수를 선언하면서 초기값을 0으로 지정, i가 10보다 작을 때까지는 중괄호 { }의 명령문을 i를 하나씩 증가시켜가면 실행. i가 3이라면 continue를 실행하고, 아니라면 text = text + i를 실행한다. 이때 + 는 덧셈 기호가 아니라 문자열을 합쳐, 옆으로 연결해 쓰라는 의미이다. i가 0일 때부터 10보다 작은 동안 계속 반복해 실행하면 012 이렇게 실행이 되.. 2022. 4. 20.
[프론트엔드][자바스크립트] TIL Day-18 예제로 For문 꼭꼭 씹어먹기 for문 예문 소스 씹어먹기 ※ 아래 소스를 한 줄씩 이해할 때 반드시 전체 소스를 같이 보면서 문맥을 파악하며 따라오면 좋을 듯 하다. var audNum = prompt("입장객 수는 몇 명?"); 변수 audNum에 "입장객 수는 몇 명?"이라는 텍스트가 쓰여 있는, 또 그 지시나 텍스트에 맞게 사용자가 입력할 수 있도록 prompt로 대화상자를 띄운 후, 사용자가 대화상자에 입력한 값을 변수 audNum의 값으로 할당한다. var colNum = prompt("한 줄에 몇 명씩 배치?"); 변수 colNum에 "한 줄에 몇 명씩 배치?"라는 텍스트가 쓰여 있는 입력형 대화상자를 띄워 그 곳에 사용자가 입력한 값을 변수 colNum의 값으로 할당한다. if (audNum % colNum == 0) .. 2022. 4. 20.
[프론트엔드][CSS] TIL Day-16 Grid 그리드(Grid layout) CSS Grid는 수평선과 수직선으로 이루어진 집합체(격자무늬)로 웹페이지를 위한 이차원 레이아웃 방법이다. 플렉스는 수평이나 수직 중 하나를 기준(1차원)으로 해서 요소를 배치하지만, 그리드는 수평과 수직 어느 방향이든(2차원) 배치할 수 있다. 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 기능들(아래에 기술할 예정)이 많이 있다. ∨ 사용해서 좋은 점? - 한 화면을 여러 개의 칼럼으로 구성해서 밑으로 늘어뜨리는 그리드 레이아웃은 이미 많은 시각 매체에서 사용하여 그리드 레이아웃 웹사이트 디자인은 사용자에게 안정감을 준다. - 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃, 즉 사이트 전체나 콘텐츠 영역의 너비, 각 요소의 위치 등의 사이트 구조를 먼저 .. 2022. 4. 18.