kasumil의 코딩 공작소

Data 구조 1. 데이터 구조란 데이터에 편리하게 접근하고 조작하기 위한 데이터를 저장하거나 조작하는 방법 2. 자료 구조의 종류에는 여러가지가 있으나 모든 목적에 부합하는 자료구조는 없습니다. 따라서 각각의 데이터 구조가 갖는 장단점을 잘 이해하여 상황에 맞는 데이터 구조를 사용하는 것이 중요함. 3. 데이터 구조의 종류와 그것에 대한 사용방법을 익히는 것이 중요하지만, 제일 중요한 것은 자료구조의 본질과 컨셉을 이해하여 상황에 맞는 적절한 데이터 구조를 선택하는 것이 중요함. 왜 데이터 구조인가? 1. 데이터에 맞는 적절한 자료 구조를 사용하는 것은 전제 개발 시스템에 큰 영향을 끼칩니다. 왜 그럴까요? 예시를 들어보겠습니다. 17인치 3kg 짜리 노트북이 있습니다. 이때 여러분은 이 노트북을 직접..

리눅스 와 깃... 원래는 이틀 수업치인데, 시간이 없어서 시간에 쪼들려서 어쩔 수 없이 묶어 버렸다. 이것을 작성하는 오늘.... 3일치가 되어버렸다. 살려줘! 그래도 어쩔 수 있나 배운 것을 정리하고 복습해야 그래야 뇌에 쏙쏙 박혀버리니까. 리눅스 설명은 간단합니다. ✔️ linux가 무엇인지 이해한다. 멀티태스킹을 지원하는 유닉스처럼 보이는 운영체제이다. 하지만 리눅스는 유닉스와는 독립적으로 개발되었으므로 유닉스 계열 운영체제가 아니라 유닉스 클론(Clone) 운영체제이다. ✔️ 리눅스의 기본 명령어들과 파일시스템 구조를 이해한다. 리눅스 파일 계층 명령구조. 명령어 사 용 법 login 사용자 인증과정 리눅스 시스템은 기본적으로 multi-user 개념에서 시작하였기 때문에 시스템을 이용하기 위해..

Number 수학계산에 사용되는 메소드를 보도록 합시다. 수학계산에 사용되는 JavaScript Math객체를 사용합시다. 절대값 구하기, sin, cos, 제고급근 등 Math객체에 수학계산 메소드가 있습니다. 하지만 사용되는 것은 일부분입니다. 물론, 사용하려면 죄다 사용이 가능하죠. 마우스이 클릭한채 당기면 따라오면서 기타줄 같이 튕기는 방식의 구현도 수학Math객체를 이용한 방법입니다. 반올림 함수Math.round(**) 입니다 Math.round(2.7); Math.round(2.4); Math.round(1.4); 위의 함수를 한번 console.log로 콘솔창에 찍어보세요. 값은 3 2 1 로 출력되었을 겁니다. 이러한 이유는 우리가 알던 기본적인 반올림 방식과 같게 출력되었습니다. 그렇다..

string 말 그대로 문자열이다. back tik(``)만 아니고 '', "" 따옴표, 쌍따옴표로 감싸져 있으면 정상적으로 문자열이다. 나중에 back tik도 문자열이 되긴했지만, 이건 지금 배우는 내용이 아니니 따옴표만 문자열로 알도록 하자. string을 대문자로 만들기 toUpperCase와 toLowerCase 함수를 이용해서 변환을 가능할 수 있다. let lastName = 'Yeri Kim'; let upperLastName = lastName.toUpperCase(); let lowerLastName = lastName.toLowerCase(); console.log(lastName); console.log(upperLastName); console.log(lowerLastName); ..

for문. while과 같은 반복문이나 매우 어려움을 준다. 왜냐하면 반복문을 돌릴때 조건을 줘야하는데, 이러한 조건을 짜서 이를 작동하도록 유도하는 것이 어렵기때문에 그렇다. 한마디로 내가 원하는 것은 이 반복문이 특정 string이 출현되었을때 return하거나 아니면 continue하거나인데, continue는 이때 배우지 않으니 else를 써야하고 이러한 상황의 반대에서 이러한 조건을 찾도록 해야함에 따라 매우 어려운 난이도였다. for 문의 구조는 이러하다. for (반복 조건) { // 반복 조건이 맞으면 실행할 코드 기입. } 이때 반복 조건은 이러하다. for (var 또는 let =i; i=0; i--) { let number= array[i]; if ( number

뭔가 코딩을 배우는건지 그냥 코딩학습 자료를 베껴오는데 혈안이 된건지 구분이 안되서 그냥 간단히 내용을 정리하고 나의 생각등을 정리하는데로 방향을 잡아야겠다고 생각되었습니다. 다른 분 웹로그에 정리한 것을 보니 엄청 잘해놓으신 게 있길래 가급적 그런 스타일로 작성하도록 노력하겠습니다 텍스트 문자열의 연결 alert를 치면 알람이 출력된다. "안녕하세요 김모씨"라고 출력했었다,. 하지만 이를 바꿀 수 도 있다. var username = "김모씨"; alert(username); var message = "안녕, "; var username = "김모씨" var hello = message + username; console.log(hello); 그러면 이제 자동으로 출력으로 "안녕, 김모씨"로 출력된다...

미디어 쿼리(Media Query) media query란 Responsive Web 을 구현하는 CSS technique.(한마디로 능동형 웹을 구현하기 위한 css 기술) @media only screen and (max-width: 480px) { body { font-size: 12px; } } @media — 이 키워드는 media 쿼리를 시작하겠다는 의미입니다. only screen — 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다. and (max-width : 480px) — 이건 media feature라고 불..

li, ul, ol padding-bottom 대신 margin-bottom을 사용하여도 똑같은 결과가 나옵니다. li는 테두리를 갖고 있지 않으니, 여백이 padding 쪽인지, margin 쪽인지 알기 어렵습니다. 그냥 리스트 아이템 아래에 여백만 추가하면 됩니다. 앞으로 둘 중에 어떤 property를 쓰셔도 상관이 없습니다. Table , , , , , 등이 있습니다. 한 행을 시작할 때는 로 시작합니다. tr은 table row의 줄임말입니다. 각각의 셀은 태그 내에 태그를 사용합니다. td는 table data의 줄임말입니다. 대신 태그를 사용했습니다. table heading의 줄임말입니다. 나 태그에 colspan, rowspan이라는 attribute를 추가해서 병합을 구현할 수 있습니다..

float 기반 레이아웃 float 속성에는 left, right, none의 값을 가지며 이중 하나를 값으로 줄 수 있다. but, float 속성을 가진 요소는 부모가 높이를 인지 할 수 없기에 부모인자를 무시하고 벗어나는 경우가 있다. 그렇기에 float를 다루기 어렵거나 귀찮은 요소라고 생각하는 개발자가 많이 있다고 한다. 그렇다면 이런 망아지같이 말을 안듣는 float 속성을 제어하려면 어떻게 해야할까? 그래서 clear라는 속성을 통해 제어해야한다. 이때 나타난 속성은 또 무엇인가? float의 동작방식을 제어하는데 중요한 요소. 부모속성을 무시하고 넘치는 부분을 해결하기 위해선 해결방법이 3가지 있다. 해결방법1. 바깥 div(.wecode-box) 마지막에 아무태그나 넣고 clear 속성을..

inline 속성값을 가진 태그로 a, span 태그 등이 있다. 인터넷주소링크, 요소(엘리먼트) block 속성값을 가진 태그로 div, p, h1 등이 있다. 정해진 것 없음 내용 제목 코드의 차이점은 html에서 표시될때 영역할당에 따른 구분이다. block은 한 줄을 차지하고, 그 옆에 아무런 속성, 요소등이 올 수가 없지만, inline 속성은 딱 감싸진 글자들만 표시되기때문이다. inline-block 블록 자체의 성질은 block이지만, inline-의 문구가 붙으므로 inline의 성질이 생겨서 block속성을 동시에 가진 것. 이해하기 쉽도록 한번 예제를 만들어 보았다. 맨 마지막은 inline-block을 블록성질이 inline으로 바뀐것을 볼 수 있도록 확인하기 위해서 작성하였다. d..