04-26
CSS: Pseudo-classes
엘리먼트의 특별한 상태를 정의할 때 사용
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}참고: https://www.w3schools.com/css/css_pseudo_classes.asp
HTML: <abbr> 요소
준말 또는 머리글자를 나타냄
<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/abbr
alt + shift : 탭 이동
04-27
CSS: box-shadow 참고
참고: https://copy-paste-css.com/box-shadows
04-28
현장에 가서 프로덕트가 어떻게 사용되는지 실제로 보고 왔다. 화면 사이즈를 알고 작업했고, 나름대로 고려를 하고 작업했는데도, 모니터에서 보는 것과 현장에서 보는 게 많이 달라서 이래서 현장을 가는구나 싶었다. 현장 작업자들은 프로덕트를 메인으로 사용하지 않고 자신의 업무를 하는 도중에 "필요할 때만" 사용하고, 그렇기 때문에 명시적으로 잘 디자인하는 것이 중요해 보였다.
타이포그래피가 마음에 들어
04-29
CSS: word-break
텍스트가 자신의 콘텐츠 밖으로 나갈 때(overflow) 줄을 바꿀지 지정
/* 키워드 값 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word;참고: https://developer.mozilla.org/ko/docs/Web/CSS/word-break
HTML, CSS, Javascript: TOC(Table Of Contents)
참고: https://depast.tistory.com/40
04-30
CSS: width와 max-width
- Display 속성 : 레이아웃을 제어.
- Block-level 요소 : <div>, <h1> - <h3>, <p> ...
- Inline 요소 : <span> <a> ...
- none
- width 와 max-width
- block은 항상 사용 가능한 전체 폭을 차지.
- <div> 요소는 width을 설정하면 margin 자동으로 조정됨.
- 따라서 브라우저가 width보다 작아지면 스크롤바가 발생함
- 이 때 max-width를 사용하면, 브라우저가 width보다 작아져도 자동으로 조정된다.
참고: https://www.w3schools.com/css/css_max-width.asp
CSS : text-indent
첫 번째 행의 들여 쓰기를 지정하는 속성
참고: https://www.w3schools.com/cssref/pr_text_text-indent.asp
5-1
타이포가 마음에 들어 ,,2
