오늘의집 이라는 인테리어 플랫폼 회사가 정말 깔끔하게 잘 만들어졌다는 생각이 들어서, 많은 웹 사이트 중에 오늘의집을 선택 하게되었다. 그리고, 플랫폼 회사에 입사하고 싶다는 생각도 들기도하고, 크흠,, 부끄럽구만,, 아직 초보이지만 이제 슬슬 만들어 볼까?
- 이게바로 제가 오늘부터 한번 만들어볼 오늘의집이라는 웹사이트입니다. 몇 챕터, 며칠이 걸릴진 모르겠는데, 내 지식에서 최대한 찾고 활용하고 물어보고 발품팔아서 꼭 한번 만들어 보겠습니다.
- 다음코드를 입력하게되면, 테이블을 가운데로 보낼 수 있다. 이거 하나 고민하는데 1시간 걸렸다. 그래도, 정말 많은 시행착오를 겪으면서 입력해도 안되는 곳을 알수있게되었다.
<style type="text/css">
table, td, th {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
</style>
- 바로 이 코드가 테이블의 테두리를 간단히 없애준다. 누드 빼빼로가 된 느낌이다.
table, td, th {
border: none;
}
- 힘들게 찾아서 했는데, 이미지 깔끔하지가 않습니다. 버튼 말고 그냥 이미지를 써봐야겠네요. 그리고 글씨가 세로에서 가로로 바뀐건 테이블 width="400" 에서 800으로 바꿔줬습니다.
<td><button type="button"><img src="./image/bucket.png" alt=""></button></td>
- 확실히 글씨체를 바꿔주니까 벌써 절반이나 한 것 같습니다 (글씨체 왜 안되는지 원인 찾는시간만 40분 소모한 것 같아요. 하지만 결국 찾아냈습니다. 제 인생의 모토라고하면 "불가능이란 없다" 이겠습니다. 계속 나아갑시다.
font-family: 잘풀리는하루;
- 찾아보니까 font-color 태그가 폐지 되어서 style="color: "; 이거로 대체 된다고 하네요. 이건 그래도 5분만에 찾았어요. 이제 조금씩 윤곽을 드러내가는거 같습니다만
<td style="color: #87ceeb;">커뮤니티</td>
- 일단 해보는데까지 해봤는데, Text안에 돋보기나, 예쁘게 생긴 장바구니 이런것들은 따로 https://fontawesome.com/start 이런곳에서 그림을 따와서 html 해드쪽에 코드를 적어주고 사용한다고 들었는데, 오늘은 일단 첫날이니까 그정도 디테일은 차차 다듬어가는게 나을것같다. 근데, 가운데 정렬을 해도 사진들이 안맞는데 사진 크기도 조절해야되지 않을까 싶다.
<Hr>
<div>
<form>
<table style="margin-left:auto;">
<tr>
<td>홈</td>
<td>팔로잉</td>
<td>사진</td>
<td>집들이</td>
<td>노하우</td>
<td>전문가집들이</td>
<td>셀프가이드</td>
<td>질문과답변</td>
<td>이벤트</td>
<td>3D인테리어</td>
</tr>
</table>
</form>
</div>
<div>
<form>
<table style="margin: 0 auto">
<tr>
<td><img src="./image/11.png"></td>
<td><img src="./image/22.png"></td>
</tr>
<tr>
<td><img src="./image/1.png"></td>
<td><img src="./image/2.png"></td>
<td><img src="./image/3.png"></td>
<td><img src="./image/4.png"></td>
<td><img src="./image/5.png"></td>
<td><img src="./image/6.png"></td>
<td><img src="./image/7.png"></td>
<td><img src="./image/8.png"></td>
</tr>
</table>
</form>
- 모양은 다른데, 사진 올리기 저 부분고 깔끔하게 꾸미려면, 부트캠프에서 찾던가, 아니면 아까 올린사이트에서 이메일 등록하고 이용해야될것 같은 느낌이 든다. 일단은 여기까지하고 내일 다시 보완해보자. 고생했다.
<select style="background-color: #87ceeb; color: white;"
id="" name="" placeholder="글쓰기">
<option>사진 올리기</option>
<option>집들이 글쓰기</option>
<option>노하우 글쓰기</option>
</select>
To be continue