본문 바로가기

👩🏻‍💻STUDY/CSS

(24)

[CSS] counter : css로 순번나타내기 counter 사용법 counter은 CSS에서 자동으로 번호를 매기는 역할을 한다. counter-reset 카운터이름과 시작값을 설정{ counter-reset: initial | 카운터이름/숫자 | none } initial :: 초기화 카운터로 사용할 이름 숫자를 지정하지 않으면 기본값이 0 숫자는 음수값도 가능하며 여러개의 카운터를 설정하고자 할 때 공란으로 분리. none :: 설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용) counter-increment counter-reset으로 설정한 값을 증가시키는 역할{ counter-increment: initial | 카운터이름/숫자 | none } initial :: 초기화 숫자를 지정하지 않으면 기본값으로 1씩 증가 숫자는 음수값 가..

[CSS] flex 속성 (flex-basis, flex-grow, flex-shrink) 1. flex-basis : 아이템의 기본크기 기본값 auto #container { display: flex; max-width: 800px; margin: auto; border: 3px solid #000; background-color: #fff; } .item { font-size: 40px; flex-basis: auto; } #container { /* 위와 동일 */ } .item { font-size: 40px; flex-basis: 120px; } 2. flex-grow : 아이템의 너비 비율 기본값 0 flex-grow 값이 1이면 1:1 비율로 맞춰지는게 아니라 여백을 기준으로 비율이 맞춰지는 것이다. .item { flex-grow: 1; } 너비를 똑같이 나타내고 싶을 때는, ...

[CSS] flex-basis vs width 차이점 flex-basis가 항상 width에 적용되는 것은 아니다. flex-direction: row인 경우, flex-basis 는 너비를 제어한다. 그러나 flex-direction: column인 경우, flex-basis는 높이를 제어한다. 주요차이점 flex-basis는 flex item만 적용된다. flex container 는 flex-basis 를 무시하지만 width나 height는 사용할 수 있다. flex-basis는 주축에서 작동한다. 예를 들어 flex-direction: column은 플렉스 항목의 크기를 가로로 조정하려면 width 속성이 필요하다. 절대위치에 있는 flex 항목에는 영향을 주지 않는다. #container { display: flex; flex-direction:..

[CSS] 웹폰트 참고 https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0 웹폰트 최적화 하기 웹폰트란? 폰트 web safe font - 일반적으로 시스템에 설치된 폰트. 다운로드 없이 사용자에게 의도대로 표현이 할 수 있음. (Arial, Helvetica 등) web font - 설치되어 있지 않아서 브라우저에서 다운로드 velog.io https://d2.naver.com/helloworld/4969726

[CSS] CSS 선택자 우선순위 가장 기초적인 부분인데 그냥 넘어가는 경우가 많다. 선택자 우선순위 우선순위란, 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법. 점수가 높은 선언이 우선 점수가 같으면 가장 마지막에 선언한 태그가 우선 Hello world! 점수로 우선순위를 나타내보자. Hello world! !important > inline > ID > Class > 태그 > 전체 > body body라는 태그에 속성을 적용하면 상속되기 때문에 점수를 계산하지 않는다. [예제] .list li.item {} .list li:hover {} .box::before {} #submit span {} header .menu li:nth-child(2) {} h1 {} :not(.box)..

[CSS] flex 반응형에 따라 박스 떨어뜨리기 조건 flex로 1줄 6칸 만들기 768px 일 때 2줄 3칸 만들기 box box box box box box * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; max-width: 1200px; height: 200px; background: #eaeaea; margin: auto; } .box { width: 20%; border: 1px solid plum; } @media all and (max-width: 768px) { .container { /*flex-wrap: nowrap(default) */ flex-wrap: wrap; background: #777; } .box { width: 33.33%..

[CSS] viewport (vw, vh, vmin, vmax) 의미와 사용 [CSS] vw / vh를 알아보자 정리한 이유 vw, vh가 부모의 넓이에 영향을 받는 줄 알았지만, 화면의 너비에 영향을 받는다는 점에서 정리를 통해 다시 알아보고자 한다. 먼저 말하자면 vw, vh 는 부모의 넓이에 영향을 받지 않는다!!! 단위와 의미 vw / Viewport Width viewport 너비에 근거. 1vw는 viewport의 넓이 1%와 같다. vh / Viewport Height viewport 높이에 근거. 1vh는 viewport의 높이 1%와 같다. vmin / Viewport Minimum viewport의 (높이와 너비 중) 작은 쪽의 치수로 기준. viewport 높이가 더 작은 경우, 1vim = viewport 높이 1% viewport 너비가 더 작은 경우, 1..

[CSS] font-size를 통한 rem사용방법과 유의할 점 HEADING Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit possimus necessitatibus natus a ipsam, voluptate dolores, optio quibusdam doloribus architecto obcaecati, eveniet magni ex veniam dolorum blanditiis tempora exercitationem ea! Voluptatem voluptate nulla recusandae debitis tempora rem maxime provident nobis minus neque quod excepturi molestiae sapiente, fuga ducimus sint qui..

이전 1 2 3 다음

티스토리툴바