CSS3 [TIL] 내일배움캠프 React 과정 2022.11.15 Today I Learned 웹 퍼블리싱 강의 2주차, 3주차 수강 웹 퍼블리싱 2주차 강의 내용 padding 값으로 텍스트 정렬하기 .api_atcmp_wrap .atcmp_fixer .atcmp_header { position: relative; padding: 8px 18px 0; } /* 전체삭제 텍스트 */ .api_atcmp_wrap .atcmp_fixer .atcmp_header .option { position: absolute; top: 9px; right: 18px; } 최근 검색어와 전체삭제를 양 끝에 위치하기 위해 padding 값을 이용해서 정렬을 해주었다. 좌측의 최근 검색어는 따로 위치를 설정할 것은 없고 우측의 전체 삭제 텍스트는 추가적으로 right: 18px;을 넣어준다.. 2022. 11. 15. [TIL] 내일배움캠프 React 과정 2022.11.14 Today I Learned 웹 퍼블리싱 강의 1주차~2주차 수강 웹 퍼블리싱 강의 1주차 내용 CSS transition transition: all 0.3s ease-in-out; transition에 어떤 다양한 효과들이 있는지 궁금해서 검색해봤다. https://poiemaweb.com/css3-transition a태그 밑줄, 색상 제거하기 a { text-decoration: none; color: inherit; } color: inherit; 상위 클래스에서 지정한 색깔을 그대로 가져오는 문법 나는 color: white 로 색상을 직접 변경하는 방법을 사용했었는데 강의를 들으면서 inherit라는 더욱 간단한 속성도 알게 되었다. css에 이렇게 코드를 작성하면 모든 a 태그에 적용된다... 2022. 11. 14. html과 css만으로 top 이동 버튼 추가하기 다른 팀들의 발표를 보고 나도 버튼 누르면 최상단으로 이동해주는 top 버튼을 구현해보고 싶어졌다. 근데 구글링 해보니 대부분의 게시물에서는 자바스크립트를 이용하는데 나는 아직 자바스크립트를 이용해 본 적이 없기 때문에 조금 두려웠다. 그래서 html만으로 구현할 수 있는 방법이 없을까 열심히 검색하고 시도해 보다가 결국에는 성공했다! 참고 사이트 https://miaow-miaow.tistory.com/84 일단 내 웹페이지는 굉장히 간단한 구조이기 때문에 더 복잡한 코드에서도 적용될지는 모르겠다는 점을 밝혀둔다. 1. top 버튼 눌렀을 때 이동하고 싶은 위치를 id="top"으로 설정한다. 나는 타이틀에 id 값을 설정해 줬다. 2. html 코드 최하단에 a 태그를 추가한다. a 태그에 버튼 눌렀.. 2022. 11. 8. 이전 1 다음
