TIL [20.08.15] - 1일, 7일 레이아웃 제작(html, css)

css - 각 일정 <div>에 테두리 적용 : border

http://webberstudy.com/html-css/css-1/border/

border (테두리 스타일)

css - 글씨 굵게 : font-weight: bold

css - table 꾸미기
-테두리선 : table, th, td태그에 border 적용
-표 내 여백 : padding 적용

https://www.codingfactory.net/10510

CSS / 표(table) 꾸미기 / 테두리 만들기

 

css- table 셀간격(표 세로 간격) 조정, 고정

https://yodurumi.tistory.com/194

https://rgy0409.tistory.com/2893

http://www.homejjang.com/09/table_layout.php

<colgroup>        
  <col width="150px">      
  <col width="370px"> 
  <!-- 너비를 지정해주어야한다 -->    
</colgroup>

-<colgroup> 태그 : <table>과 <thead>사이에 들어가 표의 세로줄(column) 간격을 조정해 준다.
각 column마다 px값을 지정하거나 배율(%)로 지정할 수 있다.
column간격고정으로 셀 내용이 튀어나오는 것을 방지하려면 style="word-break: break-all" 속성을 추가하면 된다.

 

..그렇다고 해서 여기까지 하면 될 줄 알았는데 7일자 레이아웃의 표 세로 간격이 그대로다. ㅠㅠ왜일까?
내일 더 구글링 해보고, 그래도 안 되면 질문을 올려봐야겠다.

 

---

현재까지 프론트엔드 모습!

1일(to-do list) 레이아웃

 

7일 레이아웃

 

 

 

---

 

 

TIL

 

- 1/7/30 아이콘 이미지 간 간격 동일하게 하기 위해 이리저리 시도하다가,
각 아이콘 이미지에 동일한 .icon class를 지정하고 css를 통해 가로세로 고정, 상하10px, 좌우30px을 지정하니 성공!

.icon{
  width: 50px;
  height: 50px;
  margin: 10px 30px;
}

 

- 7일의 세로형 레이아웃을 어떻게 구현할까 고민하다가.. table을 활용하기로 했다.
레이아웃 구현에 table태그 사용이 권장되지 않는다는건 들었지만,
지금 내 수준에서 외부 소스를 빌리지 않고 원하는 레이아웃을 구현하기 가장 적당했기 때문.
막상 table로 구현하고 보니 괜찮아서 1일 레이아웃에도 적용할까 생각중이다.
어차피 추후 30일 레이아웃에도 table을 활용할 듯 한데, 그런 김에 1/7/30 모두 통일하면 더 좋지 않을..까? 

- 일정 더미데이터를 작성하다 보니 하루에 여러 일정을 나타내야 하는 경우가 많았다.
 그래서 각 일정을 <li>로 나타내기로 했다. 훨씬 보기 좋아졌다!