개발자연습노트

opacity 속성 .box { opacity : 0}현재 HTML 요소의 투명도를 조절할 수 있습니다.0부터 1까지의 실수를 입력할 수 있습니다.0.5 이러면 반투명해짐       transition 속성 설명하다 .box { opacity : 0; transition : all 1s;}transition을 부여하면여기에 적용된 CSS가 변할 때 서서히 변경해줍니다. all은 모든 스타일이 변할 때 서서히 변경하라는 뜻이고 (all 대신 opacity 이렇게 하나만 줄 수도 있음)1s 이건 1초에 걸쳐서 서서히 변경해달라는 뜻입니다.   transition 세부 속성 살펴보기  설명하다 .box { transition-delay: 1s; /* 시작 전 딜레이 */ transition-durat..

Font Awesome 다운받아 첨부하기  Font Awesome 홈페이지의 다운로드 메뉴에서 다운받아 압축을 풀면 여러개의 폴더가 나오는데, 이 중에 CSS, Webfonts 두개의 폴더를 여러분 작업폴더에 복붙하시면 됩니다. 그 후에 CSS 폴더 내의 all.css 라는 파일을 하나만 head 태그 안에 딱 첨부해주시면 설치 끝입니다. 나머지 잔챙이 CSS 파일은 다 삭제하셔도 됩니다.  link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">    Font Awesome CDN으로 첨부하기  CSS파일을 호스팅해주는 고마운 사이트들이 있습니다.이 사이트가 제공하는 all...

크롬 개발자 도구를 열면 버그 수정이 편해집니다.    브라우저에서 우클릭 - 검사를 누르시면 이렇게 HTML과 CSS를 한눈에 볼 수 있습니다. 혹은 F12 눌러서 개발자도구를 미리 열고 (맥은 alt + command + i)  ▲ 이렇게 생긴 버튼을 누르고 검사를 원하는 요소를 선택하면 됩니다.선택하면 우측 하단에 지금 선택한 요소에 적용된 모든 스타일을 보여줍니다.그 중에 어떤 속성을 만져야 수정이되는지 직접 조작해보며 확인가능합니다.   1. 여러 개의 중복 스타일이 있을 경우 가장 우선 적용되는것만 보여주고나머지 적용안되는 것들은 취소선 처리해줍니다. 2. html에 적용되는 여러개의 class가 있으면 전부 보여주는데 가장 위에 있을 수록 class의 우선순위가 높습니다. 3. 저기서 직접 ..