전체 글 (127) 썸네일형 리스트형 Relative length units 절대적인 유닛에는 px을 사용하고, 상대적인 유닛에는 %, v*, em, rem 등을 주로 사용합니다. Unit Relative to em Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. rem Font size of the root element. vw 1% of the viewport's width. vh 1% of the viewport's height. % Relative to the parent element. em: relative to parent ele.. 코드스테이츠 런치 클럽 SEB + DAB 코드스테이츠에는 다양한 장단점이 있지만, 그 중 제가 좋아하는 것은 다양한 행사가 존재한다는 것 입니다. 몇일 전 카카오 엔터프라이즈 강연을 듣고, 또 디스코드에 런치 클럽이라는 섹션이 생겨서 눈여겨 보았는데, 제가 공부하고 있는 SEB(Software Engineer Bootcamp)도 참여할 수 있다고 해서 신청했습니다. 런치 클럽이란? 코로나로 인해 네트워킹을 하기 어려워진 시기에 핫한 게더타운이라는 줌과 비슷하지만 더 아기자기하고 귀여운 서비스를 이용하여 식사를 하며 대화하는 커뮤니티 행사입니다. 코드스테이츠가 지원하지만, 담당자도 없고, 녹화도 하지않으며, 온전히 선후배의 자발적 참여로 진행되는 코드스테이츠의 캐쥬얼한 온라인 네트워킹 커뮤니티 행사입니다. 낯을 많이 가리는 성격이라, 과연 제가 .. 함수 이름 짓기 함수 이름짓기 함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것입니다. 따라서 함수의 이름은 대개 동사입니다. 함수 이름은 가능한 한 간결하고 명확해야 합니다. 함수가 어떤 동작을 하는지 설명할 수 있어야 하죠. 코드를 읽는 사람은 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 합니다. 함수가 어떤 동작을 하는지 축약해서 설명해주는 동사를 접두어로 붙여 함수 이름을 만드는 게 관습입니다. 다만, 팀 내에서 그 뜻이 반드시 합의된 접두어만 사용해야 합니다. "show"로 시작하는 함수는 대개 무언가를 보여주는 함수입니다. 이 외에 아래와 같은 접두어를 사용할 수 있습니다. "get…" – 값을 반환함 "calc…" – 무언가를 계산함 "create…" – 무언가를 생성함 "che.. 논리 연산자 첫 번째 truthy를 찾는 OR 연산자 '||' OR 연산자와 피연산자가 여러 개인 경우: result = value1 || value2 || value3; 이때, OR 연산자는 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다. 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다. 피연산자 모두를 평가한 경우 (모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환합니다. 여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것입니다. 정리해 보자면 이렇습니다. OR 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환합니다. 피연산자에 truthy가 하나도 .. HTML 기본 구조와 문법 HTML은 tag들의 집합입니다. HTML Element의 Tag는 보통 opening tag와 closing tag로 구성되며, 두 태그 사이의 콘텐츠를 넣어서 구조를 표현합니다. HTML 속성(attribute)는 두 가지로 구성되는데, attribute name(속성의 이름)과 attribute value(속성의 값)으로 구성됩니다. Tag 부등호()로 묶인 HTML의 기본 구성 요소입니다. 태그로 시작해서 태그로 끝납니다. Tree Structure 트리 구조는 문서 시작을 선언하고 그 아래 HTML이라는 가장 상위의 태그가 있고, 그 자식으로 head, body가 있고 그들의 자식이 있는 이러한 자식노드와 부모노드가 있으며 그 안에 content가 담기는 구조 입니다. Self-closing t.. 웹 개발과 HTML & CSS & JavaScript HTML (HyperText Markup Language) 웹페이지의 구조(Structure)를 담당하는 마크업 언어 입니다. 글자 그대로, HTML은 프로그래밍 언어가 아닙니다. 그러나 HTML은 웹 페이지를 구성하는 틀, 뼈대가 되는 언어입니다. HTML의 구조를 잘 짜놓으면, 자바스크립트로 개발을 할 때 더욱 직관적인 코드를 작성할 수 있습니다. 의미있는(Semantic) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해하고 개발할 수 있습니다. CSS (Cascading Style Sheets) 디자인 요소를 시각화하는 스타일(Presentation) 시트 언어 입니다. HTML과 같은 마크업 언어가 표현되는 방법을 결정하며, 구조의 외부와 내부를 꾸미는 역할을 담당합니.. 이벤트 (Events) 이벤트는 돔의 요소중 하나입니다. 이벤트는 click을 했을 때, 마우스가 올라가도, 입력을 끝내거나, enter를 누르거나, wifi에서 접속이 해제될 경우가 예가 될 수 있습니다. 이 모든 event는 자바스크립트가 listen할 수 있습니다. event를 listen 하는 법은 두 가지가 있습니다. 첫번째는, .addEventListener()를 사용하는 것입니다. 두번째는, oneventname property에 event listener를 할당함으로써 event를 listen할 수 있습니다. 예시: function handleMouseLeave() { title.innerText = "Mouse is gone!"; } title.addEventListener("mouseleave", handle.. 변수(Variable) 변수는 프로그램을 작성하는 데 가장 중요한 요소입니다. 프로그램은 알고리즘을 사용하여 문제를 해결하는데, 알고리즘을 표현하기 위해서는 대부분 변수를 필수로 사용해야 합니다. 변수는 값을 담기 위해 이름을 붙인 상자입니다. 변수는 변할 수 있는 데이터입니다. (숫자, 문자열, 객체, 배열 등...) 변수를 선언(declaration)하기 위해서는 let, const를 사용합니다. let sum; 이 문장이 실행되면 메모리에는 sum이라는 이름이 붙은 영역이 생성됩니다. 위 코드의 let은 자바스크립트 키워드로 변수를 선언하기 위한 선언자입니다. sum 부분은 변수 이름이라고 부르며, 이 변수 이름을 이용해 변수 값을 읽거나 쓸 수 있습니다. sum = 5; 이렇게 하면 sum이라는 변수에 5라는 값을 할당.. 이전 1 ··· 7 8 9 10 11 12 13 ··· 16 다음
