따라하며 만드는 웹사이트 E03-1 : margin, 구분선, 좋아요 버튼

이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다.

웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다.

 

간략한 요약만 보고 싶다면 아래 블로그를 계속 이어 보고, 자세한 내용은 동영상을 보자.

www.youtube.com/watch?v=QaeVQKSTbE0&list=PLEzWjQvavJSoI1gF7cP-uxFyJQD2l47O3&index=5

 

지금까지 진도를 살펴보면

2021.03.25 - [분류 전체보기] - 따라하며 만드는 웹사이트 E01 : 환경설정

2021.03.25 - [언어/파이썬 초보의 웹사이트 도전 일지] - 따라하며 만드는 웹사이트 E02-1 : HTML, CSS, JS, React 구조

2021.03.25 - [언어/파이썬 초보의 웹사이트 도전 일지] - 따라하며 만드는 웹사이트 E02-2 : Class 컴포넌트, 이벤트

2021.03.25 - [분류 전체보기] - 따라하며 만드는 웹사이트 E02-3 : 이미지, 댓글창 껍데기

여기까지 해봤다.

본 강의의 코드는 여기에서 볼 수 있다.

github.com/heechcoding/Taraweb/tree/master/history

heechcoding/Taraweb

이번 시간에는 

디자인을 살짝 손 봐본다.

 

---

코멘트가 반응형으로 웹 페이지의 크기에 따라 반응하여 적절한 위치를 유지 하도록 만들어 보자.

이 강의에서는 맛만 보고 더 공부를 해 보아야 함.

 

수평 디바이더와 아이콘을 넣어본다.

semantic-UI에서 찾아서 복붙만 하면 생긴다. 굉장히 Simple!

 

react.semantic-ui.com/elements/divider/#types-horizontal-table

Divider - Semantic UI React

react.semantic-ui.com/elements/icon/

Icon - Semantic UI React

 

이 외에도 여러가지를 추가 해 준 결과 코드는 다음과 같이 추가 되었다.

편집기로 사용하고 있는 Atom에서 컨트롤+ , (쉼표) 를 눌러 셋팅으로 간 다음 prettier-atom을 설치한 후에

Control+option+F 를 누르면 코드를 이쁘게 만들어 준다.

import React from "react";
import {
  Image,
  Input,
  Header,
  Container,
  Divider,
  Icon,
  Button,
  Grid,
  Label,
} from "semantic-ui-react";
import {} from "semantic-ui-react";

import Comments from "./comments.js";
import Jenny from "./jenny.jpg";

function App() {
  return (
    <div>
      <Header as="h1" dividing>
        <Container textAlign="center">제니의 첫 솔로곡 SOLO</Container>
      </Header>
      <Grid centered>
        <Grid.Row>
          <Image src={Jenny} size="medium" rounded centered />
        </Grid.Row>
        <Grid.Row>
          <Button as="div" labelPosition="right">
            <Button color="red">
              <Icon name="heart" />
              Like
            </Button>
            <Label as="a" basic color="red" pointing="left">
              2,048
            </Label>
          </Button>
          <Button as="div" labelPosition="right">
            <Button basic color="blue">
              <Icon name="fork" />
              Share
            </Button>
            <Label as="a" basic color="blue" pointing="left">
              2,048
            </Label>
          </Button>
        </Grid.Row>
      </Grid>
      <br />
      <Divider horizontal>
        <Header as="h4">
          <Icon name="comment alternate" />
          Description
        </Header>
      </Divider>
      <Container textAlign="center">
        <br />
        천진난만 청순가련<br />
        새침한 척 이젠 지쳐 나 <br />
        귀찮아 <br />
        매일 뭐 해? 어디야? 밥은? 잘 자 <br />
        Baby, 자기, 여보 보고 싶어 <br />
        다 부질없어 <br />
        You got me like <br />
      </Container>
      <Comments />
      <br />
      <Divider horizontal>
        <Header as="h4">
          <Icon name="external share" />
          Share with
        </Header>
      </Divider>
      <br />
      <br />
      <div>
        <Grid centered>
          <Button circular color="facebook" icon="facebook" />
          <Button circular color="twitter" icon="twitter" />
          <Button circular color="instagram" icon="instagram" />
          <Button circular color="google plus" icon="google plus" />
          <Button circular color="kakao talk" icon="kakao talk" />
        </Grid>
      </div>
      <br />)
    </div>
  );
}

export default App;

결과물은 아래와 같이 나왔다.

좋아요와 공유를 추가했고, 수평선도 추가했으며, 가사도 좀 추가해 봤다.

제일 아래에 소셜 버튼들도 추가해 주었다.

이 모든것은 Semantic UI에서 갖고 올 수 있다.

 

 

이렇게 그럴싸한 포스팅 하나가 완성 되었다.

리액트 + semantic UI 조합은 정말 간편한 것 같다.

이제 살을 붙였으니 근육을 연결해 주면 되겠다.

 

다음시간으로.

멈추지마!

 

다음강의 보기

2021.03.26 - [언어/파이썬 초보의 웹사이트 도전 일지] - 따라하며 만드는 웹사이트 E03-2 : 댓글 등록 시스템

따라하며 만드는 웹사이트 E03-2 : 댓글 등록 시스템