'📃 Front-End/CSS' 카테고리의 글 목록

Sass(SCSS)

2022.10.20

CSS 전처리기로서 CSS의 한계나 단점을 보완하기 위해 만들어졌습니다. SASS 에 SCSS가 포함되어 있는데, SCSS는 SASS 3번째 버전에서 추가되었고, SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌습니다. 주요 기능 변수 설정 $표시를 사용하여 변수명을 지정할 수 있습니다. $hongsi-1: 1; $HONGSI_2 : 2; $hongsi: 'hongsi'; 반복적으로 사용되는 폰트나 색상 등을 변수로 지정해 간단하게 제어할 수 있습니다. 규칙 문자를 넣을 때 '' 사용 유의사항 : 알파벳, -, _, 123 사용 가능 대소문자 구분 숫자로 변수명 시작 X Nesting(중첩) SASS에서는 Nesting 기능을 사용해 상위 선택자의 반복을 피할 수 있습니다. 또한..

📃 Front-End/CSS

background-img 경로

2022.10.20

프로젝트 진행 중 경로 문제 발견 배경에 이미지를 넣어야 하는데 뜨지 않아서 오타인가, 아니면 크기 지정인가 문제를 찾다가 경로 문제라는 사실을 알게 되었습니다. 경로 설정 방법 절대경로 지정되어 있어 변경 할 수 없는 경로 페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결 할 때 사용 합니다. 바로가기 상대경로 상대적으로 변경 될 수 있는 경로 1. 현재 파일을 기준으로 동일 위치로 연결되는 경우 index.html 파일이 저장된 위치를 기준으로 background.png 파일은 동일한 위치에 있기 때문에 파일명과 확장자를 함께 쓰면 됩니다. 2. 현재 파일을 기준으로 하위 폴더로 연결되는 경우 index.html 파일이 저장된 위치를 기준으로 logo.png 파일을 찾아갈 수 있도록 경..

📃 Front-End/CSS

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 입니다." 라고 설명 했..

티스토리툴바