지코딩

처음 코딩을 시작할 때 부터 오늘까지, (비록 얼마되지 않은 짧은 시간이지만) 집요하게 나를 괴롭히는 개념이 있다. 바로 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은 무시되고, 좌우의..

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

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

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

Jquery는 라이브러리*의 한 종류로 Javascript로 작성했을 때 복잡한 코드를 비교적 간단하게 구현할 수 있도록 도와준다. 먼저 Jquery CDN을 안에 임포트한 후 작성할 수 있다. css처럼 에서 대상을 지정한 후 에서 원하는 동작을 명령한다.(?) 대상 지정은 id="" 로 할 수 있는데, class와 다르게 한 대상만 지정할 수 있다. $('#대상').val(); 값 가져오기 $('#대상').hide(); 숨기기 $('#대상').show(); 보이기 let temp_html = $('#대상').append(temp_html); 원하는 값을 html에 구현하기 Ajax는 서버로부터 데이터를 받아올 수 있도록 요청하는 라이브러리이다. 서버에 요청을 할 때는 API라는 고유주소(?)를 이용해..

JavaScript 관련 let a = 'text' 이제부터 text를 a라고 부르겠다는 뜻: 선언 a 는 변수라고 한다. 변수는 컴퓨터와 서로 약속했기 때문에 ''를 써주지 않아도 되지만 'text' 엔 반드시 ''가 필요하다. 단어나 숫자 같은 짧은 데이터(?)외에도 list/dict형 변수 등이 들어갈 수 있다. (뭐든 넣고 짧게 줄이는 용도인 것 같다.) let a_list['사과','배','딸기','수박'] list형 변수는 안에 몇 개의 데이터(?)가 담겨 있다. 0부터 세기 시작하며 갯수를 length라고 한다. let a_dict = {'name':'bob','age':27} dict형 변수는 {key:value}의 구조로 key값을 물어보면 value로 대답한다. 여러 형태의 변수들을 굉..

HTML로 작성한 뼈대를 에서 꾸미기 위해서는 대상을 특정해야 한다. selector는 이 때 사용하는 것으로 이름을 붙여주기도 하고, 요소를 특정하기도 한다. 종류는 굉장히 많다. (기본선택자, 그룹선택자, 결합자, 의사클래스/의사요소) 모두 이해하지는 못해서 기본적인 내용만 공부했다. 1. *: 모든 HTML 요소를 선택 CSS * {} 2. 유형(type)선택자: 지정된 태그명을 가진 요소를 모두 선택 CSS p {} HTML 3. .class: class 어트리뷰트 값을 지정해 일치하는 요소를 선택, 중복 가능 CSS .practice {} HTML 4. #id: id 어트리뷰트 값을 지정해 일치하는 요소를 선택, 중복 불가능 CSS #practice {} HTML 5. 특성(attribute)선..