Today I Learn - 2024.05.07
* 텍스트 및 글꼴
- font-size: font-weight, font-style, font-variant, font-size, /line-height, font-family
- 1순위 : font-wieght, font-style, font-varient 순서 상관X
- 2순위 : font-size (필수)
- 3순위 : /line-height
- 4순위 : font-family (필수)
💬 예시
font: italic small-caps bold 12px /16px "Fira Sans", sans-serif;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: "Fira Sans", sans-serif;참고
https://www.slideshare.net/wsconf/web-font-wsconfseoul2017-vol2
김원준 - 웹폰트(Web Font) 파헤치기 [WSConf.Seoul.2017. Vol.2]
김원준 - 웹폰트(Web Font) 파헤치기 [WSConf.Seoul.2017. Vol.2] - Download as a PDF or view online for free
www.slideshare.net
https://developer.mozilla.org/en-US/docs/Web/CSS/font
font - CSS: Cascading Style Sheets | MDN
The font CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
developer.mozilla.org
* 사이즈 단위(Units)
(1) px : 절대값
(2) em : 부모의 font-size에 따라 변경되는 상대값
(3) rem : root의 font-size에 따라 변경되는 상대값
(4) vw, vh : 브라우저 크기에 따라 변경되는 상대값
* 박스모델과 box-sizing
- HTML은 기본적으로 박스모델, 위 → 아래로 선형화 되는 구조
- width = inline-size
- block > block 가능, inline > block 불가능
참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
box-sizing - CSS: Cascading Style Sheets | MDN
The box-sizing CSS property sets how the total width and height of an element is calculated.
developer.mozilla.org
* 선택자 (Selector)
- 우선순위 : id > class > tag
- 상속보다는 내가 가진 값을 우선으로 여김
* 중첩(Nesting)
💬 예시
/* 기존 방식 */
ul {
/* ul CSS code */
}
ul > li {
/* li CSS code */
}
/* CSS Nesting */
ul {
/* ul CSS code */
li {
/* li CSS code */
}
}* 상속 (Inheritance)
- 부모 요소에서 설정된 일부 CSS 속성 값은 자식 요소에 의해 상속된다.
💬 예시
<body>
<p>
Lorem ipsum dolor sit amet <span>consectetur adipisicing elit.</span>
Rerum alias provident autem, iste nam deleniti ducimus animi necessitatibus
ab iusto porro doloremque aut eum, velit debitis deserunt sint? Voluptatum, provident!
</p>
</body>body {
color: blue;
}
p {
color: red;
}
* sudo class selector
💬 예시
a:link { /* 방문 하지 않은 링크 */}
a:visited { /* 방문한 링크 */ }
a:active { /* 활성화 링크 */ }
a:hover { /* 마우스를 링크 위에 올렸을 때 */ }
a:focus { /* 키보드로 링크 영역에 이동했을 때 ex) Tab */ }
a {
color: inherit;
text-decoration: none;
/* 요즘엔 sudo class selector 보다는 이렇게 많이 사용 */
}
CSS는 정말 자신있다고 생각했지만 놓친 것이 많았다...
마크업도 어려웠지만 정말 각잡고 웹접근성을 생각한다면 CSS보다 어려운 느낌이다... 이래서 뼈대가 중요하구나 싶다.
이번에 첫 과제도 진행하였는데 간단한 아바타 상태를 만드는 내용이였지만 생각을 정말 많이하게 만드는 과제였다. 정말 많이 생각한 끝에 아 이게 맞겠지? 헀지만 마크업에서 생각할게 정말 많았다.
선생님께서 수강생 한 명씩 피드백 해주신 내용을 쉬는시간마다 구경했는데 정말 선생님의 열정에 감탄했다. 🥰🥰🥰 엄청나신분을 만난거 같다.
완벽하게 할 순 없지만 최대한 웹접근성과 웹표준에 맞는 마크업을 하고싶다.
'TIL' 카테고리의 다른 글
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS (0) | 2024.05.14 |
|---|---|
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS (0) | 2024.05.13 |
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS (0) | 2024.05.09 |
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS (0) | 2024.05.08 |
| [멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS (0) | 2024.05.04 |
