개발나라 스용공주

구조 : item이 3개 있고 그 위에 덮어질 텍스트 caption 또한 3개 존재 => 이들을 감싸는 items 존재display : 가로 배치를 위해 display : inline-block;중앙정렬하는 법 : item들이 inline-block이므로 items에 text-align : center;텍스트와 이미지 겹치기 : 이미지 위에 텍스트를 겹치는 것이므로 기준점을 이미지로 삼기 위해 position 부여를 이미지는 relative, 텍스트는 absolute 후 top과 left를 0으로 적용hover 요소 : hover 시 서서히 등장하기 위해 transition을 0.5s주고 transition을 적용하기 위해 display : none이 아닌 opacity로 보이지 않게 만들어줌 (opac..

[ 실습 완성 결과 ] [ 제작과정 1 ]=> 버튼 border 생성 , 이미지 배열, 이미지를 담고 있는 자식요소, 부모요소=메인(여기에서 로테이션 되며 보여짐)이때 위의 사진과 같이 이미지를 배열할 때 생기는 margin은 font-size : 0를 통해 없애줄 수 있다.   [ 제작과정 2 ]=> 버튼 완성하기 : radio버튼과 버튼 border 연결하기, 버튼에 따른 이미지 position값 변화   [ 제작과정 3 ]=> overflow : 부모 요소(빨간 박스)에 overflow 속성의 hidden 속성값을 통해 빨간색 영역에서 오버되는 파란색 박스 영역을 감춰줌  [ 제작과정 4 ] => transition 적용 : 움직이는 대상인 이미지에 transition을 주어 스무스하게 만듬  [ ..

[ 1차 개발 - 기능 작동 구현 ]* 라디오 버튼 사용, 인접선택자를 사용할 수 있는 구조를 통해 버튼작동과 이미지 변경 구현=> 버튼 구조 : 라디오 버튼을 label과 연결 후 라디오 버튼 체크 여부에 따라 색상 변경 (최초의 버튼에 선체크)=> 이미지 변경 구현 : 라디오 버튼과 이미지를 연결한 후 해당 라디오 버튼의 체크 유무에 따라 체크된 버튼과 연동된 이미지의 display 값 변경 [ html ]  [ css ]body { display: flex; justify-content: center; align-i..

[ 최종 완성 - 실행 영상 ]    [ 1차 개발 - 기능 구현 ]디자인 ⇨ input 'text'를 통해 추가할 리스트를 작성하는 칸을 만듬 ⇨ input 'checkbox' 등을 통해 리스트 중 완료된 항목에 대해 체크하는 기능을 만듬 ⇨ @font-face를 통해 폰트를 변경해줌 To Do To-Do List Add Do 30 minutes of running Read a book ..

[ 최종 완성 - 실행 영상 ]   [ 1차 개발 - 기능 구현 ]버튼 생성 ⇨ 버튼 한개에 light모드와 dark모드가 모두 가능하도록 만듬 (id값을 부여해 해당 value를 찾고 value의 값에 따라 현재 실행된 모드가 light인지 dark인지 판별 후 해당 모드에 맞는 코드 실행) ⇨ 코드 맨 뒤에 value를 변경해주는 코드를 통해 light모드와 dark모드가 반복하여 실행되도록 만듬* 다크모드 (Dark Mode) : 배경색 검정색 / 본문 글자색 흰색 / 링크 연보라색* 라이트모드 (Light Mode) : 배경색 흰색 / 본문 글자색 검정색 / 링크 보라색* 다크모드와 라이트모드의 기능은 함수화하여 만들어짐. [ 메인 1 ] Youtuber ..