transition 속성과 사용법 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용 전환이 일어날 요소들을 작성해주는 것! 📝 transition 속성 transition-property : 효과를 적용하고자 하는 css 프로퍼티를 지정. 즉, 과정을 보고 싶은 속성을 지정 기본값 : all 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다. transition-property: width height; 전환 수치를 다르게 하려면? transition: width 1s, height 2s transition-duration : 효과가 나타나는데 걸리는 시간 기본값 : 0s transition-timing-function : 트랜지션 효과의 속도 기본값 : ease, 느리게 시작하여..

[ display 속성 이해 ] `display` 속성은 요소를 화면에 어떻게 표시할지 결정하는 데 사용 요소의 레이아웃 박스 유형을 결정하는 중요 속성 요소로는 `block`, `inline`, `inline-block`, `flex`, `grid`, `none` 값이 있다   1. display: none;화면에 보이지 않도록 해주는 기능visibility: hidden과 다르게 요소가 차지하는 공간조차 없애버리는 특징을 가짐 2. display: flex;유연한 박스 모델로, flex 컨테이너 내의 아이템들의 가로, 세로 축을 기준으로 유연하게 배치할 수 있다.                                                                              ..

환경 : Visual Studio Code [ 전체 코드 ] 다단 배치 디자인 inline-block 배치 1단 2단 floating 배치 1단 1단 1단 1단 1단 2단 다음 컨텐츠 다음 컨텐츠 내용 floating 배치 1단 1단 1단 1단 1단 2단 다음 컨텐츠 다음 컨텐츠 내용 개인 공부 기록용입니다:)

환경 : Visual Studio Code [ 해당 실습에서 사용한 메뉴바 body 코드 ] 데이터 관리 포켓몬스터 사원정보 메뉴정보 학생성적 자유게시판 관리자메뉴 회원관리 충전상품관리 통계 포켓몬통계 사원통계 메뉴통계 회원통계 로그인 회원가입 ??? 님 마이페이지 포인트충전 로그아웃 (+) Menu : 계층형 구조(tree 구조)이다. 계층형 구조를 표현하기에 가장 적합한 태그는 태그 이다. └ 은 순서가 없는 리스트 태그이다 (unorder list) └ 은 순서가 있는 리스트 태그이다 (order list) [ 스타일을 추가하여 메뉴바 형태를 구현 해보자 ] - 스타일이 아무것도 없는 초기 화면 형태 - , 태그를 부여한대로 출력된다. - 단, 우리가 원하지도 않은(지정하지도 않은) 마진과 패딩이 ..

환경 : Visual Studio Code [ checkbox 디자인 ] checkbox 체크 상태는 :checked로 확인 및 적용 .c1 + span은 c1 클래스 뒤에 있는 span 한 개를 의미 .c1:checked + span은 c1 클래스가 체크되었을 때 뒤에 있는 span 한 개를 의미 .c1 ~ span은 c1 클래스 뒤에 있는 span 전체를 의미 .c1:checked ~ span은 c1 클래스가 체크되었을 때 뒤에 있는 span 전체를 의미 단, 앞에 있는 건 선택이 안 된다. [ 코드 중 알아두면 좋은 코드 설명 ] [ 체크박스와 라벨 연결 ] 앞에 있는 라벨 하나 둘 셋 뒤에 있는 라벨 (+) input 태그에 아이디를 주고 그 아이디를 for 속성으로 label 태그에서 받는다면 ..

환경: Visual Studio Code 긴 글 텍스트 URL : https://www.lipsum.com/ [ 텍스트 디자인 ] word-break 설정을 통해 줄바꿈 기준을 정한다 줄바꿈을 윈치 않는 경우도 설정 가능하도록 구현한다 폰트 디자인 Lorem Ipsum 줄바꿈 기준 변경 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specim..