Programming Storytelling

검색기능을 구현하기 위해 검색창을 만들었다. 조금 더 멋진 검색창 구현을 위해 네이버 소스코드를 뜯어와 내꺼화 시켰다. css 검색 부분을 전면 수정하던 중 해결되지 않는 문제에 골머리를 앓았다. 텍스트를 입력하면 가운데에 입력이 되지 않고 아래에 입력이 된다는 것이다. 여러가지 시도를 해봤지만 실패했다. 대표적인 시도는 두개다. try1 height-line값을 width 값과 동일하게 설정해 가운데 정렬을 하려고 했다. 구글 검사로 해보니 인풋창이 조금 아래로 설정돼 있고 이 부분을 고치면 가운데에 글씨를 쓸 수 있을 줄 알았다. 하지만 여전히 글씨는 아래에 있었다. try2 서치 박스 인풋창을 따로 만들어 거기에 소스코드를 입력했다. .search-box input { position:relativ..

4주차는 다른 회차보다 다사다난했다. 숙제 전까지만 해도 오류가 떠서 슬랙에 계속질문했다. 숙제 제출 1일후 바로 문제를 해결했다. 나의 문제점은 총 3개였다. 우선, 첫번째는 html 파일에선 이미지가 뜨는데 flask를 사용하니 이미지가 로드되지 않았다. 해당 문제는 일반 html파일에 이미지를 넣는 방식과 달라서 생긴 문제점이었다. 라고 바꾸니 잘만 됐다. 두번째 문제는 환율이었다. 처음엔 나왔던 환율이 갑자기 뜨지 않았다. 어느 순간 갑자기 떴다. 예상컨대, 네트워크 문제였나보다. 세번째 문제는 가장 중요한 버튼이 로드되지 않는 다는 것이었다. 내가 구현하고 싶은 기능은 정보 입력 후 버튼을 누르면 내가 입력한 것이 특정창에 저장되는 기술이었다. 정보를 입력했지만 끝내 내정보는 특정 리스트에 저장..

3주차에는 지니뮤직 웹크롤링에 도전했다. 요소를 홈페이지에서 어떻게 추출해야 하는지 몰라서 처음에 애먹었다. 요소를 가져오고 나서도 for문의 범위를 잘못 지정해서 text를 읽을 수 없다는 오류가 발생하는 등 난관에 봉착했다. 예외처리를 해봤지만 소용없었다. 구글링을 통해 남들이 지정한 for문의 범위를 보니 나와 달랐다. 해당 문제를 그렇게 해결하고 나자 오류가 해결되고 결과가 나왔다. 하지만 내가 원하는 식으로 정리돼서 나오진 않았다. 구글링 해보니 strip()을 사용해 보라해서 했다. 그러니 정렬돼서 나오긴 했다. 하지만 순위옆에 하강/상승/유지 이런게 떴다. 내가 원하는 건 이것을 을 없애는 거였다. text에 범위를 줬다. 0:2나 0:5아무렇게나 줘도 하강/상승/유지와 같은 텍스트가 사라졌다.

2주차에서는 오픈 api를 활용해 ajax, jquery를 써봤다. 숙제는 1주차 숙제 기반 환율을 페이지에 업로드 하는 거 였다. 나는 ajax 코딩 부분은 안 헷갈렸는데, 아래 html 코드에 함수를 어디에 심어야 할지가 고민이었다. 처음에 네임을 주어도 환율이 업로드 되지 않았다. 알고 보니 ajax 코드 쪽에 내가 #을 누락했음을 발견했다. 또 span 태그를 잘 안 썼는데 이번 기회에 span 태그의 매력을 알게 됐다. $(document).ready(function(){ [함수] }); 위 코드는 페이지가 뜨자마자 특정 코드가 작동하도록 하는 비법 코드다. function q1() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/spar..

1주차 숙제는 간단한 쇼핑몰 프로젝트다. 나는 부트스트랩을 이용해 쇼핑몰 한 페이지를 만들었다. 처음에 부트스트랩을 활용해야 하는 하단의 네가지 아이템들을 어디서 찾아야 할지 몰라 힘이 들었다. 구글링을 해보니 input group이라는 카테고리였다. 나는 만든 하나의 폼을 가운데로 정렬하는 과정이 처음엔 가장 힘든 줄 알았다. 직접 해보니 이부분은 전체를 dir태그로 묶고 css에 margin:auto, width, height를 주면 바로 구현되는 쉬운 부분이었다. 나는 2개의 문장을 나란히 폰트를 다르게 하고 싶었다. 그래서 , 등의 태그를 이용해 크기를 다르게 해보려 시도했다. 하지만 하나의 문장이 아래로 밀리는 현상이 발생했다. 나는 또 구글링했다. 구글링을 하니 태그로 묶고 안에 을 주고 cs..

html에서 표를 만들어보는 방법을 알아보겠다. 이름 성별 주소 피카츄 여자 서울 위의 내용을 테이블로 만들고 싶다고 가정하자. 그럴땐 태그를 이용하면 되는데 는 table data의 약자이며 태그 만 사용해서는 테이블을 만들 수가 없다. 하지만 태그와 태그를 이용하면 이를 해결할수 있다. 그 방법은 태그로 같은 행을 묶어주고 전체 테이블을 태그로 정리하는 방식인데 이로써 진정한 테이블이 만들어 진다고 할 수 있다. 테이블에 테두리를 만들고 싶다면 태그아래에을 주면된다.여기서 값은 테두리의 수를 나타낸다.태그와 태그 두가지의 태그는 테이블의 헤더와 바디를 지정 해 준다. 지정해주지않아도 브라우저가 알아서 해주지만 표를 웹에 삽입하고 싶다면 이러한태그를 습관적으로 사용하도록하자. 그리고 추가적으로 태그는 ..

모든언어를 웹페이지에 기술하게 해 주는 태그 html에 css를 적용시켜주며 꼭 헤더부분에 위치해야한다. html에 javascript를 적용시켜주며 태그 바로 앞, 즉 문서 본문의 맨 끝에 넣는게 좋다. 이야기의제목 각장 제목 각장하위절 ##태그와의 차이## 순서가 없다. 순서가 있다. ##텍스트를 두껍게 만들어주는 태그 3가지## 1.특별한 의미가 있는건아니지만 텍스트에게 강조효과를 준다. 2.bold체이며 강조 할 때 사용한다. 3.중첩이 가능하며 강조 할 때 사용한다. -절대 url->프로토콜 및 도메인 이름을 포함하여 웹에서 절대위치로 정의 된 위치를 나타낸다. -상대 url->링크하는 파일과 관련된 위치를 가리키며 이전 섹션에서 살펴본 것과 비슷하다.(다른위치) ##태그 그리고 태그와 태그 사..

자바스크립트는 var를 사용 할 경우 같은 변수를 여러 번 정의하더라도 무시 할 수 있습니다. 하지만 함수나 전역 스코프 안에서는 var로 새 변수를 만들 수 없으며, let으로는 가능한 변수 숨김도 불가능합니다. 이제 const와 let에 대해 알아보도록 하겠습니다. let은 변수 선언에만 쓰이고, let문 하나에서는 변수를 여러개 선언 할 수 있습니다. const는 상수 여러개를 선언 할 수 있지만 한번 할당한 값을 바꿀 수가 없습니다. 될 수 있으면 변수보다는 상수를 써야 하기 때문에 const를 쓰는 버릇이 좋습니다. 상수를 사용하면 값을 바꾸지 말아야 할 데이터에서 실수로 값을 바꾸는 일이 줄어듭니다. 상수를 쓰면 안되고 변수를 필연적으로 써야 하는 경우도 있는데 그런 경우는 보통 시간이 지나면..