Giter Club home page Giter Club logo

fe-week1-html-css's Introduction

Week 1 - html, css + git 실습하기

지금부터 아래의 안내사항에 따라 팀원들과 과제를 수행하시길 바랍니다!

주의사항

  1. 팀별로 과제 수행 순서를 정합니다 예: 1번 이상혁 -> 2번 최주용 -> 3번 김나현 ....
  2. 반드시!!!! 순서에 맞게 과제를 진행해주세요! (충돌 싫어용ㅜㅜ)
  3. 가장 첫번째로 과제를 진행할 1번 순서는 카톡방의 파일을 다운로드 받은 후 버전 생성(커밋) -> 자신의 github 레포지토리 생성 -> push 합니다
  4. 나머지 팀원들은 올려진 레포지토리에 있는 파일을 clone 합니다!
  5. 이제 순서에 맞게 과제코드를 작성 후 push/pull
  6. 한 명이 push 했다면 다른 사람들은 반드시 pull 하고 과제를 풉니다!!
  7. 커밋 메세지는 다음와 같이 작성합니다 -> "이상혁: 1번 문제" "최주용: 2번 문제" "김나현: 3번문제"
  8. 모든 팀원들이 과제를 다 해결했다면 과제사이트에 해결한 깃허브 레포지스토리 리크를 올려주세요!!

방법 순서 예시:

1번이 파일을 다운로드 받은 후 자신의 깃허브 레포지토리에 push한다. 다른 팀원들은 그 코드를 clone 받는다 1번이 모두 clone받는 것을 확인하면 1번 과제를 작성 후 push한다 다른 팀원들 모두 pull한다 2번이 2번 과제를 작성 후 push한다 다른 팀원들 모두 pull한다 . . . 끝날때까지 반복..!

실습과제

1번문제: "Possibility To Reality 당신의 내일과 가장 가까운 오늘을 만듭니다"

저희 likelion의 자랑스런 슬로건이 적혀있는 로그인 폼이 존재합니다!! 아래에는 로그인하기 버튼이있네요!! 그러나 저 슬로건들과 로그인하기 css 코드가 인라인스타일로 작성되어있네요... 색도 마음에 들지 않아요 ㅜㅜ css 코드를 내부스타일 방식으로 작성하여 아래와 같은 결과를 만들어보세요!!

변경을 완료하셨다면 색상도 자유자제로 변경해보셔도 됩니다. IMG1

2번문제: 우리 조원의 mbti가 궁금해요! 서로의 mbti를 공유하고 이름과 mbti를 작성합니다!

다만 조건이 있습니다! 아래 사진과 비슷하게 만들어주세요! IMG2

3번문제: 으앗! 글씨체가 딱딱하니.. 너무 마음에 안들군요!! 구글 폰트(Google font)에는 정말 다양한 폰트가 존재합니다!

구글 폰트를 사용해서 Indie Flower 폰트로 모두 바꿔주세요! 단, link와 @import 중 @import를 사용합니다!

4번문제: 사진이랑 내용이 날라갔어요! 도와주세요..

아래 원래 이미지에는 이렇게 내용이 존재합니다!. 그렇지만 지금은 아무것도 보이지 않아요... 이미지 태그를 사용해서 이미지를 넣어주고 안에 들어갈 글씨 내용을 채워주세요!! IMG3

(참고)cmd 명령어

  • cd <폴더명> : 들어가고 싶은 폴더에 접속하기
  • cd .. : 상위 폴더에 들어가기
  • pwd : 현재 폴더(root 폴더)
  • ls : 현재 폴더에 어떤 폴더와 파일이 있는지 확인
  • ls -al : 숨겨진 폴더/파일도 확인할 수 있음

화이팅 화이팅! 모르는 부분이 있으면 서로 토의하면서 질문해주세요!

fe-week1-html-css's People

Contributors

lexxsh avatar

Watchers

한수현 Soohyun Han avatar 유승인 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.