지코딩

처음 코딩을 시작할 때 부터 오늘까지, (비록 얼마되지 않은 짧은 시간이지만) 집요하게 나를 괴롭히는 개념이 있다. 바로 HTML의 inline 과 block 인데 두 개념이 헷갈리니 여백이나 정렬에서도 계속 헷갈리는 부분이 나온다. 그래서 먼저 둘을 정확하게 구분하고 관련된 개념들도 다시 정리하려 한다. 1. inline 태그에 할당된 공간만 차지하는 요소이다. (새로운 줄을 만들지 않는다.) 다른 인라인 요소는 포함할 수 있지만, 블록 요소는 포함할 수 없다. display 속성을 사용해 인라인을 블록 요소처럼 다룰 수 있다. width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다. 인라인 요소 , , , , , , , , , , ..

미니프로젝트를 시작으로 항해99의 일정이 시작됐다. 아직 뭐가 뭔지 하나도 모르겠지만, 조가 편성되고 처음 써보는 S.A와 (뭔지도 몰랐다.) 역할 분담까지 정신없는 하루가 지나갔다. 살면서 한번도 나선적 없었던 내가 과연 조장을 잘 할 수 있을까? 걱정이 앞선다. 우리 프로젝트의 주제는 내가 가진 상품을 소개하는 사이트이다. 간단한 카드 형식으로 사진과 설명을 넣어 페이지를 구성하기로 했다. 완성은 어떻게 될지 모르겠지만 흔히 보이지는 않은 것 같은 주제라 기대가 된다. 프로젝트에서 나는 미화님과 함께 메인페이지를 담당했다. 아직 프론트엔드, 백엔드가 따로 구분되어 있지 않았기 때문에 기능별로 역할을 분담했다. 전체적으로 웹개발종합반에서 배웠던 부분을 토대로 구성했지만 각 게시글의 댓글기능과 상품 카테..

1. margin, padding (1개 수치만 입력하면 전체, 2개는 위아래와 좌우, 4개는 위-오른쪽-아래-왼쪽 순서로 적용) margin border를 경계로 바깥 쪽 여백 magin auto: 가운데를 기준으로 상하와 좌우를 같게 하는 것이다. margin auto는 블록일 때는 위아래, 좌우에 적용되지만, 인라인 일때는 좌우에만 적용된다. 두 개 요소의 margin이 겹치면 둘 중 큰 값이 적용된다. (여백 상쇄) padding border를 경계로 안 쪽 여백 2. display: display: inline display: inline이 지정된 요소는 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다. width, height, 상하의 margin 및 padding은 무시되고, 좌우의..

0. 개념 서버 { (프론트엔드: HTML CSS Javascript) } 서버는 프론트엔드를 주는 곳 클라이언트는 서버에서 프론트엔드를 받음 HTML은 뼈대 CSS는 꾸미기 javascript는 움직임(실행) 1. HTML 와 로 구성된다. 웹페이지의 내용은 , 그 외의 필요한 것은 에 저장된다. 에 들어가는 태그들은 구역을 나누는 태그와 : , , , 구역 내 들어갈 콘텐츠 태그가 있다. : , , , , , , 등등 구역을 나누는 태그는 해당 줄 전체를 차지하지만, 콘텐츠 태그는 해당 부분만 차지한다. 2. CSS css는 꾸미는 것. 뭔가를 꾸밀 때는 꾸밀 대상을 지시해서 꾸민다. (1. 태그에 selector를 붙임: 꾸밀 대상의 이름을 붙임 2. 에서 selector를 지정: 꾸밀 대상을 지시..

정신없는 이틀이었다. 처음으로 미니프로젝트에 참여해 아무것도 모르지만 어떻게든 뭘 만들어보려고 애썼다. 만들면서도 '이렇게 만들어도 되나?' 싶기도 하고 별 기능이 없어 초라해 보이지만 어쨌든 뭔가를 만들긴 한 것 같다. (아직 완성은 아니지만) 정말 많은 새로운 문법을 써보고 아직도 이해가 안되는 부분이 많았는데 막상 TIL에 적으려니 도무지 기억이 나질 않아 틈틈이 생각나는대로 적어보려 한다. 그 중에 프로젝트 내내 가장 많이 들었던 생각은 '정리가 굉장히 중요하다'는 점이었다. 여러 사람이 각자 방식으로 작업을 하다보니 처음 코드를 만들 때 보다 각자의 결과물을 합치는데 시간이 더 걸리고 더 스트레스를 받았다. 그 동안 나는 모든 코드를 index.html과 app.py에 작업했는데 이번 작업을 통..

- for 문으로 나온 결과를 다시 배열로 만들기 (파이썬은 리스트/자바스크립트는 배열, 오늘 배웠다.) let mbti_list = [] for (let i = 0; i

웹페이지: HTML, CSS, JavaScript로 만든다. 서버: 1. 만들어둔 파일(HTML, CSS, JavaScript)을 클라이언트에게 제공 2. 클라이언트에서 입력한 새로 저장할 데이터를 가져옴 3. 데이터베이스에서 저장된 데이터를 클라이언트에게 제공 DB: 서버에서 받은 데이터를 보관하고 요청한 데이터를 서버에 제공 (은행) API: 필요한 데이터가 담긴 곳, 클라이언트가 서버에게 요청하는 주소(은행의 창구번호) 서버를 구동시킬 수 있는 코드의 모음 서버를 구동하기 위해 필요한 복잡한 것들을 쉽게 할 수 있도록 만든 프레임워크 - flask를 이용해 서버를 만들 때 항상 해야할 것: 프로젝트 폴더에 - static폴더 : 서버에 담을 css파일, 이미지 - templates폴더/~.html ..

https://py-son.tistory.com/2

크롤링(스크래핑)은 웹페이지의 여러 데이터 중 필요한 데이터만 가져오는 것 requests는 url을 넣어 데이터를 가져오는 라이브러리이다. - 자바스크립트 때 배운 Ajax같은 느낌이다. 사용법 또한 비슷하다. json형식의 경우 원하는 데이터를 찾기 쉽지만(리스트형식이라) 보통의 웹페이지는 json형식이 아닌 html이다. 그래서 BeautifulSoup이라는 라이브러리를 쓴다. BeautifulSoup은 가져온 html 더미를 텍스트 형태로 저장한다. BeautifulSoup의 개념이 이해가 안돼서 시간이 오래걸렸다. 이해한 내용대로 정리를 해보자면, .select()는 HTML더미에서 내가 찾는 부분을 찾아주는 코드이다. () 안에는 copy selector나 속성값을 넣어준다. (copy sel..

파이썬은 직관적인 언어이다. (딱 봐도 간결해 보이고, 잘 읽히는 느낌이다) 괄호가 많이 쓰이지 않아 들여쓰기가 중요하다. (한 번 들여쓰기해서 하위코드?라고 표시함) 기본적인 규칙은 자바스크립트와 비슷해 보인다. [] 는 리스트, {} 는 딕셔너리 - 반복문 for 단수 in 복수 형태가 많다. 왜? 잘 모르지만 직관적으로 알아듣기 쉬운듯 하다. 예) for fruit in fruits: fruits의 fruit을 반복해줘