개발일지 작성 2일차
요약
- 디자인 구성에 맞춰 코드를 작성한다.
1. 구획 구분을 설정
2. 위에서 아래, 좌에서 우 순서대로
3. 최종 배치는 CSS를 배워야 가능함- div태그 활용도가 아주 높다.
학습 보고
실습 내용 / 결과물 출력 첨부
kakao
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ul> <li> <a href="#"> <img src="https://via.placeholder.com/50"> <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> </ul> <footer> <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> </body> </html>
naver
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <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 Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p> <span>머니그라운드</span> <span>-</span> <span>4일 전</span> </div> </a> </li> </ul> <ul> <li> <a href=""> <img src="https://via.placeholder.com/200x120"> <div> <span>[푸드클래스] 송현경 요리연구가</span> <h3>바삭하고 고소한 브런치</h3> <p>잘 구운 페이스티리 속에 부드럽고 진한 소스와 치즈가 듬뿍!</p> <div> <span>#오븐요리</span> <span>#베사멜소스</span> </div> </div> </a> </li> </ul> </body> </html>
daum
내용 입력이 없었으므로 결과물 캡처는 첨부안함
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div> <!-- 왼쪽 --> <div><img src=""></div> <!-- 오른쪽 --> <div> <!-- 오른쪽 상단 --> <div> <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> </div> <!-- 오른쪽 하단 --> <div> <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> </div> </div> </div> <div> <ul> <li> <a href=""> <img src=""> <p></p> </a> </li> </ul> <ul> <li> <a href=""> <img src=""> <p></p> </a> </li> </ul> <ul> <li> <a href=""> <img src=""> <p></p> </a> </li> </ul> <ul> <li> <a href=""> <img src=""> <p></p> </a> </li> </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> <!-- 오른쪽 상단 --> <div> <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> </div> <!-- 오른쪽 하단 --> <div> <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> </div> </div> </div> </body> </html>
news
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <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> </body> </html>
agency
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <header> <div> <h1> <a href="#"> <img src=""> </a> </h1> <nav> <ul> <li><a href="#">Service</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> </body> </html>
helbak
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <footer> <!-- 좌 --> <div> <a href="#"><span>Terms and conditions</span></a> <a href="#"><span>Cookies</span></a> </div> <!-- 중 --> <div> <a href="">↑</a> </div> <!-- 우 --> <div> <p>Accepted payment methods</p> <ul> <li><img src="https://via.placeholder.com/20"></li> <li><img src="https://via.placeholder.com/20"></li> <li><img src="https://via.placeholder.com/20"></li> <li><img src="https://via.placeholder.com/20"></li> <li><img src="https://via.placeholder.com/20"></li> </ul> </div> </footer> </body> </html>
kidsgao
내용 입력이 없었으므로 결과물 캡처는 첨부 안함
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <header> <!-- 상단 --> <div> <img src=""> <img src=""> <img src=""> <img src=""> <img src=""> </div> <!-- 아래 --> <div> <img src=""> <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> </body> </html>
추가 학습
미해결 - 솔루션
없음
질문거리
- 웹 개발을 공부하면 홈페이지 제작 이외에 무슨 일들을 할 수 있게 되는지 궁금하다.
- 앞서 2주간 공부한 AI/머신러닝 기초와 접점이 있는지, 있다면 어떤 식으로 연결 될 지 알고싶다.
복습
<div></div> <ul></ul> <li></li> ... 오늘 내용 세줄요약
학습 소감
지난 주 금요일에는 기계에게 대신 일을 시키기 위한 과정을 배웠는데,
어제 오늘은 자 따라해 보세요 이게 'Tag'라는 거에요
라서 조금 슬프다.
responsibility