티스토리

export { /*공부한 것들*/ };
검색하기

블로그 홈

export { /*공부한 것들*/ };

dog-foot.tistory.com/m

개발에 필요한 지식들을 최대한 정제하며 메모하고 필요할 때 와서 임포트 합니다

구독자
0
방명록 방문하기
공지 개발 학습, 프로젝트 기록하려고 만든⋯ 모두보기

주요 글 목록

  • Grid Grid" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스요소를 2차원 배치 시킬 수 있는 CSS 모듈 Grid의 여러 속성" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스grid-template그리드의 열과 행을 정의하는 속성.container { display: grid; grid-template-rows: 100px 200px 200px; grid-template-columns: 100px 300px 100px; width: 500px; height: 500px; margin: 200px auto; border: 5px dashed gray;}1. grid 요소의 가로, 세로 크기를 gird-template-colums, grid-te.. 공감수 0 댓글수 0 2024. 4. 14.
  • box-shadow HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; box-shadow: 0 25px 25px rgba(0, 0, 0, 0.5); } box-shadow : x축 오프셋, y축 오프셋, 흐림 반경, 그림자 색상 애니메이션 적용하기 HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .box:hover { transform: translate.. 공감수 0 댓글수 0 2024. 4. 8.
  • 애니메이션 효과 HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: transform 0.5s ease; } 1. transform : 변화가 일어날 속성 2. 0.5s : 변화가 일어나는 시간 3. ease : 변화가 일어나는 속도 (ease, linear, ease-in, ease-out, ease-in-out) .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .bo.. 공감수 0 댓글수 0 2024. 4. 7.
  • width width" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. width의 기본 값은 100%가 아닌 auto이다2. auto는 부모 요소의 너비를 넘을 수 없고, 100%는 부모 요소의 width 값과 똑같이 가진다.3. width값을 직접 설정하면, width값은 content영역의 크기가 된다. 4. box-sizing 속성의 border-box를 사용하면, 요소의 크기는 content box가 아니라 border를 기준으로 잡아준다. https://cdpn.io/pen/debug/adLPwv 공감수 0 댓글수 0 2024. 2. 12.
  • Flex Flex" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스요소들을 유연하게 배치시켜주는 레이아웃 속성 flex-direction" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스컨테이너의 주축을 설정하는 속성 .container { display: flex; border: 1px solid black;}.item { width: 100px; height: 100px;}1. flex의 기본 flex-direction 값은 가로 row 이다..container { display: flex; flex-d.. 공감수 0 댓글수 0 2024. 2. 11.
  • Cascading, position HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. user agent stylesheet(브라우저 기본 스타일) 은 CSS 스크립트보다 우선 순위가 낮음. 2. HTML style attribue는 우선 순위가 가장 높음. 3. 동일한 요소에 대한 여러 CSS규칙이 있을때, 가장 나중에 정의된 스타일이 우선 순위가 높음. 4. 명시도 점수 순에 따름.(https://specificity.keegan.st/) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. static 1.기본 포지션 값, 요소의 원래 위치에 배치. 2. relative 1. 요소의 원래 위치를 기준으로 이동가능. 2. 요소의 원래 자리는 그대로 차지하고 있으며, 다른 .. 공감수 0 댓글수 0 2023. 10. 22.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.