프로그래밍 공부 이야기

배열 *엄밀히 말하자면 자바스크립트의 배열은 배열이 아니다* 배열은 크게 밀집배열과 희소배열로 나눠진다. 다른 언어들에서 우리가 흔히 사용하는 배열은 밀집배열이지만, 자바스크립트에서 배열은 희소배열이다. 밀집배열(협의의 배열) 1. 하나의 데이터 타입으로만 이뤄진 배열이다. 2. 메모리에 연속하여 나열된 자료구조다. 3. 요소의 추가, 삭제가 어렵다. 4. 연속적이기에 빠르다. 희소배열(광의의 배열) 1. 하나 이상의 자료형을 허락하는 배열이다. 2. 한 자료가 차지하는 메모리 공간이 불규칙(불연속)할 수 있다. 3. 요소의 추가 삭제가 쉽다. 4. 연속적이지 않아 느리다. 즉, 대다수의 경우 자바스크립트의 배열은 Key를 Index로 가진 Map 이다. 그렇기에 인덱스 값 대신 문자열을 넣어도 오류가 ..

javascript가 오늘부로 시작되었다. 거의 대부분 java와 비슷하지만 몇몇 다른 부분이 있어서 그것들만 정리하겠다. JavaScript를 실행하는 세가지 방법 1. head나 body태그 안에서 실행하기 2. HTML 태그 안에서 속성으로 실행 (onclick, href 등) 클릭하세요! a태그를 클릭하면 알림창이 뜬다. 3. 별도로 js파일을 만들어 import해서 사용 보통 body태그 가장 아래를 권장한다. html의 모든 요소(DOM)을 모두 분석한 뒤에 실행되어야 안전하기 때문이다. 여기서 DOM이란 Document Object Model이라는 것으로, 우리가 만든 태그와 기존에 있는 태그, 모두 포함해 웹문서를 트리 모양으로 분석해놓은 메모리 트리다. 데이터 선언 형식 var : 타입추..

em과 rem 둘 모두 배수로 크기를 지정하는 단위로, 기본 글자 크기 16px을 기준으로 늘리거나 줄인다. 다만 em은 부모 태그가 존재할 경우, 부모의 크기를 기준으로 배수를 한다. 반면 rem은 부모 태그가 몇개가 존재하더라도 항상 같은 값이 나온다. 아래의 예를 보자. 기본크기 16px 테스트문구 (19.2px) 테스트문구 (23.4px) 테스트문구 (27.6px) em의 경우는 부모 태그의 1.2배를 거듭 한다. 그렇다보니 같은 값을 얻기 매우 힘들어 나온 기술이 rem이다. rem은 부모 태그가 얼마나있든 상관없이 항상 16*1.2의 값인 19.2px가 나온다. 기본크기 16px 테스트문구 (16*1.2=19.2) 테스트문구 (19.2*1.2=23.4) 테스트문구 (23.4*1.2=27.6) ..

오늘은 새로 배운것이 없다. 기존에 배운 것을 토대로 다음 영화 순위 화면을 클론 코딩만 하루 종일 했기 때문이다. 나는 반응형 애니메이션을 만들던 도중 html 코드의 어딘가에 오류가 생겼는데, 그 오류의 원인을 도저히 찾지 못해서 완전히 갈아엎고 다시 시작해야하는 상황에 놓여서 실패하고 말았다. 솔직히 백엔드를 지향하는 우리가 왜 굳이 프론트엔드 분야를 이렇게 깊게 파야하는지 납득가지는 않는다. 물론 개발자로서 연동을 위해 기본적인 수준은 알아야하지만, 이건 너무 본격적이라는 생각이 든다. 프론트엔드 수업을 제외하고 실습에만 쓴 시간이 벌써 20시간은 넘어가는 것 같다. java에서 빠르게 넘어가느라 이해는 커녕 따라가기 급급했던 기능들이나, 더 심화된 설명이 필요한 부분에 이 시간이 배분되었다면 더..

오늘 역시 배운게 별로 없다. 아무래도 css가 상당히 기능이 많고 하나를 구현하면 하나가 안되는 식으로 복잡하다보니, 실습에 시간이 오래 걸려서 그런것 같다. 그래서 앞으로 남는 시간에 개인적으로 자바로 테트리스 만드는 프로젝트를 하려고 한다. 그에 관해서는 다른 카테고리를 하나 만들어 정리하겠다. word-break와 word-wrap속성 break는 단어의 분리, wrap는 단어의 줄바꿈에 대한 속성이다. 둘 모두 동양권(한.중.일)만 특이 케이스로 취급받고, 나머지는 언어는 모두 동일하다. 동양권의 경우 음절(글자 하나)를 기준으로 줄바꿈이 되거나 나눠지지만, 나머지 언어는 단어를 기준으로 나눠진다. word-break: normal: 기본값. 한.중.일을 제외한 언어는 단어(공백 또는 -(하이픈..

https://studiomeal.com/archives/197 flex에 대해 잘 설명된 사이트를 찾아 링크를 올려둔다. 아래 사진들은 전부 이 사이트가 출처다. 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com flex 속성: 아이템에 적용되는 속성들. flex-basis: 아이템의 기본 크기를 지정하는 속성. flex-direction에 따라 width또는 height를 정한다. width나 height보다 상위의 속성이며, 아이템의 기본 점유 크기를 설정한다. flex-grow: 기..

flex속성 최근 새로 나온 속성으로, 박스(컨테이너)들의 원활한 배치를 위해 만들어졌다. 우리가 웹사이트에 메뉴창(nav창)을 만들거나, 링크를 걸거나, 그 외에도 어떤 기능이 있는 버튼(글자)을 만들 경우, 대부분은 보기 편하게 어떤 방식으로든 정렬되어 있다. flex속성은 이런 정렬을 쉽게 해주기 위해 만들어졌다. 만약 flex속성이 없다면 position을 absolute로 지정해 좌표를 지정해주거나 float속성으로 일일이 정렬해야 할것이다. flex의 기본 개념 flex는 간단히 말해 컨테이너 태그를 크게 세로축, 가로축으로 나눠서, 사용자의 편의에 맞게 정렬할수 있게 해주는 속성이다. 이때, 컨테이너의 내용물( 이해하기 쉽게 div형태의 박스라고 가정하자)의 height 속성을 컨테이너의 높..

부정선택자 not(태그이름) : not의 값이 아닌 태그들에 적용된다. css의 크기단위 0은 단위를 안적어도 되지만 그 외의 값들은 반드시 단위를 적어줘야만 한다. px : 픽셀 em : 배수단위. 1em을 사용자가 정해두면, 그것의 배수로 적용된다. % : 퍼센트 단위. rgba a : Alpha. 투명도를 뜻함. 0.0~1까지 선택할수 있으며, 0은 완전투명, 1은 완전 불투명이다. 배경에 이미지 입히기 background-image : url( ); : body태그를 선택해 해당 속성을 적용시키면 된다. background-attachment : 이미지 스크롤 정하기. 고정을 원하면 fixed. 스크롤되기를 원하면 scroll. 문단태그 p1입니다. 문단태그 p1입니다. 문단태그 p1입니다. 문단..

css (Cascading Style Sheet) 웹문서의 디자인과 배치. 중첩가능하며, 나중에 적용된 속성이 이전 속성을 덮는다. 기본적으로 속성 1개는 세미클론 한개로 마침. 적용방법 1. head 태그 안에 style태그로 넣는 기본적인 방법 2. 태그안에 직접 style 속성을 넣는 인라인 태그 3. css파일 임포트. css파일을 별도로 만들어서 import하는 방법 link 태그를 사용한다. ```html 제목태그 H1입니다. 제목태그 H2입니다. 제목태그 H3입니다. ``` class : 문서안에서 여러개를 지정할때 사용. .으로 접근하낟. id : 문서 안에서 유일한 태그로 지정할 때 사용. #으로 접근한다. 태그선택자. 클래스 선택자 : 태그 안의 클래스만 적용된다. 태그선택자 # id선..

시멘틱 태그 의미론적 태그. 웹사이트의 공통적인 공간 구성요소를 태그 형식으로 분류한 것. 모든 시멘틱 태그는 div와 같으며 한줄을 차지한다. 헤더, 메인(섹션), 사이드, 푸터로 나뉜다. 메타 태그 설명...