전체 글

[HTML] [3] 태그(2) - <ul>, <ol>, <li>, 주석

1. + 은 "unordered list"의 약자로 순서가 없는 리스트 컨테이너를 만드는 태그이다. 해당 태그의 내부에 "list item"의 약자인 태그를 사용하여 무순서 리스트를 생성할 수 있다. 2. + 은 "ordered list"의 약자로 순서가 있는 리스트 컨테이너를 만드는 태그이다. 와 마찬가지로 해당 태그의 내부에 태그를 사용하여 리스트의 항목을 추가할 수 있다. 3. + ( + + ) 테이블을 만들어주는 태그이다. 우선 태그를 통해 테이블 컨테이너를 만들어준다. 태그는 표의 한 행을 감싸는 태그이고, 태그는 표의 제목 셀을 나타내는 태그이다. 태그는 테이블의 데이터를 나타내는 태그이다. 표의 제목 셀을 위한 태그는 필요에 따라 생략할 수도 있다. 태그 내부에 "border" 속성을 추가하..

[HTML] [2] 태그(1) - <h1>, <a>, <img>, <p>

html은 기본적으로 태그(Tag)라는 기호를 사용한다. ~ 의 형태를 띄고 있으며, 해당 '태그종류'에 따라 해당 부분의 역할이 달라진다. 태그 쌍은 시작태그와 종료태그로 구성된다. 예제 소제목 에 대해서, 다음과 같이 3가지로 나누어진다. 1.: 시작태그. 태그의 시작을 나타낸다. 2.예제 소제목: 값. 해당 태그에 어떤 값이 나타나는지 보여준다. 3.: 종료태그. 해당 태그의 종료를 나타낸다. 흔히 사용되는 태그들은 다음과 같다. 1. , , , , , 제목을 보여주는 태그이다. h뒤의 숫자가 커질수록 작은 제목이 된다. 사이트의 구성에 따라 가장 큰 부터 가장 작은 까지 사용할 수 있다. 순서대로 잘 구성된 제목 태그가 해당 페이지의 판단기준 중 하나이므로, 순서대로 잘 ㅏ사용하는 것이 중요하다...

[HTML] [1] html 파일의 골격

HTML이란 "Hyper Text Markup Language"의 약자로, 웹 페이지를 만들 때 사용하는 언어이다. 웹 페이지의 내용을 짜는 가장 기본적인 언어라고 할 수 있다. 웹 페이지에 출력할 문장 등을 ""로 감싼 "태그"라고 부르는 특수한 문자열로 감싸서 만든다. 이 HTML로 이루어진 파일을 CSS를 이용해 옷을 입히고, javascript를 이용해 동작을 구현하면서 웹 페이지가 생성되는 거이다. 모든 태그는 ~로 이루어진다. 웹 페이지의 가장 기본적인 골격(구성요소)는 다음과 같다. 1. 은 독 타입(Doctype) 선언이라고 부르며, 해당 페이지가 어떤 버전의 HTML에 맞게 작성되었는지 나타낸다. 현재 가장 최신 버전은 "HTML5" 이며, 웹 브라우저는 특정 버전이 지정되어있지 않으면 ..

[Cozubi] 2021/03/02

1. 진행된 것 1. Twitter API 연결 성공! 트위터에서 해당 유저의 트윗 가져오기 할 수 있음. 2. 로딩은 일단 그냥 3초로 default. 로딩 설정해야 할 거 생기면 하면 될듯 3. data가져오기 성공. 근데 시간이 없다. id랑 텍스트만 있음. 또 api로 접근해서 체크해야할수도... 2. 다음으로 해야할 것 1. 그리드, 플박 뭘로 할거야 살려주세요.. 왜 안돼 2. 코인에 대한 트윗들 페이지로 보여주기. 3. 게시글의 시간이 필요하다. 시간 가져와서 최신글인지 확인해야지. 3. 그 외 NOT EASY..

[Cozubi] 2021/03/01

1. 진행된 것 1. Grid 반응형으로 구현하려다 실패.. 2. 트위터 API 적용하려다 실패.. 3. 파이썬으로 서버 해보려다 실패.. 2. 앞으로 할 것 1. 잠정 중단. 노마드 코더 에어비엔비 풀스택 해보고 다시 진행.

[Cozubi] 2021/02/28

1. 진행된 것 1. 트위터 api 승인 받음: 트위터 API 연동 및 사용 방법 숙지해야함 이제. 2. 이미지 저장 위치 수정: src -> public. 이미지 static file로 두어 변수에 따라 이미지 가져오기 성공 2. 앞으로 해야할 것 1. Twitter API 연결, 연결에 따른 로딩 및 화면 출력 2. 코인 이미지 정렬 방식 설정: flex or grid? 3. 최근 글 있을 경우 빨간색 느낌표 설정 4. 코인 갯수 늘리기. 5. medium 등 다른 사이트 알아보기.

[React.js] 리액트 이미지 사용 / react img src

리액트 프로젝트에서 태그를 사용할 때 src를 잡는 법은 두 가지가 있다. 1.public 폴더에 저장 -> 상대경로로 잡기 2.src 폴더에 저장 -> import 를 이용하기 src 폴더에 저장할 경우 상대경로로 바로 접근할 수가 없다. 원인은 아직 모르겠다. 1. public 폴더에 저장 -> 상대경로로 잡기 public 폴더에 저장할 경우 위와 같이 바로 상대경로를 이용해서 가져올 수 있다. 이미지가 static file로써 저장됨으로서 가능하다고 한다. 이렇게 할 경우 import 를 여러번 할 필요도 없고, 어떤 변수에 대해 해당 변수의 이미지들을 편하게 가져올 수 있다. 2. src 폴더에 저장 ->import를 이용하기 위와 같은 방식으로 src 자체에 이미지를 저장하고, import 를 ..

[Cozubi] 2021/02/27

1. initail commit 리액트 어플리케이션을 생성하고, 로딩화면은 리액트 기본 로딩화면을 수정해 만들었다. 홈 화면은 다음과 같이 구성할 예정이다. 각 코인들에 대해 Twitter / Medium / 공식 홈페이지를 통해서 뉴스를 가져온다. 만약 1일 이내에 뜬 새로운 뉴스가 있을 경우 그림과 같이 빨간색 느낌표 설정. 혹은 빨간색 원? 컴퓨터가 켜져있는 경우 알림까지, 혹 카카오톡 알림 등 2. 현재 우선 해야할 것 1. Twitter API 연동 2. Medium API 알아보기 3. Home 화면 구성 3. 진행된 것 1. Twitter API 신청했음. 대기 해야함 2. Home 화면에 sample coin box 추가. -이미지 경로 코인별 설정 추가 -flex box(?)추가 -DB에..

[React.js] Router 사용 / react-router-dom

라우터란 여러가지 페이지를 url을 통해서 구분지어 사용할 수 있게 해주는 것이다. 여러가지 종류가 있다고 하는데, "react-router-dom"을 사용해보았다. 1. 설치 npm i react-router-dom 명령어를 통해 간단히 사용 가능하다. 2. 사용 라우터 중에서도 HashRouter를 사용해 보았고, 다음과 같이 url에 따라 두 가지 컴포넌트를 가져와 사용할 수 있다.

[React.js] github 웹 호스팅 / github.io

리액트로 웹을 개발하고 나면, 해당 웹을 호스팅할 수 있다. 웹을 호스팅한다는 것은, 해당 웹 사이트를 서버를 통해서 운영한다는 뜻인데, 개인 사용자들은 이것이 쉽지않다. 깃허브는 이를 위해 무료 웹 호스팅 기능을 제공한다. 이 게시글에서는 웹 프로젝트가 이미 깃허브에 레포지토리로서 존재한다는 가정하에 설명한다. GitHub를 통한 웹 호스팅 방법 1. package.json -> "homepage": "https://{자신의 이름}.github.io/{레포이름}/ package.json 파일에 해당 줄을 추가해준다. 주솟값은 위와 같이 "https://{자신의 이름}.github.io/{레포이름}/" 이 된다. 주의할 것은, 1. 주소의 맨 뒤에 '/'를 꼭 추가해야 하고, 2. 레포지토리가 publi..