전체 글

[CSS] Flex - Container 속성

before : flat, table tag, display: inline-block 수평 정렬 => 대체방법에 가까움. 완벽하지 x inline-block 사용 예제 item 자체가 inline 화 되었기 때문에 에서 사이의 엔터키 친게 띄워쓰기로 인식되어서, 이렇게 item 들 사이에 간격이 생긴다 부모요소에서 font-size를 0으로 설정해 간격을 없애고, item에서 원하는 font-size를 재설정해야하는 번거로움이 있다. float 사용예제 ( 수평정렬에 특화된 속성은 아니라 일종의 대체제 였다) .clearfix::after{ content: ""; display: block; clear: both; } .container{ border: 2px solid red; } .container ..

[CSS] 애니메이션 & 다단

animation(애니메이션) : 요소에 애니메이션을 설정/제어 애니메이션을 직접 만들어주는 속성이 아니라 @keyframes 규칙에 설정된 애니메이션의 정의를 설정/제어. 단축속성. *단축속성 작성 시 duration delay 순으로 입력해야함 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니메이션의 지속시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 *음수사용가능 0s animation-iteration-count 애니메이션의 반복 획수 설정 1 animation-direction 애니메이션의 반복 방향 설정 normal ..

[CSS] 전환&변환

transition(전환) : CSS 속성의 전환 효과를 지정 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션. 단축속성. 바뀌기 전 상태에 지정 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s transition-timing-function 타이밍 함수 지정 ease transition-delay 전환 효과가 몇 초 뒤에 시작할 지 대기시간 설정 0s *타이밍 함수: 전환효과의 여러가지 애니메이션? *1s=1000ms *단축속성 작성 시 duration delay 순으로 입력해야함 일반적으로 property와 duration 개별속성을 합친 transition 단축속성을 많이 사용한다 t..

로렘입숨(lorem ipsum)

웹 페이지 공부나 테스트를 하기 위해 긴 텍스트 더미가 필요할 때가 있다. 그때마다 쓸만한 문단을 검색 해 긁어오거나, 직접 입력하는 것 보다 훨씬 효율적인 방법으로 로렘입숨이라는 가상 텍스트 더미를 제공하는 사이트가 있다. 텍스트는 가상으로 조합된 터라 제대로 해석되지 않는 문장들로 이루어져있다. 영문 로렘입숨 사이트 https://www.lipsum.com/ Lorem Ipsum - All the facts - Lipsum generator What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy ..

[CSS] 배경(background)

background : 요소의 배경을 설정. 단축속성 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll 사용법 background: 색상 이미지경로 반복 위치 스크롤특성; 특정 값을 누락해도 된다. background-color : 요소의 배경 색상 지정. 개별속성 속성 값 의미 기본값 색상 요소의 배경 색상 transparent 투명 transparent background-image : 요소의 배경에..