'📃 Front-End' 카테고리의 글 목록 (13 Page)

CSS 전처리기

2022.10.20

CSS 전처리기를 사용하면 개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을 보다 쉽게 관리할 수 있습니다. CSS 전처리기의 장점 재사용성 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체 시간적 비용 감소 임의 함수 및 Built-in(내장) 함수로 인해 개발 시간적 비용 절약 유지 관리 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리가 용이 CSS 전처리기의 단점 브라우저는 CSS만 동작하기 때문에 전처리기는 직접 동작시킬 수가 없습니다. 따라서 CSS로 컴파일 후 동작시켜야 합니다. CSS 전처리기 종류 Sass Less Stylus 참고 MDN, css_preprocessor https://fathory.tistory.com/30 https://kdydesig..

📃 Front-End/CSS

CSS 애니메이션과 JS 애니메이션의 차이점

2022.10.20

많은 웹사이트에서 애니메이션 효과를 부여할 때 CSS의 transition/animation 속성을 사용할 수 있고 JavaScript의 setInterval()/requestAnimationFrame() 을 사용할 수 있습니다. 하지만 각각을 사용할 때의 특징이 다르고 장단점이 다릅니다. CSS 애니메이션 간단하게 처리하는 애니메이션의 경우 CSS로 처리 합니다. transform 의 translate 를 사용해서 구현할 수 있는 애니메이션을 JavaScript의 style.top 과 style.left 속성을 변화 시키게 되면 브라우저 렌더링 과정에서 layout 이나 paint 단계를 거쳐야 할 경우가 생길 수 있기 때문에 성능 개선에 효율적이지 않을 수 있습니다. CSS 애니메이션 특징 외부 라이..

📃 Front-End/CSS

Resetting과 Normalizing CSS

2022.10.20

웹 브라우저마다 각자의 HTML요소의 기본 스타일을 가지고 있습니다. CSS 스타일링을 적용할때 이러한 기본 스타일링들이 방해를 할 뿐더러, 브라우저마다 다른 HTML 요소에 대한 기본 값 때문에 일어나는 크로스 브라우징 을 막기 위해서 입니다. Reset CSS 완전히 CSS 를 아무것도 없는 백지처럼 초기화 합니다. 주소 : https://meyerweb.com/eric/tools/css/reset/ 장점 다른 부분에 신경을 쓰지 않아도 되는 장점이 있습니다. -> 모든 것을 reset하고 시작하기 때문에 고려해야할 변수가 적습니다. 단점 적용되는 스타일이 하나도 없기 때문에 오히려 코드의 길이가 길어질 수도 있습니다. 브라우저는 계속 해서 업데이트되고 있는 반면, 리셋 CSS의 최근 업데이트는 20..

📃 Front-End/CSS

CSS 우선순위

2022.10.20

CSS 우선순위 속성 값 뒤에 !important 를 붙인 속성 HTML 에서 style을 직접 지정한 속성(inline 방식) #id 로 지정한 속성 .class 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속 된 속성

📃 Front-End/CSS

z-index

2022.10.20

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 종류 ..

📃 Front-End/CSS

em & rem

2022.10.20

상대적인 반응형 유닛 기본적으로 브라우저에서 HTML에 할당 되는 폰트 사이즈는 16px 입니다. 사용하는 이유 ? 폰트 사이즈를 px 만을 사용하여 나타내면 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지됩니다. 또한, 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 전혀 반응하지 않습니다. em 타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위 입니다. em 의 경우 해당 단위가 사용되고 있는 부모요소의 font-size 속성 값이 기준 입니다. Parent Child .parent{ font-size : 8em; } .child{ font-size : 0.5em; } 가장 위에서 "기본적으로 브라우저에서 HTML에 할당 되는 폰트 사이즈는 16px 입니다." 라고 설명 했..

📃 Front-End/CSS

Flex

2022.10.20

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..

📃 Front-End/CSS

Grid

2022.10.20

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..

티스토리툴바