많은 웹사이트에서 애니메이션 효과를 부여할 때 CSS의 transition/animation 속성을 사용할 수 있고 JavaScript의 setInterval()/requestAnimationFrame() 을 사용할 수 있습니다. 하지만 각각을 사용할 때의 특징이 다르고 장단점이 다릅니다. CSS 애니메이션 간단하게 처리하는 애니메이션의 경우 CSS로 처리 합니다. transform 의 translate 를 사용해서 구현할 수 있는 애니메이션을 JavaScript의 style.top 과 style.left 속성을 변화 시키게 되면 브라우저 렌더링 과정에서 layout 이나 paint 단계를 거쳐야 할 경우가 생길 수 있기 때문에 성능 개선에 효율적이지 않을 수 있습니다. CSS 애니메이션 특징 외부 라이..
웹 브라우저마다 각자의 HTML요소의 기본 스타일을 가지고 있습니다. CSS 스타일링을 적용할때 이러한 기본 스타일링들이 방해를 할 뿐더러, 브라우저마다 다른 HTML 요소에 대한 기본 값 때문에 일어나는 크로스 브라우징 을 막기 위해서 입니다. Reset CSS 완전히 CSS 를 아무것도 없는 백지처럼 초기화 합니다. 주소 : https://meyerweb.com/eric/tools/css/reset/ 장점 다른 부분에 신경을 쓰지 않아도 되는 장점이 있습니다. -> 모든 것을 reset하고 시작하기 때문에 고려해야할 변수가 적습니다. 단점 적용되는 스타일이 하나도 없기 때문에 오히려 코드의 길이가 길어질 수도 있습니다. 브라우저는 계속 해서 업데이트되고 있는 반면, 리셋 CSS의 최근 업데이트는 20..
CSS 우선순위 속성 값 뒤에 !important 를 붙인 속성 HTML 에서 style을 직접 지정한 속성(inline 방식) #id 로 지정한 속성 .class 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속 된 속성
z-index 속성은 겹치는 요소의 쌓임 순서를 제어 합니다. z-index 는 position 의 absolute, relative, fixed 일 때만 동작하며 음수를 사용할 수 있습니다. 즉, position: static 이 아닌 값을 갖는 요소에만 영향을 줍니다. z-index 규칙 position 속성이 없는 태그들은 나오는 순서대로 쌓입니다. position 속성이 있는 태그들은 없는 태그들보다 위에 나오는 순서대로 쌓입니다. position 속성에 z-index까지 있다면 z-index가 큰 태그가 위에 쌓입니다. z-index이 같은 값일 경우 HTML 구조상 아래인 것이 먼저 적용 됩니다. z-index가 아무리 크더라도 부모 태그의 z-index가 더 우선입니다. z-index 종류 ..
상대적인 반응형 유닛 기본적으로 브라우저에서 HTML에 할당 되는 폰트 사이즈는 16px 입니다. 사용하는 이유 ? 폰트 사이즈를 px 만을 사용하여 나타내면 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지됩니다. 또한, 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 전혀 반응하지 않습니다. em 타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위 입니다. em 의 경우 해당 단위가 사용되고 있는 부모요소의 font-size 속성 값이 기준 입니다. Parent Child .parent{ font-size : 8em; } .child{ font-size : 0.5em; } 가장 위에서 "기본적으로 브라우저에서 HTML에 할당 되는 폰트 사이즈는 16px 입니다." 라고 설명 했..
flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다. display : flex 정렬 하고자 하는 요소를 감싸는 부모에게 display : flex 를 선언 합니다. flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지 합니다. 선언 시, 보이지 않는 두 개의 축(Axis)이 생깁니다. .flexBox{ display: flex; } 메인축(Main Axis), 수직축 또는 교차축(Cross Axis) Main axis : flex-direction 방향에 따라 Cross axis : main과 수직을 이루는 방향 flex-direction 자식들이 배치되는 축의 방향을 결정하는 속성 .flexBox{ display: flex; f..
2차원적으로 수평과 수직을 동시에 나눌 수 있는 레이아웃 방법 입니다. display : grid , column 과 rows 1 2 3 4 4 4 4 4 .father{ display: grid; /* 자식의 부모에게 선언 */ grid-template-columns:250px 250px 250px; /* 원하는 열만큼 입력 한다 */ grid-template-rows: 100px 80px 300px; /*원하는 row의 크기를 입력 */ column-gap: 10px; /* column 간의 차이 */ row-gap: 10px; } .child{ flex-basis: 300px; background: peru; color: white; font-size: 50px; } repeat .grid{ dis..
static, relative, absolute, fixed, sticky 가 있습니다. static 기본 상태이며, 차례대로 왼쪽 → 오른쪽, 위 → 아래 위치 합니다. body{ margin: 0; } div{ width : 50px; height : 50px; margin-bottom : 20px; background : red; } section{ background : yellow; } .box{ background-color : blue; } position을 지정하지 않으면 위와 같이 위에서 아래로(div는 block요소) 나타납니다. relative 기존 static이었을 때 위치를 기준으로 top, right, bottom, left 속성을 사용해 위치 조절이 가능 합니다. 아래 그림에서..
