[dg_ai_school] 웹프로그래밍 2

이채환·2021년 6월 29일
0

webprogramming

목록 보기
2/51

1) 학습한 내용

  • 설계도면 작업에 대한 이해(구조를 잘 짜야한다)
<!DOCTYPE html>
<html>
    <head>

<meta charset="utf-8">

</head>
<body>

    <ul>
        <li>
            <a href="#">
                <img>
                
                <div>
                    <h3>박지연</h3>
                    <p>다정한 사람</p>
                </div>

            </a>
        </li>
    </ul>


</body>
</html>

div태그는 서랍장이다
도면을 그릴 때; 비슷한 성질끼리, 좌표로 옮길 것 까지 고려

*팁; 임시로 이미지 크기를 넣어둠"https://via.placeholder.com/150"

*메뉴를 만들 때, nav 태그

  • 기본 골격
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

</head>
<body>

    <ul>
        <li>
            <a href="#">
                <img src="">
                
            </a>
        </li>
    </ul>


</body>
</html>
  • 부분연습_홈페이지 기사 (body에 들어갈 내용)
    <ul>
        <li>
            <a href="#">
                <img src="https://via.placeholder.com/150x80">
                
                <div>
                    <span>경제M</span>
                    <h3>부회장님의 취미생활</h3>
                    <p>Hello World Hello World Hello World 
                        Hello World Hello World Hello World </p>
                    <span>머니그라운드</span> 
                    <span>-</span>
                    <span>4일 전</span>
                </div>

            </a>
        </li>
    </ul>
  • 부분연습_신문기사 전문
				<div>
                    <h3>인천 서구 아파트 시장에 무슨 일이</h3>
                    <div>
                    	<!-- Left -->
                        <div>
                        	<span>헤럴드 경제</span>
                            <span>입력 2021.05.03</span>
                            <span>수정 2021.05.03</span>
                        </div>
                        	
                        <!-- Right -->
                        <div>
                        	<span></span>
                            <span></span>
                            <span></span>
                        </div>
                        
                </div>
  • a 태그를 넣으면 다른 페이지로 이동
  <a href='#'><span></span></a>
  • 라이브프리뷰 상단영역 (live pre-view)
			<header>
                <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="#">Contact</a><li>
            	        </ul>
       		         </nav>
       			</div>
                
           		<div>
                	<h2>Welcome To our Studio!</h2>
                    <h3>It's Nice To Meet You</h3>
                    <a href="#">Tell Me More</a>
                </div>
                
			</header>

2) 학습내용 중 어려웠던 점

  • 익숙하지 않아 따라가기 어려움

  • 영상 볼륨이 생각보다 너무 낮음

  • Command + / 또는 Ctrl + / 등의 단축키를 잘 모름

3) 해결방법

  • 3회 반복, 듣는 것과 동시에 이해하기 어려우므로, 선코딩 후이해를 목표로 움직임

  • 태그나 구조가 손에 익숙해지는 것을 목표로 삼음

  • 영상 볼륨 방법은 못 찾겠음

4) 학습소감

  • 강의 중에 부분적인 연습이 했었다는 말처럼 홀로 부분적인 요소를 만들어보고 연습하는 시간이 필요하다고 느낌
profile
Please be wonderful but don't be so serious, enjoy this journey with the good people!

0개의 댓글