em은 부모 요소의 폰트 크기를 상속받아 계산된다. 따라서 중첩된 요소의 폰트 크기에 영향을 받는다.
rem은 최상위 요소( <html> 또는 <body> )의 폰트 크기를 기준으로 계산되기 때문에 상속에 영향을 받지 않는다.
html {
/* font-size의 기본값은 16px */
font-size: 16px;
}
h1 {
/* 상속관계에 의해 32px로 나옴 컴퓨티드에서 font-size 확인가능 */
font-size: 2em;
}html {
font-size: 10px;
}
body {
/* 20px */
font-size: 2em;
}
h1 {
/* 40px */
font-size: 2em;
}
🤔 글씨 겹침 현상은 왜 생기는 걸까?
✅간혹 글자크기보다line-height값을 작게 줘서 문제 발생한다.
line-height단위를rem으로 했을때 현재 태그의 폰트 사이즈가 상속 받은 폰트 사이즈보다 클 경우 글자가 겹침
∴line-height에서는em, rem단위 잘 안쓴다.p { font-size: 20px; /*20*1.5=30px 단위를 생략하면 문제해결 가능 */ line-height: 1.5; }
Web Cafe를 만들면서 css실습
웹에서
세로모드 : portrait
가로모드 : landscape
CSS Normalize와 CSS Reset
User Agent Stylesheet라고 불리는 브라우저 내장 스타일이 브라우저마다 조금씩 달라 통일시키기 위해 사용하는 CSS다.
CSS Normalize 가능한한 브라우저의 내장 스타일을 최대한 건들지 않는 선에서 브라우저 간에 상이한 부분만 스타일을 통일 CSS Reset 극단적으로 브라우저의 내장 스타일을 초기화
display
display:none- hidden 속성이랑 같음! 돔트리 안에 객체가 생성되지 않는다.
display: block이 적용된 요소는 블록 레벨 요소로 간주
해당 요소가 새로운 줄에서 시작 / 위와 아래에 줄 바꿈이 발생
가로 폭: 부모 요소의 가로 폭을 가득 차지합니다.
따로 가로 크기를 지정하지 않으면 부모 요소의 가로 폭에 맞게 늘어나거나 줄어들게 됩니다.
수직 배치: 수직으로 쌓이는 특성을 가지므로, 위에서 아래로 요소들이 배치됩니다.
너비, 높이 조정: width와 height 속성을 사용하여 너비와 높이를 조정할 수 있습니다.
display: inline- 옆으로 쌓이다가 자리가 없으면 줄바꿈 됨
width와 height 속성을 사용하여 너비와 높이를 조정할 수 없음
margin과 padding은 양옆으로 공간 설정이 가능하지만, 위 아래로는 불가능함
padding은 적용된 것처럼 보이지만 padding으로 인한 공간이 벌어지지 않는다는 의미
position디폴트 값은static
position:" absolute는 떠있는 상태가 된다.
본문에서 공간을 차지하지 않는다. / 인라인처럼 보이지만 블록상태!
어떤 속성이든 포지션: 앱솔루트면 블록상태가 된다
-->BFC와 관련있음
접근 가능한 숨김처리
/* Accessibility Styles */
.a11yHidden,
legend {
overflow: hidden;
position: absolute !important;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
margin: -1px;
}변수 사용
/* CSS Variable */
:root {
--yellow: yellow;
--pink: pink;
--orange: orange;
--aqua: aqua;
--primary-color: var(--yellow);
--secondary-color: var(--pink);
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
}
header {
background-color: var(--primary-color);
font-size: var(--text-xl);
}
nav {
background-color: var(--secondary-color);
}
main{
background-color: var(--primary-color);
}
footer{
background-color: var(--secondary-color);
}/*love hate link visited hover focus 순을 지켜야함*/
a:link {
color: green;
}
a:visited {
color: red;
}
a:hover, a:focus {
color: yellow;
}box-sizing
box-sizing은 요소 박스의 크기를 결정하는 방식을 지정하는 속성
content-box는 요소 박스에 지정된 모든 값을 더해 박스의 크기를 결정하는 방식
즉, 콘텐츠 너비인 200px과 안쪽 여백 크기인 40px, 그리고 테두리 굵기인 10px 값을 모두 더한 값인 250px이 실제 박스의 크기가 됩니다.
그러나 border-box를 지정하면 콘텐츠에 지정된 너비인 200px에 안쪽 여백인 40px과 테두리 굵기인 10px이 포함됩니다. 그렇게 되면 실제 박스의 크기는 250px이 아니라 200px이 됩니다.
box-sizing: content-box;
box-sizing: border-box;
Git에게 알려주면서 파일 삭제
바로 수식을 계산 할 수 있음
CDN서비스의 단점 그쪽 서버의 문제가 생기면 우리서버도 문제 생김
네트워크를 사용해서 어디서 문제가 발생했는지 디버그! 하기
CSS Minified 배포할때 사용
mulder21c 블로그 보기
