CSS(8)
CSS는 마크업 언어로 작성된 문서의 표시 방법을 기술하기 위한 StyleSheet 언어입니다.
CSS
Post Thumbnail Image
CSS
[CSS] px 대신 rem을 사용하자 (feat. em)
css 단위 중 가장 많이 사용되는 것은 px(픽셀)일 것이다. 폰트 크기 단위로는 px보다는 rem을 사용하라는 의견이 많아, rem을 사용할 때의 이점을 바탕으로 가장 인기 있는 단위 3가지 px, rem, em을 비교해 보려 한다. px px은 고정된 절댓값으로 1px은 화면의 점 하나에 해당한다.
2023.05.24
Post Thumbnail Image
CSS
[CSS] background VS background-image
background 속성과 background-image 속성의 차이
2022.10.12
Post Thumbnail Image
CSS
[CSS] 스크롤바(scrollbar) 커스텀 및 기능 유지하면서 숨기기
스크롤바를 원하는 대로 커스텀하고 기능은 유지하되, 화면에서 보이지 않게 만들어보자. scrollbar 커스텀 스크롤바는 크게 전체, 스크롤 막대, 배경으로 나눌 수 있다. 아래 속성으로 원하는 색이나 모양으로 커스터마이징할 수 있다. - ::-webkit-scrollbar: 스크롤바 전체 - ::-webkit-scrollbar-thumb: 스크롤 막대 - ::-webkit-scrollbar-track: 스크롤바 배경
2022.10.04
Post Thumbnail Image
CSS
[CSS] Flex(Flexible Box) 개념 파헤치기
Flex(Flexible Box) flex는 컨테이너에 들어있는 아이템을 정렬해 공간을 효율적으로 채우는 방법이다. display 속성에 flex나 inline-flex를 갖는 HTML 요소를 flex container라고 하며, flex container 안에 있는 자식 요소들을 flex items라고 부른다. flex container는 flex-flow, flex-direction을 기준으로 배치된다. 주축(main axis)과 교차 축(cross axis)
2022.09.28
Post Thumbnail Image
CSS
[CSS] Box Model(박스 모델)과 box-sizing 속성
브라우저의 렌더링 엔진은 HTML 요소를 나타낼 때 CSS Box Model에 맞춰 그려낸다. 박스 모델은 4가지 영역인 margin, border, padding, content로 구분된다. content 내용을 표시하는 영역으로, `width`과 `height`로 크기를 조정할 수 있다. padding content 주위의 공백을 뜻하며, `padding` 속성으로 지정할 수 있다.
2022.09.27
Post Thumbnail Image
CSS
[CSS] Elements를 숨기는 속성 display와 visibility
요소를 숨기고 싶을 때 display 속성과 visibility 속성의 차이
2022.09.23
Post Thumbnail Image
CSS
[CSS] FontAwesome으로 <i> 태그에 아이콘 삽입하기
FontAwesome을 이용하면 아이콘을 i 태그에 간단하게 삽입할 수 있다.
2022.09.19
Post Thumbnail Image
CSS
[CSS] 자식 컴포넌트 height 속성 inherit VS 100%
자식 컴포넌트의 height 속성은 inherit VS 100%? `height: inherit`은 부모로부터 값을 상속 받는다. 예를 들어 부모 height 값이 50%이면, 자식도 50%이라는 값을 상속 받게 되어 전체에 대한 50%가 아닌 부모로부터의 50%이라는 값을 가지게 된다. 부모와 동일한 height를 가지지 않는다.
2022.09.15
nxnaxx blog © 2022-2023 Powered By Gatsby.