kasumil의 코딩 공작소

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..

Position 속성 relative absolute fixed static(앞서 코딩학습 2일차에서 잘 안쓴다는 속성이 static이다.) static static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다. 그대로 설명을 가지고 왔다. 이보다 좋은 설명은 없는 것 같기때문이다. 말 그대로 static 속성은 지정되지 아니다. 그렇기에 다른 지정된 속성을 쓰기위해서 지정된 속성인 relative, absolute, fixed를 사용한다. + Position 속성을 부여하지 ..

코딩학습 TIL 작성 1일차 - HTML - 이 선언문은 html 브라우저에서 HTML5를 사용하는 것을 알려주는 의미로 여태껏 유투브에서 그냥 이 문서가 HTML이다라고 단순히 사용되는 것으로 아는 줄 알았는데, 그런게 아니었다. 이 문서가 정확히는 HTML5로 버전맞춰 읽어라 라는 컴퓨터가 인식할 수 있게 도와주는 문구였다. 태그나 클래스 선택자, ID선택자들은 유튜브에서 알려주었으나 속성(attribute), 요소(Element) 등은 안 알려주었는데, 기본적인 것들을 알 수 있게 되었다. 흔히 , 등 태그 뒤에 오는 것들이 src, href, alt 등이 속성을 의미한다. 요소로 요소라고 적힌 부분이 요소를 의미한다. 기초부분은 의외로 너무나도 기초라 다들 대충하나 이를 지칭하는 것을 모른다면, ..