📍디자인 카타
오늘 디자인 카타 발표날인데 전혀 아닐 것 같았던 1번으로 발표를 했다.
📍코딩 개인 학습
2일차 코딩을 듣고 1일차 코딩 과제를 해봤다!
내가 다 할 수 없어 강의자료를 많이 참고했지만 이해하는데에는 많이 도움이 되었다!
<!DOCTYPE html>
<html>
<head>
<title>HTML로 자기소개 페이지 만들기</title>
</head>
<body>
<h1>안녕하세요! 저는 초보 디자이너 입니다!</h1>
<p>저는 HTML을 배우고 있어요 웹페이지는 재미있고 멋져요!</p>
<img
src="https://i.namu.wiki/i/Uf4SGwP931Fx9mJ0cIoQsKuYsnuO1rpRgFpWDnRcTjcpclLDVRAVXPM6mZiR-ocIJ5HUbKeR-EyRRo_LISd5ZA.webp"
alt="프로필 사진"
width="300"
/>
<div>
더 많은 정보를 보려면
<a href="https://whdbqls4964.tistory.com/">여기를 클릭하세요.</a>
</div>
<h1>내가 좋아하는 것들</h1>
<ul>
<li>드로잉</li>
<li>사진찍기</li>
<li>산책</li>
</ul>
<h1>내 친구들</h1>
<table border="1">
<style>
body {
background-color: white; /* 전체 배경은 흰색 */
}
table {
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #999;
}
th {
background-color: #d6eeff; /* 연한 하늘색 */
}
</style>
<tr style="background-color: pink">
<th>이름</th>
<th>관심사</th>
</tr>
<tr>
<td>민정</td>
<td>예쁜 카페가기</td>
</tr>
<tr>
<td>금비</td>
<td>밤리단길 가기</td>
</tr>
</table>
<h1>의견을 알려주세요!</h1>
<form action="/submit" method="POST">
<div><label for="message">강의에 대한 생각: </label></div>
<textarea id="message" name="message"></textarea><br />
<button type="submit">제출</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>카드형 게시물</title>
</head>
<body>
<article class="post-card">
<img src="image.png" alt="게시물 이미지" class="post-image" />
<div class="post-content">
<h2 class="post-title">만우절</h2>
<div class="post-meta">
<span class="post-date">2025년 4월 1일 13:00</span>
<span class="post-category">일상</span>
</div>
<p class="post-body">매니저님을 찾아라!</p>
</div>
</article>
</body>
</html>
자기소개 페이지를 코딩으로 만들어봤다!
정해진 형식대로 나열해봤다..!
근데 " 더 많은 정보를 보려면 여기를 클릭하세요." / 강의에 대한 생각 폼이 자꾸 옆으로 나와서 개발튜터님꼐 찾아갔다...
근데? 나만 이렇게 되서 뭔가 다른게 문제였을 것 같다.
그래서 밑으로 내리는 다양한 방법이 있는데 나는 가장 단순한 레이어를 나누는 <div>를 사용했다..!
레이어를 나누고 싶은 부분에 <div></div>를 사용했다!
그리고 사진을 넣고싶을 때 구글링한 사진 주소를 복사해서 넣는 것을 배워서 내가 저장한 사진의 주소를 계속 복사해서 넣었는데 자꾸 사진이 안들어가져서 튜터님께 질문을 했는데 이럴때는 그냥 사진을 드래그해서 넣어서 넣을 사진의 이름을 000.jpg 이런식으로 넣어야한다.
카드를 만든건데 사진 사이즈 조절하는건 약간 얼마난 크기로 할지 가늠이 안가서 걍 넣었당 ㅎㅎㅎㅎㅎㅎㅎ
고작 이거했는데 오후 스크럼할때가 왔다..
내일은 복습도 좋지만 레퍼런스를 찾아보는데 시간을 많이 쓸 예정이다.
왜냐면 그 다음날부터 MVP를 하기 때문이다..........화이팅
|
|
'TIL' 카테고리의 다른 글
| [UIUX디자인 TIL+49]-MVP 시작 (0) | 2025.04.03 |
|---|---|
| [UIUX디자인 TIL+48]-MVP 전날 (0) | 2025.04.02 |
| [UIUX디자인 TIL+46]-코딩배우기 마지막날 (0) | 2025.03.31 |
| [UIUX디자인 TIL+44]-코딩배우기 (0) | 2025.03.27 |
| [UIUX디자인 TIL+43]-두번째 팀프로젝트 끝! (0) | 2025.03.26 |