생활코딩

Coding Everybody

겁나 빠른 웹 레시피

커버 생활코딩 > 클라이언트 > 겁나 빠른 웹 레시피

웹 프론트엔드 레시피는 HTML, CSS, JavaScript를 이용해서 여러 UI를 만들기 위해서 필요한 재료와 결합방법 그리고 순서를 설명해드립니다. 이 수업을 통해서 UI에 대한 실전적이고 실천적인 사례들을 공부할 수 있습니다. 

선행학습

이 수업은 최소 HTML과 CSS를 선행지식으로 필요로 합니다. 또한 레시피에 따라서는 JavaScript가 필요할 수도 있습니다. 각 레시피 별로 수업에서 사용하는 기술들에 대해서 미리 알려드리기 때문에 선행 혹은 후행 학습이 필요한 경우는 제공해드리는 링크를 통해서 공부하시면 됩니다. 아래는 이곳에서 편안하게 공부하기 위해서 필요한 선행학습들입니다. 

여기서 공부하기 위해서는 HTML, CSS의 기본적인 문법은 꼭 아셔야 합니다. 한편 JavaScript가 필요한 레시피가 아닌 경우는 JavaScript는 모르셔도 됩니다. JavaScript가 사용되는 레시피의 경우도 이 언어에 능통할 필요는 전혀없고, 자바스크립트가 무엇이고, 어떻게 웹브라우저를 제어하는지에 대한 기본적인 인식 정도는 꼭 필요합니다. 

Youtube

youtube로 학습하시는 것이 편하신 분은 아래 링크를 이용해주세요.

youtube 웹 프론트 엔드 레시피 재생목록 바로가기

예제

수업에서 사용하는 모든 예제는 아래 링크를 통해서 다운로드 받을 수 있습니다. 

남매 수업

리체님이 운영하시는 겁나 빠른 레시피가 있습니다. 

댓글

댓글 본문
  1. 코딩두
    23.07.20 시작해볼게요
    답글
  2. Karr
    시작합니다
    답글
  3. 할수있어
    시작합니다
    답글
  4. int
    겁나 빠르다.
    답글
  5. Ulchu Julxhang
    클라이언트끼리 가위바위보게임을 하는것도 php로 가능한가요?
    답글
  6. fiat
    시작합니다
    답글수정삭제
  7. Dajim
    시작합니다
    답글수정삭제
  8. lygon
    2019-03-14 완료
    답글
  9. 홍인표
    시작합니다 :)
    답글
  10. htmlhm
    깃허브에 main.css 를 index.html 과 같은 디렉토리에 위치시키면 않됩니다.
    html소스의 모든 링크 파일들의 URL 을 수정하세요.
    대화보기
      답글
    • 원코드
      제목 : 웹호스팅시 css 적용이 안되네요 .

      이고잉님 강의 잘 보고 있습니다.
      웹페이지 만들어보고 싶어서 가르쳐주신 내용들 보고 부단히 따라 가고 있습니다.

      다름이 아니라
      모든 내용을 작성하고, 인터넷 페이지 컨트롤+o 로 할때는 잘 되던 웹페이지가 깃허브에 올려 주소로 접속하게 되면 희안하게 CSS작성한 내용이 풀리는 현상이 발생합니다.

      index.html 상단부와 와 main.css 파일 첨부합니다

      index.html


      <html>
      <head>
      <title>Song's introduction</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="assets/css/reset.css">
      <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200i,300,300i,400,400i" rel="stylesheet">
      <link rel="stylesheet" href="fontello-5bfc156d/css/fontello.css">
      <link rel="stylesheet" href="assets/css/main.css" />
      </head>
      <body>

      main.css


      #header .avatar{
      border-radius: 100%;
      display: inline-block;
      padding : 0.5rem;
      background-color: rgba(255,255,255,0.05);
      border:1px solid rgba(255, 255, 255, 0.25);
      margin-bottom:1.5rem;
      }

      #header .avatar img{
      border-radius: 100%;
      display: block;
      }
      #header h1{
      font-size: 1.5rem;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 200;
      margin-bottom: 1.5rem;
      line-height: 2.5rem;

      }
      #header h1 strong{
      color : white;
      font-weight: 200;

      }
      #grid ol a{
      text-decoration: none;
      border-bottom: 1px dotted rgb(255, 255, 255,0.5);
      }

      #header ul.icons li{
      display: inline-block;
      border:1px solid rgba(255, 255, 255, 0.25);
      border-radius: 100%;
      background-color: rgba(255,255,255,0.05);
      width:2rem;
      height:2rem;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-right :1rem;
      }
      #header ul.icons li:hover{
      border:1px solid rgba(255, 255, 255, 0.25);
      background-color: rgba(255,255,255,0.2);

      }

      #header ul.icons li a{
      color:rgba(255,255,255,0.5);
      text-decoration: none;
      }
      #header ul.icons li .label{
      display: none;
      }
      #main .thumbnails{
      display:flex;
      }
      #main .thumbnails>div{
      flex-grow:1;
      margin-left: 1rem;
      margin-right: 1rem;
      }
      #main .thumbnails a{
      margin-bottom: 1.5rem;
      display: block;
      }
      #main .thumbnails img{
      width: 100%;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      display: block;
      }
      #main .thumbnails h3{
      border-left :1px solid rgba(255,255,255,0.3);
      border-right :1px solid rgba(255,255,255,0.3);
      border-bottom:1px solid rgba(255,255,255,0.3);
      border-bottom-left-radius:0.2rem;
      border-bottom-right-radius: 0.2rem;
      padding:0.5rem;
      text-align: center;
      background-color: rgba(255,255,255,0.1);
      color :rgba(255,255,255,0.6);
      font-size:0.8rem;
      font-weight: 200;
      }

      #footer{
      text-align: center;
      color:rgba(255,255,255,0.5);
      font-weight: 200;
      padding-bottom: 3rem;
      font-size: 0.8rem;
      }
      #footer a{
      color:rgba(255,255,255,0.5);
      text-decoration: none;
      border-bottom: 1px dotted rgba(255,255,255,0.5);
      }
      #footer:before{
      content: '';
      display: block;
      margin: 3rem auto;
      width: 10rem;
      border-top: 1px solid rgba(255,255,255,0.2);
      }

      @media(max-width:480px){
      #main .thumbnails{
      display:block;
      }
      }

      #grid ol{

      width : 150px;
      padding-left: 70px;

      font-size: 1.0rem;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 200;

      line-height: 1.4rem;
      }

      #grid ol a{
      color : rgba(255,255,255,0.5);
      }
      #grid{
      display : grid;
      grid-template-columns: 150px 1fr;
      }
      #article p{
      align-content: center;

      font-size: 1.0rem;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 200;

      line-height: 1.5rem;

      padding-bottom: 60px;

      }
      #article p a{
      color :rgb(255,255,255,0.5);
      text-decoration: none;
      border-bottom: 1px dotted rgba(255,255,255,0.5);
      }
      @media(max-width:620px){
      #grid{
      display :block;
      }
      #grid ol{
      margin:auto;
      margin-bottom: 40px;

      font-size: 1.0rem;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 200;

      line-height: 1.5rem;

      }
      #article p{
      padding-bottom: 60px;
      }
      }



      이 부분 궁금하네요. 알고 계시면 답변 부탁드립니다.
      답글
    • 이유리
      감사합니다.
      답글
    • JJ
      유투브로 보시면 하나도 안헷갈려요~ 유투브 재생목록 이용하세요!
      답글수정삭제
    • 아이노바
      가슴으로 말합니다. 너무 감사합니다.
      답글
    • 지구촌
      든는 방법이 햇갈리네? 왼쪽 메뉴는 나중에 봐야 순서가 맞나?
      답글수정삭제