본문 바로가기
[패캠] 프로그래밍 첫걸음 시작하기

[패스트캠퍼스] 프로그래밍 첫걸음 시작하기 학습일지 2주차

_yeonseon__ 2022. 8. 16. 19:42

2주차... HTML과 CSS의 기본을 공부하고 있다. 이 부분은 암기가 필요한 것 같다.
유튜브에서 HTML&CSS 강의들을 몇개 봤었는데, 태그와 요소들을 하나하나 자세히 알려주는 강의는 없었다.
강의력이 좋은지는 잘 모르겠으나, 이 강의에서는 하나하나 알려줘서 좋은 것 같다.
솔직히 태그와 요소들이 잘 정리되어 있는 페이지들을 혼자 보고 공부할 수 있겠지만, 
나같은 미루기 끝판왕은 하나하나 떠먹여주는 이런 강의가 좋다 ㅋㅋ 암튼 그래
그렇다고 머릿속에 다 들어오는 건 아니지만 
강의 자료를 내 방식대로 한 번 더 정리함으로써 어느 정도 외워지겠지!

 

HTML

Semantics Tag

<header></header> 페이지 최상단
<footer></footer> 페이지 최하단
<nav></nav> 링크를 포함한
<aside></aside> 사이드바
<main></main> body의 주요 컨텐츠
<section></section> main 안에서도 구획을 나눌 때
<article></article> main 안에서도 구획을 나눌 때,
같은 형식을 가진 컨텐츠를 반복할 때

과제
대충 과제 보고 내가 짜본 코드...ㅎ 그지 같지만 10분만에 한 ,, 혼자 힘으로 했ㄷㅏ고!(핑계)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,summary,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}td,th{background-color:#fff;border:1px solid #ddd;padding:12px 16px;line-height:2em}caption{font-size:1.5em;margin-bottom:12px}input,select{font-size:1rem}button{font-size:1.2rem;margin-right:8px}textarea{padding:8px;font-size:.95em;width:360px;border:1px solid #ddd}label{display:inline-block;margin-right:12px;vertical-align:top}.header{display:grid;grid-template-columns:24px 400px 1fr 84px 24px;grid-template-areas:'left-space logo nav account right-space';align-items:center;height:64px;background-color:#ff4500}.header .logo{grid-area:logo;font-size:2rem;font-weight:700;text-decoration:none;color:#fff}.header .nav{grid-area:nav}.header .nav li{display:inline-block;margin-right:36px}.header .nav li a{font-size:1.25rem;text-decoration:none;color:#fff}.header .account{grid-area:account;font-size:1.5rem;text-decoration:none;color:#fff}.main{display:grid;grid-template-columns:280px 1fr;grid-template-areas:'aside content'}.main .aside{grid-area:aside;background-color:#eee;border-right:1px solid #d3d3d3;padding:36px}.main .aside .option-title{font-size:1.5em;font-weight:700;color:gray}.main .aside ol,.main .aside ul{padding-left:18px;font-size:1.15em;margin:32px 8px;line-height:1.5em}.main .aside ol li,.main .aside ul li{cursor:pointer}.main .content{grid-area:content;min-height:calc(100vh - 196px);background-color:#fafafa}.main .content .section.intro{padding:56px 48px;background-color:#fff;border-bottom:1px solid #d3d3d3;font-size:1.3rem;line-height:1.3em}.main .content .section.intro h1{font-size:1.5em;font-weight:700;margin-bottom:24px}.main .content .section.form{padding:36px}.footer{background-color:#383838;padding:64px 0;font-size:1.2rem;text-align:center}.footer ul>li{display:inline-block;padding:0 48px}.footer ul>li:not(:last-child){border-right:1px solid gray}.footer ul>li a{color:#fff;text-decoration:none}
  </style>
</head>
<body>
  <header class="header">
    <a class="logo" href="#">FastCampus Portfolio</a>
    <nav class="nav">
      <ul>
        <li><a href="#">사진 올리기</a></li>
        <li><a href="#">내 정보</a></li>
        <li><a href="#">팔로우 보기</a></li>
        <li><a href="#">팔로워 보기</a></li>
      </ul>
    </nav>
    <a class="account" href="#">Logout</a>
  </header>
  <main class="main">
    <aside class="aside">
      <div class="option-title">사진 업로드</div>
        <ol>
            <li>양식을 저장한다.</li>
            <li>사진파일을 첨부한다.</li>
            <li>올리기 버튼을 누른다.</li>
        </ol>
      <!-- 이곳을 채워넣으세요. -->
    </aside>
    <div class="content">

      <section class="section intro">
        <h1>사진 올리기</h1>
        <h2>수많은 이용자들이 공유하는 멋진 사진들을 구경하고</h2>
        <h2>내가 직접 찍은 작품들을 공유하세요!</h2>
        <!-- 이곳을 채워넣으세요. -->

      </section>

      <section class="section form">
        <h2 style="text-align: center;">사진 업로드 폼</h2><br>
        <div class="form">
            <label for="ip-name">이름</label>
            <input id="ip-name" type="text" placeholder="이름을 입력하세요"><br>
            <br>
            <input type="radio">일반인
            <input type="radio">전문가
            <br><br>
            <label for="ip-title">제목</label>
            <input id="ip-title" type="text" placeholder="제목을 입력하세요"><br><br>
            <label for="ip-obj">주제</label>
            <select id="ip-obj" name="자연">뭐야</select><br><br>
            <label for="ip-exp">설명</label>
            <input style="height: 100px;" id="ip-exp" type="textarea" maxlength="100" rows="10"
                placeholder="사진에 담은 생각 등을 자유롭게 적어주세요."><br><br>
            <input type="file"><br><br>
            <button>올리기</button>
            <button>취소</button>
        </div>
        <!-- 이곳을 채워넣으세요. -->

      </section>

    </div>
  </main>
  <footer class="footer">
    <ul>
      <li><a href="#">회사소개</a></li>
      <li><a href="#">인재채용</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">개인정보 보호</a></li>
      <li><a href="#">고객센터</a></li>
    </ul>
  </footer>
  
</body>
</html>

어디에 내놔도 부끄러운 내 결과물
이건 과제 완성 예시

CSS 포스팅은 다음에...

저작자표시

'[패캠] 프로그래밍 첫걸음 시작하기' 카테고리의 다른 글

[패스트캠퍼스] 프로그래밍 첫걸음 시작하기 학습일지 4주차  (1) 2022.08.27
[패스트캠퍼스] 프로그래밍 첫걸음 시작하기 학습일지 3주차  (0) 2022.08.23
[패스트캠퍼스] 프로그래밍 첫걸음 시작하기 학습일지 1주차  (0) 2022.08.09

'[패캠] 프로그래밍 첫걸음 시작하기' Related Articles

티스토리툴바