html css (5) 썸네일형 리스트형 css를 다루면서 정리하기 - 1 기초적인 CSS는 어느정도 다룰 수 있지만, CSS에서 제공하는 애니메이션이나 요소를 지정하는 효율적인 방법에 대해서는 그다지 다루지 않았었다. 최근 Chzzk 플랫폼의 커스텀 오버레이 채팅창을 만지며 배우게 된 부분을 정리하고 가려고 한다. 1. 태그태그의 경우 아무것도 붙이지 않고 호출한다body { font-family: var(--custom-font-family, "GangwonEduPowerExtraBoldA");} 2. 클래스 ( Class )기본적으로 Class를 지정할땐 .class 를 사용한다. //이 경우 css에서는 .live_overlay_item live_overlay_message 로 호출한다.// 3. 아이디( ID )id의 경우에는 #id를 사용한다.#chatBox { .. 2024.1.15 기록 (css와 display flex) css는 사실 사용하면 할수록 많이 감이 잡히는 계열중 하나이다. flex는 기본 row배열이다. 쉽게 말하자면 가로로 나열된다. 이 부분에 있어서 탑을 쌓는 느낌이 들었다. 반복문으로 제작한 HTML 태그들 사이에 각각의 Class를 부여하고, 그 class를 어떻게 배치할 것인지, 가끔은 grid를 사용하면 좋겠다는 생각도 들었다. 다음은 꼭 그렇게 써봐야지. 그리고 왜, .detail_comment_wrap_list > #detailCommentReviewWrap i { font-size: 25px; display: flex; justify-content: center; align-items: center; margin: 3px; } 다음과 같이 경로를 이용해서 작성하는 지 또한 알게됐다. 정리하고.. 2024.1.9 기록 css 와 grid에 대해서 기존 작업했던 과제인 영화페이지 만들기를 css로 관리하던 도중 flex만으로 작업을 하기도 했고 또, 하나하나 px값으로 주었던 부분이 장기적으로 반응형 웹을 만들 때 좋지 않은 퍼포먼스를 발휘 할 것 같아서 오늘은 특별히 더 grid에 대해서 공부를 하였다. 가장 먼저 css 작업을 진행할 때는 reset.css를 적용시킨다. 이 css는 가장 먼저 적용되게 배치하는 것이 좋다. reset.css는 기본적으로 html의 태그들이 가지고있는 기본값, 즉 h1~h5와 같은 태그부터 form, main, footer와 같은 태그까지 기본적으로 가진 margin과 같은 값들을 전부 초기화 시켜주는 css이다. 이렇게 작업을 시작하면, 어느 환경에서라도 항상 균등한 값을 기대할 수 있기 때문에 무엇보다도 초기.. 2023.12.12 기록(html과 css의 기초정리) html과 css 기초를 정리하면서 가장 많이 헷갈릴 만한 것들을 조금 정리했다. span 태그 - inline 속성을 가진다 (a, em, strong 또한 같다) - 자신의 공간만 소유한다. div 태그 - block 속성을 가진다. (h1~h6 , p , ul 또한 같다) - 해당 열 자체를 소유한다. span과 div를 표현하자면 다음과 같다. 이것은 p태그로 쓰여진 텍스트 입니다. 이것은 div태그로 쓰여진 텍스트 입니다. 이것은 span태그로 쓰여진 텍스트 입니다. 이것은 css에서 각각 display -inline / display - block 을 이용해 서로 다른 값을 줄 수 있다. // 기존에block 속성을 가지지만 정 반대를 부여 할 수 있다. html태그의 고유 속성까지 수정이 가.. 2023.12.1 기록 (Mixed Content 문제해결) 내일배움캠프 과정을 밟으며 사전캠프 기간동안 작성하게 된 일지의 첫번째, 5주차 과정 중, github에 업로드 하는 과정이 있다. fetch를 통해 외부의 자료를 불러오는 방법을 배웠고, 로컬에서는 문제가 없었으나 해당 링크 부분이 git에 업로드 했을 때 문제가 발생하는 부분을 파악했다. 콘솔창에 나온 오류문구는 다음과 같다. This request has been blocked; the content must be served over HTTPS. git에 업로드를 하게 되면 https 이 적용된 사이트로 열람을 하게 되는데, http 를 불러올 경우 Mixed Content 즉 혼합콘텐츠 라는 오류를 띄우며 불러오기에 실패하게 된다. 대개의 경우 해결방법은 간단하다고 하는데 불러오는 주소의 htt.. 이전 1 다음
