FE/CSS

transition transition : property duration timing-function delay;요소의 특정 CSS 속성이 변경될 때 해당 변경이 애니메이션 효과를 통해 부드럽게 진행되도록 설정하는데 사용property : 애니메이션 효과를 적용할 CSS 속성all : 모든 변경 가능한 CSS 속성에 대해 전환 효과 적용duration : 지속 시간timing-function : 애니메이션의 시간 곡선easelinearease-in ease-outdelay : 지연 시간

시맨틱 마크업 의미를 잘 전달하도록 HTML 태그로 문서를 작성하는 것 검색엔진 최적화에 유리 웹 접근성 측면에서 사용자로 하여금 의미 파악 용이 단순 div 태그들로 가득한 코드보다 가독성 좋음 유지보수 편리 💡 css 스타일을 명시하는 태그를 사용하지 않는 것도 시맨틱 마크업의 한 종류 ,,, 등 종류 : 헤더, 푸터에 사용 : 메인 콘텐츠에 사용 : 독립적인 컨텐츠에 사용 : 최상위 제목으로 사용 : 순서가 없는 목록으로 사용 : 내비게이션으로 사용 : 정보를 전달하기 위한 서식 요소들

None 화면에 나타나지 않음. 요소를 렌더링 하지 않도록 설정해 영역도 차지하지 않음 Block width, height 값을 지정할 수 있음 가로 영역을 모두 차지하여 항상 줄 바꿈 된 새로운 라인에서 시작 💡 ,,, 등 Inline block과는 달리 줄 바꿈이 되지 않고 width, heigt 을 지정할 수 없음. margin과 padding 속성도 좌우 간격만 반영이 되고 상하 간격은 반영되지 않음 💡 ,,,, 등 Inline-block 요소 자체는 inline처럼 줄바꿈이 되지 않지만 요소 내부에서는 블록 요소처럼 동작한다. width, heignt, 여백 값을 지정 가능함 💡 , , 등 Flex 아이템들을 가로 혹은 세로 방향으로 배치할 수 있는 방식으로 요소의 크기가 불분명하거나 동적인 경..

Flexbox 구성 Flex Container : display를 flex로 설정하면 자동으로 부모 요소가됨 Flex Items : 자식 요소들 Flex Container 속성 Flex-direction : row, column, row-reverse, column-reverse Flex-wrap : 줄바꿈 속성 nowrap, wrap, wrap-reverse Flex-flow : direction과 wrap 속성 동시에 사용할 수 있는 속성 Justify-content : 메인 축 기준 아이템 배치, 간격 속성 flex-start, flex-end, center, space-between, space-around, space-evenly Allign-items : 교차 축 (한 줄)기준 아이템 배치, ..

SCSS (Syntactically Awesome StyleSheet) CSS를 편리하게 사용할 수 있도록 하는 전처리기로 CSS의 기능 부재 단점을 보완하여 다양한 기능이 추가되었다. CSS를 구조화하여 표현해주고 가독성과 재사용성을 높여 유지보수가 쉬워지게 도와준다. 특징 변수 할당 $font - stack : sans - serif; body { font : 100% $font-stack; ... } $를 사용하여 자주 사용하는 폰트나 색상 등을 변수로 지정하여 재사용 가능 전역 변수 .box1 { $color : #FFFFFF !global; backgound : $color; } .box2 { background : $color; } !global 을 사용하면 변수의 유효범위를 전역으로 설정 가..