채니의 개발일기

transition 요소의 전환(시작과 끝)효과를 지정하는 단축속성 tranisition: 속성명 지속시간 타이밍함수 대기시간; (transition-property, transition-duration, transitio-function, transitio-delay) transition-property: 전환효과를 사용할 속성 이름 지정 기본값 all : 모든 속성에 적용 속성이름 : 전환효과를 사용할 속성 이름 명시 transition-duration: 전환효과의 지속시간을 지정 기본값 0s: 전환효과없음 시간: 지속시간(s)을 지정 transition -timing-funtion linear:일정하게 ease: 느리게-빠르게-느리게 ease - in: 느리게-빠르게 ease-out : 빠르게-느리..

::before 선택자 ABC 요소의 내부앞에 내용 삽입 ::after 선택자 ABC 요소의 내부뒤에 내용 삽입 .custom-icon::before 가상요소선택자를 부여함으로써 content에 기호추가 .custom-quote::after 가상요소선택자를 부여함으로써 content에 "기호추가

flex display: flex;는 CSS의 속성 중 하나로, 요소들을 가로 또는 세로 방향으로 정렬하고 공간 배분을 조정하기 위한 도구 1.Flex Container: Flex Container는 Flexbox 레이아웃을 적용하기 위한 부모 요소입니다. lex Container에 display: flex; 또는 display: inline-flex;를 설정하여 Flexbox 레이아웃을 활성화시킨다. Flex Container에 적용되는 주요 속성: display: flex 또는 inline-flex 값을 사용하여 Flex Container를 정의 flex-direction: Flex Items의 배치 방향을 결정 (row, column, row-reverse, column-reverse 등). jus..

위 선택자 처럼 a태그의 밑줄을 없애주기위해서는 text-decoration: none 코드를 작성할것 a{ text-decoration: none; } 이후 hover를 추가하여 링크선택자임을 알려줄것 마우스로 선택시 색상이 바뀌게 된다 a:hover{ color:#000; }

: .box1에 top,bottom에 0을 주고 position:absolute;값을 주면 위치상 부모 요소를 파악하지 못하기때문에 container위에 box1이 위치함을 알 수 있음 : .container에 position:relative;추가 .box1 { width: 100px; height: 100px; background-color: red; position:absolute; top: 0; bottom: 0; margin: auto 0; } hegith값, top:0, bottom:0, margin: auto(top,botoom) 0;으로 지정하면 수직가운데 위치 할 수 있다 번외편: 수평가운데 위치 left:0, right:0;, marging: auto, width 지정하면 수평가운데로 위..

postion CSS의 position 속성은 HTML 요소의 위치를 지정하는 데 사용되는 속성이다. 이 속성을 사용하여 요소를 상대적으로 배치하거나 절대적으로 배치하고, 필요에 따라 다른 요소들과 겹치도록 조정할 수 있다. position 속성값 static: 기본값으로, 요소들은 문서의 일반적인 흐름에 따라 배치. top, right, bottom, left, z-index 속성을 적용x relative: 요소자기자신을 기준 -> 위치상 부모를 relative 속성으로 설정가능 absolute: 위치상 부모요소를 기준으로 배치된다-> 구조상 부모요소 이기때문에 위치상 부모가 누구인지 파악할것 fixed: 요소가 뷰포트(브라우저 창)에 상대적으로 고정되어 스크롤해도 화면에서 사라지지 않는다. stick..