haehaee 님의 블로그

CSS transform 속성 - 레이아웃 흐름을 방해하지 않고 요소의 형태와 위치를 시각적으로 변형하는 기법CSS transition 속성 - CSS 속성값 변화를 일정한 시간에 걸쳐 부드럽게 전환하는 애니메이션 가교 역할CSS Animation 속성 - 키프레임을 활용하여 다단계의 복잡하고 반복적인 움직임을 구현하는 설계 방식CSS translate 중앙 정렬 기법 - 요소의 크기에 구애받지 않고 화면 정중앙에 배치하는 실무 레이아웃 공식 CSS 이징(Easing)의 개념 - 속도의 변화를 제어하여 애니메이션에 리듬감과 자연스러움을 부여하는 기술 CSS transform 정적인 요소를 움직이고 회전시키는 transform 속성은 웹 디자인에 생동감을 불어넣어준다. transform의 정의 요소가 페이..

웹 요소를 이동시키는 translate() 함수트렌스레이트 transition: 1s; 부드럽게 움직이게 한다(0.6초 정도 추천) #movex:hover { transform: translateX(50px); 마우스를 올리면 x좌표로 50px이동 요소를 확대 축소하는 scale() 함수스케일 요소를 회전시키는 rotate() 함수 트랜지션의 속성을 한꺼번에 표기하는 transition원본 요소를 디자인원본에 수도 클래스(호버 클래스) 생성호버 클래스 내부에 변해야될 상태 디자인원본에 트렌지션 부여 (호버 클래스에 부여도..

Pseudo-classes - 사용자의 동작이나 요소의 구조 및 상태에 따라 스타일을 부여하는 가상 클래스 선택자Pseudo-elements - HTML 문서에 존재하지 않는 가상의 요소를 생성하거나 특정 부분만 스타일링하는 기법CSS Functions - 수학적 계산이나 변형 및 색상 등 스타일 값을 동적으로 계산하고 변환하는 함수 Pseudo-classes사용자의 동작이나 요소의 특정 상태에 따라 스타일을 부여하는 CSS 가상 클래스가상 클래스는 HTML문서 구조상에는 존재하지 않지만, 마우스를 올렸을 때, 방문한 적이 있을 때, 첫 번째 자식일 때 와 같은 특별한 상태를 선택할 수 있게 해주는 도구 사용자의 동작에 반응하는 가상 클래스 (User Action)사용자의 상호작용에 따라 실시간으로 스..

p::first-letter 첫번째 글자의 스타일을 변경::???? 로 여러가지 가능함! CSS 가상 요소 가상 요소를 사용하면 CSS로 시각적 변화를 줄 수 있습니다. 이는 성능을 저하시키지 않으면서 웹 페이지를 꾸밀 수 있는 효율적인 방법입니다. h1::before - h1 태그 이전에 요소를 넣는다h1::after - h1 태그 이후에 요소를 넣는다 CSS 가상 요소 가상 요소를 사용하면 CSS로 시각적 변화를 줄 수 있습니다. CSS함수 CSS 함수 CSS 함수 - min() font-size: clamp(1rem, 2vw, 2rem); 최소1rem, 2%뷰포트 높이 , 최대2rem최소 (사이에서 탄력적으로 조절됨) 최..

고급 선택자에선 부모 자식 확인이 먼저p태그에 파란색을 적용하고 싶다 예약 방법 & 사용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx)로 문의 바랍니다. 가족실(2~4인) : 60,000원/일 도미토리(4인 공용) : 25,000원/일 섹션의 직계자식한테만 파란색을 적용하고 싶다@@ > @@ 이 부모의 자식만 적용 가능함@@ > @@ > @@ 손주만 적용도 가능함 예약 방법 & 사용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx)로 문의 바랍니다. 가족실(2~4인) : 60,000원/일 도미토리(4인 공용) : 25,000원/일..

CSS 가상 클래스 선택자 요약 - 요소의 특정 상태(링크, 포커스 등)를 제어하는 선택자 리마인드Combination Selector (연결 선택자) - 자손, 자식, 형제 등 요소 간의 계층 구조를 활용해 스타일을 적용하는 방법Attribute Selectors (속성 선택자) - HTML 요소의 특정 속성 유무나 속성값의 문자열 패턴을 매칭하여 스타일을 적용하는 방법 가상 클래스 선택자 요약 (리마인드)링크 상태 제어:link - 방문 전 링크:visited - 방문 후 링크:hover - 마우스 오버:active - 클릭 중활성화 및 폼 상태 제어:focus - 포커스 상태:target - 현재 활성화된 앵커:enabled - 활성화된 상태:disabled - 비활성화된 상태:checked - 체..

Flexbox의 기본 개념 - 1차원 레이아웃 모델의 특징과 주축/교차 축 등 핵심 용어 이해Flex Container 속성 - 부모 요소에 적용하여 자식 아이템의 방향, 줄 바꿈, 정렬을 제어하는 방법Flex Items 속성 - 자식 요소의 팽창, 수축, 기본 크기 및 개별 정렬과 순서를 제어하는 방법Flex Responsive 속성 - 플렉스박스를 활용하여 화면 크기에 유동적으로 대응하는 반응형 레이아웃 구축 Flexbox현대 웹 디자인에서 가장 널리 쓰이는 레이아웃 시스템 플렉스 박스의 기본 개념 정리1. 플렉스박스의 정의플렉스박스(Flexbox)는 'Flexible Box'의 줄임말로, 행(Row) 또는 열(Column)을 주축으로 하여 요소를 배치하는 1차원 레이아웃 모델이다.복잡한 계산 없이 ..

반응형 웹 디자인(RWD) - 기기 화면 크기에 유연하게 반응하는 웹 설계 방식과 적응형 웹과의 차이뷰포트(Viewport) - 모바일 환경에서 웹사이트가 올바르게 렌더링되기 위한 필수 메타 태그 설정상대 단위 em과 rem - 부모 또는 루트 요소를 기준으로 크기를 조절하여 반응성을 높이는 CSS 단위반응형 이미지(RWD Image) - 해상도와 화면 비율에 맞춰 최적화된 이미지를 제공하는 기법미디어 쿼리(Media Query)와 디버깅 - 화면 중단점을 설정하여 레이아웃을 분기하고 크롬 개발자 도구로 확인하는 방법 반응형 웹 디자인(RWD)의 이해 반응형 웹(RWD)의 정의와 3가지 핵심 요소반응형 웹 디자인(Responsive Web Design)이란 하나의 웹사이트가 접속하는 기기(PC, 태블..

.box:nth-child(odd) { - 홀수.box:nth-child(even) { - 짝수 flex-direction: row; - 디폴트 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 justify-content:..

p의 부모 body에 아무 조건이 없음 -> 기본값임 16px적용됨content가 24px로 지정되어있어서 아래 p는 24px이 적용됨 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다. 상속과 em/rem중엔 후자가 더 우선 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다. 실무에선 img태그 자체에 적용하기도 함 브라우저 창의 크기를 조절해보세요. 기본값을..