6.29 AI School -html(2) 개발일지

이민정·2021년 6월 29일

대구 AI SCHOOL

목록 보기

1/47

TODAY

오늘은 어제 배웠던 태그를 활용하여 설계를 짜는 방법을 배웠다.

학습한 내용

카카오
-친구리스트만들기

<body> <!--친구리스트-->
  <ul>
    <li>
      <a href="#">
        <img src="#">
        <div>
          <h3>행복이</h3>
          <p>우리집 댕댕이</p>
        </div>
      </a>
	</li>
    <li>
      <a href="#">
        <img src="#">
        <div>
          <h3>복덩이</h3>
          <p>친한언니네 댕댕이</p>
        </div>
       </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
        <div>
          <h3>마메</h3>
          <p>친한선배네 댕댕이</p>
        </div>
       </a>
    </li>
<footer>  <!--하단에 메뉴4개 만들기-->
  <nav>
    <ul>
      <li>
        <a href="#">메뉴1</a>
      </li>
      <li>
        <a href="#">메뉴2</a>
      </li>
      <li>
        <a href="#">메뉴3</a>
      </li>
      <li>
        <a href="#">메뉴4</a>
      </li>
    </ul>
  </nav>
 <footer>

이미 '리스트'인부분에 ul,li를 활용하기
리스트에서 힌트친구는 순서가 없는 동급의 정보 =ul
누르면 채팅방으로 들어가기때문에 a/프로필사진 img를 넣는다.

div에 관하여.
설계도작성시 고요해야되는 요소
-어떠한 컨테르르 옮길때 횟수를 최소화(css관련)
-비슷한 컨테츠를 한 공간에 감싸고 있는지
```
>글자는 글자대로, 이미자는 이미자대로 일졸의 랩핑작업
```
위의 요소를 고려했을때, div라는 하나의 서랍장은 효율적이 태그가 된다.
작성한 li구역 하나당 친구하나
🥰Tip
이미지를 코드에 넣어야하는데, 아직 디자인너쪽에서 이미지를 못 받은 경우. https://via.placeholder.com/(사이즈)를 img src에 사전에 임의로 넣는다.
-이미지가 완성될때 넣어주면 됨.

< 설계도면작업에 시간과 정성을 많이 들어야된다. 잘못하면 다시 시작해야될지도..ㅜ
연습시 전체 한꺼번에 보다는 부분을 나눠서 조금씩 연습하는게 좋다>

네이버
-경제M

<ul>
  <li>
    <a href="#">
      <img scr="#">
    	<div>
          <span>경제M</span>
          <h3>참 열심히 살았는데 4.5억뿐인 무주택자의 호소</h3>
          <p> hello world hello world hello world </p>
          
          <span>레이달리오</span>
          <span>-</span>
          <span>1개월전</span>
  	</a>

그외 좌우배치등 디자인부분은 css에서!

💥주의!

들어갈 정보의 형태에 따라 알맞는 태그를 사용해야된다. 리스트형은 ul&li, 텍스트는 길이에 따라 p/span.

개발도구에 대한 의존도가 좀 있는듯...태그 닫는걸 간혹 까먹는다.

-함께M

<ul>
  <li>
    <a href="#">
      <img src="#">
      <div>
        <span>해피펀딩</span>
        <h3>열여덟 어른의 소중한 고백을 담은 동화책</h3>
        <p>어린 연주의 보금자리는 엄마 병상 옆 간이 침대였습니다. 유일한 놀이는 아픈 엄마에게 하지 못하는 이야기들을 공책에...</p>
        <div>
          <span>아름다운재단</span>
        </div>
      </div>
    </a>
  </li>
 <ul>

div안에 div넣기
서랍장안에 작은 박스구역이 있듯이, 안에 또 다른div를 넣어서 작은 공간을 만들어서 작업한다.

다음
-메인페이지 부분(1)

<div> <!--상단-->
	<div> <!--상단왼쪽-->
      <img src="#">
	</div>
    <div><!--상단오른쪽-->
      <div><!--상단 오른쪽 위-->
        <ul>
          <li><a href="#">가</a>
          <li><a href="#">나</a>
          <li><a href="#">다</a>
          <li><a href="#">라</a>
        </ul>
  	  </div>
    	<div><!--상단 오른쪽 아래-->
         <ul>
          <li><a href="#">가</a>
          <li><a href="#">나</a>
          <li><a href="#">다</a>
          <li><a href="#">라</a>
        </ul>
	  </div>
  </div>
</div>

<div><!--하단-->
  <ul>
    <li>
      <a href="#">
        <img src="#">
        <p></p>
       </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
        <p></p>
       </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
        <p></p>
       </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
        <p></p>
       </a>
    </li>
  </ul>
</div>

1) 우선 상하로 나눈다
2) 상(왼>오)로 나눈다
3) 상왼/상오 를 짠다.
4) 하를 마저 짠다.

🥰 큰틀 우선짠다. 상/하. 왼>오
안쪽으로 갈 수 록 디테일하게 영역을 설정한다.

-메인페이지부분(2)

<div> 상단
  <div>상단 왼쪽
    <ul>
      <li>
        <a href="#">
          <img src="#">
          <p></p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="#">
          <p></p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="#">
          <p></p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="#">
          <p></p>
        </a>
      </li>
	</div>
</div>  상단 왼쪽 끝!
<div> 상단 오른쪽
  <div> 상단 오른쪽 위
    <ul>
          <li><a href="#">가</a>
          <li><a href="#">나</a>
          <li><a href="#">다</a>
          <li><a href="#">라</a>
        </ul>
  </div>
  <div> 상단 오른쪽 아래
    <ul>
          <li><a href="#">가</a>
          <li><a href="#">나</a>
          <li><a href="#">다</a>
          <li><a href="#">라</a>
        </ul>
  </div>상단 오른쪽 아래 끝!
</div> 오른쪽 끝!!

        
<div> 하단
  <ul>
    <li>
      <a href="#">
        <img src="#">
        <p></p>
       </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
        <p></p>
       </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
        <p></p>
       </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
        <p></p>
       </a>
    </li>
  </ul>
</div>

신문기사상단부분

<div>
  <h3>인천 서구 아파트시장에 무슨일이</h3>
  <div>
    <div>
      <span>헤널드경제</span>
      <span>입력 2021.05.03</span>
      <span>수정 2021.05.03</span>
    </div>
    <div>
      <a href="#"><span>가</span></a>
	  <a href="#"><span>나</span></a>
      <a href="#"><span>다</span></a>
    </div>
  </div>
</div>

Agency

<body>
  <header>
    <div> 로고~메뉴까지는 한 몸이기꺠문에 div로 묶는다.
     <h1>
      <a href="#">
        <img src="#">
      </a>
      </h1>
      <nav>
        <ul>
          <li><a href="#">Services</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">team</a></li>
          <li><a href="#">contatact</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h2>Wellcome TO our Studio!</h2>
	  <h3>It's Nice To Meet you</h3>
	  <a href="#">Tell Me More!</a> _-? 버튼/a기능을 넣으면 안되나?-_
    </div>
  </header>

Helbak하단

<footer>
  <div>
    <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
    </ul>
  </div>
  <div>
    <a href="#"></a>
  </div>
  <div>
    <p>Accepted payment methods</p>
    <ul>
      <li><img src="#">가</li>
      <li><img src="#">나</li>
      <li><img src="#">다</li>
      <li><img src="#">라</li>
    </ul>
  </div>
</footer>
  </div>

Kids Gao

header부분

<body>
  <header> 처음부터 잠자리까지가
    <div> 처음 동물들
      <img src="">
      <img src="">
      <img src="">
      <img src="">
    </div>
    <div>잠자리
      <img src="">
      <img src="">
    </div> 
  </header>

항아리부분

<div> 전체 영역을 정의할 다른 테그가 없기때문
  <div> 콘테츠를 감싸기위한 태그
  	<div> 왼쪽
      		<img src ="#">
    		<div>
      			<img src ="#">
          		<p> 자초 어성초 감초를 넣어서</p>
  		</div>
  	</div>왼 끝
  	<div>중앙
      		<img src ="#">
    		<img src ="#">
   	</div> 중앙 끝
  	<div>오른쪽
    		<img src ="#">
    		<div>
      			<img src ="#">
      			<p>자초 어성초 감초를 넣어서~</p>
		</div>
	</div>오른 끝
  </div> 콘테츠끝
</div> 전체끝

💥주의
div를 잘 닫자....
작성할때는 텝이 잘 들어갔다고 생각했는데, 옆의 미리보기에서 제대로 안들어간것 보고 놀람...

학습한 내용 중 어려웠던 점 또는 해결못한 것들

태그의 개념들을 어제 배운내용들이여서 어렵지 않았다. 하지만 코드짤때, 닫힌태그를 제대로 안했거나 div가 많이지면 영역을 헷갈려하는 게 심했다... 개발도구에서는 자동으로 열린&닫힌 테그를 제공해주서 큰 실수 없었던 것같은데...ㅜ😢
a는 타 페이지로 이동하는 것이고, 버튼은 버튼형식을 만드는 것일뿐. 기능과 형태를 헷갈려하지 말자.
💥💥💥💥💥💥💥

해결방법 작성

탭를 보며 제대로 짝을 이루는지 확인하면서 작업했다. 하지만 업무양이 많아지면 비효율적인 해결방법인것 같으니 타 개발자분들의 블로그를 참조하여 좋은 습관을 가지도록 노력하자!
테그에 대한 복습이 필요하다. 기능별, 역활별 분류해서 확실하기 인식하기.
인강에서 가르쳐준 구조와 실습자료의 구조가 많이 달랐다. 확실히 어떻게 구조를 하냐는 것은 개인의 능력과 재능,센스(...)따라 천차만별인것 같음. 수시로 다른 웹페이지코드를 공부하자.
손에 익도록 최대한 복붙보다는 .. 손으로 직접치기..ㅜ

학습 소감

어제... 해야할 공부는 많은데, 시간이 없어도 너무 없다는 사실에 절망했었다....😱
나는...수업 진도도 나가면서...머신런닝하고 다른언어랑 자격증도 공부할 수 있을 줄 알았지...ㅜ
그래도 오늘은 인강시간이 짧아서ㅜ 제시간에 끝날 수 있었다...하지만 내일부터 다시 양이 많아진다며누ㅜㅜ😥ಥ_ಥ

어제 급하게 한다고 엣지로 개발일지를 썼었는데...구글에서 하니...미리보기가 있었다...어제 알았었다면 어제 일지를 그리 개판으로 쓰지않았을텐데..!!!

오늘도 공부할 것이 늘었다!!!(줄어드는 건-1씩, 늘어나는 건 제곱수준...) 목표한 공부량을 해결하자.. 목표를 이룰 수 있도록...

이민정

잘하고, 잘하고 싶고, 잘해야되는 사람

다음 포스트