CSS

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

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

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 을 사용하면 변수의 유효범위를 전역으로 설정 가..