판봉 개발 일기

오늘은 드디어 반복문과 함수에 대해서 배웠습니다. 이제부터 알아보도록 하겠습니다. while문 while은 반복문의 일종으로 문법은 다음과 같습니다. while(조건) { 실행문 } 만약에 조건이 true라면 실행문이 실행 됩니다. *while안의 조건이 true라면 항상 실행됩니다 while(true)로 작성할 수도 있습니다. 그리고 좀 다른걸로 do-while문이 있는데 이것은 일반적인 while문과는 조금 상이합니다. 문법은 이렇습니다. do{ 실행문; } while(조건) { 실행문; } 위는 do 안의 실행문이 먼저 반드시 한번 실행 되고 난뒤 일반적인 while문을 실행한다고 보시면 됩니다. For문 for문은 while문 보다는 복잡사지만 그 사용 빈도수가 더 많은 반복문입니다. 문법은 다음..

이번 시간에는 javascript의 연산엔 대해서 알아보겠습니다. 먼저 JAVA와 비슷하게 연산기호들이 있습니다 >, false는 0의 값을 가지고 있으므로 false가 나오고 console.log(Boolean(b)) -> 문자값이 '' 같이 비어있어야지만 false가 되므로 true입니다. 하지만 아래에서 a와 b라는 변수를 비교했을때 값은 true가 나옵니다. 어째서일까요? 그것은 문자'0'를 숫자 0으로 바꾸어서 비교를 하기 때문입니다. *아마 숫자로 연산하는것이 우선순위가 있지않나 생각이 듭니다. 그리고 주의해야 할점이 undefined 와 null을 ==로 비교했을때 true가 나오지만 ===로 비교했을땐 false가 나옵니다. 자, 이젠 아까 말하다 말았던 ===를 살펴보겠습니다.(stric..

오늘은 11번째 시간으로 제목과 같이 [변수, 자료형, 형변환, 연산]에 대해서 공부했습니다. 먼저 변수란 variable, 데이터를 저장할 메모리 공간에 이름을 붙인 것으로 붙인 이름으로 무언가를 하는 것을 뜻합니다. 데이터를 저장하거나 꺼내오기, 삭제, 수정 을 합니다. javascript에서는 let 변수명 = 값; 으로 변수를 선언하고 값을 정할수있습니다. 참고로 변수명1, 변수명2, 변수명3 이런식으로는 하지 않는 것을 추천합니다. 만약에 그렇게 하는 가지수가 많아진다면 유지보수하기가 굉장히 힘들어집니다. 참고로 변수의 이름을 정하는것은 자바와 같다고 보시면 됩니다. javascirpt에서는 java와 다르게 int형 double형이 아닌 정수와 실수가 number 형이라는 것으로 표현됩니다. ..

오늘은 드디어 깃을 사용하는 방법과 javascript에 대하여 공부했습니다. 먼저 말해두어야 할게 소트프웨어의 구성요소를 artifacts = 인공물,산출물 이라고 말합니다. 이 산출물들에 대해서 여러사람이 공동으로 작업을 하게 되고 산출물들은 계속 변화하여 서로 다른 상태와 버전을 가집니다. 즉 관리가 필요하단 이야기죠 소스코드 버전(파일)저장소를 Repository(저장소)라고 합니다. 그리고 버전이란 단순히 숫자가 아니라 하나의 형상관리 대상을 뜻합니다. 형상관리는 버전관리의 상위버전이죠. GIT *먼저 인터넷에 "git scm"이라고 검색을 한 뒤 다운로드를 합니다. git에는 로컬 저장소와 원격저장소가 있습니다. 로컬저장소는 쉽게 말해서 개발자의 PC를 말하고 원격저장소는 회사의 프로젝트를 하..

오늘은 제목에 나와있듯이 Mediaa Query와 Grid를 알아볼건데 그 전에 먼저 flex를 간단하게 집고 가겠습니다. flex는 안쪽의 아이템들에 대해서 정렬이 되는것입니다. 고전적인 방식으로는 전체 레이아웃 : float(left, right, clear) 세부 레이아웃 : display(inline-block, block) 모던한 현대적인 방식으로는 전체 레이아웃 : grid 세부 레이아웃 : flexbox 이렇게 나누어 집니다. 그리고 참고로 웹 표준이 나오면 자바스크립트는 빨리 적용이 되는데 HTML과 CSS는 표준이 나와도 상대적으로 덜 빠르게 적용이 된다고 합니다. Media Query 먼저 여기서 QUERY란 "질의어"를 말합니다. 예, 묻고 답하는 그것 맞습니다. Media Query..

위 사진은 float를 썼던 기존 코드를 갈아 엎고 flex box 형식으로 되게끔 다시 다 만든 것 입니다. 원래는 이러 했습니다. 오른쪽에 2열로 광고 배너가 있습니다. 메뉴 안내 표시가 왼쪽에 따라오고 본문을 기준으로 오른쪽에는 광고 배너가 있고, 상단에는 큰 배너 광고가 있습니다. 구현 코드👇👇 더보기 10분안에 완성하는 초간단 요리! https://www.rocketpunch.com/" target="_blank"> 신라면 볶음밥 5분 육포 달걀 마요 비빔면 https://www.10000recipe.com/recipe/6938659" target="_blank">신라면 볶음밥 혼자사는 자취생들! 오늘 점심은 신라면 볶음밥 완전추천! 재료 목록 재료 용량 신라면 1개 달걀 1개 식용유 약간 밥 ..

오늘은 저번 시간에 못다한 CSS 레이아웃 및 속성과 Flex에 대하여 알아보겠습니다. 먼저 font에 관련된 것들 부터 알아 보겠습니다. font 속성 1.font-size 속성 기본적으로 h1의 기본 크기는 32픽셀, p태그의 기본 크기는 16픽셀입니다. 👇 더보기 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 위의 코드에 font-size라는 것 중에서 samll은 현재는 잘 사용하지 않는다고 합니다. 실제로 작업을 할때는 클래스를 만들어서 거기에 폰트를 조정하던지 하는 작업을 합니다. 👇 더보기 Lorem ipsum Lorem ipsum 위의 코드를 살펴보면 font=family가 보입니다. 그 뒤에 오는 것은 어떤 폰트인가를 결정해 줍..

오늘은 CSS의 두번째 시간이었다. 먼저 위치속성을 알아 보았다. 위치 속성 position 속성 - static(기본): 일반적인 문서 흐름에 따라 배치 - relative: 기준 위치를 선택한 요소로 변경 - absolute: 문서(static) 또는 부모(.relative) 기준 절대 위치 좌표를 설정 - fixed: 화면을 기준으로 절대 위치 좌표를 설정 위치 속성과 관련된 공식 - 자손의 position속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용 (공간영역을 차지하도록 함) - 자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에 relative키워드를 적용 (기준점을 변경) 즉, 쉽게 말해서 static -> 정적임(멈춰있는..

오늘은 CSS의 의사 클래스인 구조, 문자 선택자에 대하여 알아 보겠습니다. 먼저 의사 클래스란 무엇이나면 가짜, 같은 역할을 하는 비슷한 이라는 의미로 흔히 말하는 [짝퉁]의 개념이라고 보시면 될것같습니다. 물론 짝퉁도 엄연히 그 물건의 용도를 하고 있습니다. 의사 클래스의 구조 선택자에는 다음과 같은 3가지의 선택자가 존재합니다. (많이 쓰는것 3가리를 꼽은 것) :first-child - 형제 관계 중에서 첫번째에 위치하는 태그를 선택 - 선택자와 같은 레벨의 요소들 중 첫번째 요소를 선택 :last-child - 형제 관계 중에서 마지막에 위치하는 태그를 선택 :nth-child(수열) - 형제 관계 중에서 앞에서 수열 번째에 태그를 선택 - 예) 1, 3, 5, 7, 9 => 2n+1=> nth..

오늘은 CSS의 크기 단위 먼저 살펴보겠습니다. 크기 단위 : px과 % - px : 픽셀 단위 - % : 백분율 단위 CSS엔 px과 %라는 크기 단위가 있습니다. 위의 사진과 같이 웹 브라우저의 문서의 기본 폰트 크기는 16px입니다. 즉 fonit-size : 150% --> 16*1.5=24px이 됩니다. 두번째 크기 단위로는 em과 rem이 있습니다. em : 부모 요소의 폰트 크기를 기준으로 하여 상대 비율을 정한 것 rem : 루트 요소(html) 폰트 크기 기준 상대 비율을 정한것 한가지 주의 할점이 있는데 단순히 em만 사용하면 나중에 문제가 복잡해지는 경우가 생깁니다. 부모 요소의 폰트크기를 찾을 수 없다면 그 부모의 부모요소를 찾게 되는데 이것을 코드를 작업할때 굉장히 고난을 초래하는..