왠만하면 class 로 설정하여 <style> 태그 내에서 속성을 주거나 CSS 파일로 빼서 관리하는것이 좋습니다. 왜냐하면 최대한 의존성을 얕게 유지하기 위해서 인데, html 파일을 나중에 React 및 NextJS 로 옮긴다거나 할때 style 태그의 적용방식이 달라질 수 있습니다. 이때 수정해주지 않으면 에러를 발생시킬 수 있습니다. class 를 설정하여 최대한 의존성을 제거하면 다른 환경에서 css 나 js 파일이 없더라도 에러 없이 표시 될 수 있습니다
보통 패딩값을 조정하는데 많이 사용한다.(권장이지 필수가 아니다. 디자이너의 자유) css 의 단위인 em 은 폰트사이즈를 기준으로 하며, 그렇다면 패딩도 폰트사이즈를 기준으로 설정해야 되지 않을까. 안의 글자에 대한, 여백 비율로서 생각하는것이 좀더 적합하다 생각된다.
검증도 필요하다
static(정적 : 움직이지 않는) 으로 가장 기본적으로 적용되는 옵션입니다.
스크롤바의 이동에 상관없이 화면 기준으로 고정된다.
상위 태그 기준으로 절대적인 위치에 위치하게 된다.
하지만 상위태그가 { position : static, absolute } 이면 무시하고, 더 상위의 태그를 기준으로 한다.
가장 먼저 찾은 상위태그 { position : relative } 를 기준으로 움직인다
원래 있어야 했던 자리 기준으로 위치하게 됩니다.
/* :root 에서 선언하면 전역으로 사용할 수 있다 */
:root{
--전역변수명 : rgba(100,100,100,0.3);
}
/* div 또는 특정 태그내에서 선언해줄 수 있다 */
.div{
/* 변수의 선언은 '--변수명:값' 의 형태로 선언하면 된다 */
--변수명 : 5px; /* 픽셀값 저장 */
--변수명2 : rgba(40, 40, 40, 0.3); /* 색상도 저장할 수 있다 */
--변수명3 : clac(4rem + 1px); /* 연산 결과 저장 : 4rem + 1px = 16*4px + 1px = 64px + 1px = 65px */
/* 변수의 사용은 'var(--변수명)' 으로 적어주면 된다 */
background-color : var(--변수명2); /* rgba(40,40,40,0.3) 으로 대체된다 */
background-color : var(--전역변수명); /* 전역변수도 사용할 수 있다 */
}
화면 폭이 좁아질 때 문제가 생길 수 있으니 class 로 따로 빼서 mediaQuery 를 체크하여 화면의 길이에 따라 변화하도록 설정하는것이 좋다.
.div1{
background: repeating-linear-gradient(
90deg, /* 90 도 각도*/
red, /* 빨강으로 시작 */
black /* 검정으로 끝 */
);
}
.div2{
background: repeating-linear-gradient(
90deg,
red,
black,
red
); */
}
.div3{
background: repeating-linear-gradient(
90deg,
red, /* 시작점 */
black 25px, /* 125px 부터 검정 */
black 50px /* 끝지점은 100px -> 이후 반복*/
);
}