나의 FE피봇이야기/HTML || CSS (32) 썸네일형 리스트형 [ CSS / background-image] check box or radio에 SVG이미지 넣기 CSS에 svg background image 넣기 input[type="checkbox"]:checked { background-color: rgba(255, 255, 255, 1); /* Background color when checked */ border-color: rgba(0, 0, 0, 1); /* Change border color when checked */ background-image: url('data:image/svg+xml;charset=UTF-8,http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejo.. [ CSS / focus-visible ] focus vs focus-visible and focus-within focus-visible을 찾아보다가 셋다 한번에 알아 봤다.요약 :focus:focus-visible:focus-within선택 범주선택받는 주체(자신:myself)선택받는 주체(자신:myself)선택받는 주체의 부모(부모 :parents)활성화될 때모든 도구(마우스, 키보드 등등)키보드모든 도구(마우스, 키보드 등등 :focus-visible정의Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.w3.org에서 퍼온 내용"키보드 조작이 가능한 모든 사용자 인터페이스에는 키보드 초점 표시기가 표시되는 작동 모드가 있습니다." 이점This Success Criter.. [ HTML ] 웹접근성 확인 tool at Chrome 쉽게 chrome에서 웹 전근성을 확인 할 수 있는 방법 1. 개발자 툴을 연다.2. Ctrl + Shift + P3. acc 검색한다.4. 체크, Enable full-page accessbility tree 5. 클릭, Roload DevTools6. 사람 버튼이 활성화 됨. [CSS] infinite scrolling X 포인트 : 전체 logos에서 자식 를 block에서 inline-block으로 만들어서 무제한 scrolling을 시키는 것==> No display FLEX animation from { transform : translateX( 0 ) } to { transform : translateX(-100%) }출처https://www.youtube.com/watch?v=nAjR0Oj0J8E [grid/flexbox] justify-items and align-items 차이란? gird axis 축의 main 중심이냐 아니면 block 중심이냐 차이 justify-items: CSS 그리드의 justify-items 속성은 그리드 셀 내의 인라인(main) 축을 따라 그리드 항목을 정렬하는 데 사용됩니다. 이 속성은 행 축을 따라 그리드 컨테이너 내부의 모든 그리드 항목의 정렬에 영향을 줍니다. The justify-items property in CSS Grid is used to align grid items along the inline (main) axis within their grid cells. It affects the alignment of all the grid items inside the grid container along the row axis. ali.. [overflow] popup에서 확인 버튼 고정으로 만들기 popup안에 형제로 h3 / div class="grid" / button 이 있다. div class="grid" => height + overflow-y height를 고정하고 scroll이 하면 div = "grid" 자신만 고정된 height를 가지고 스크롤이 된다! [svg]가운데 정렬할때 타사의 SVG를 가져와서 사용하곤 한다. 특히 화살표를 사용할 때, transform : rotate를 사용하면 좌우 높이가 안 맞는다. 따라서 CSS에 2가지 값을 추가해야 한다. vertical-align: height: [fit-content] 자식 요소들로 heigtht / width 맞추기 1. 부모가 자식width만큼 : 자식요소로 width와 height를 맞추고 싶을 때 사용하는 것. 2. 각 자신에게 사이즈를 맞출때 : 각 자신의 요소가 다른때 거기게 맞춰서 배경색을 넣을 경우 => 참조 예시 https://codepen.io/daleseo/pen/WNjQKxp 다만 이번에 제가 클론 코딩을 하면서 배운 점은 자식요소의 width을 그대로 반영하고 싶을때 사용 상황 : ul >li*{$} >a 가 있는데 여기서 Ul에 사이즈를 만들고 싶지 않을때. 사용 이유 : Ul+flex에 line indicator를 사용하고 싶어서 As-is => ul style.width : fit-content To-be => ul style.width : fit-content(deleted) [HTML]Email 접근성 통과하기 Email을 한 번에 도메인까지 쓴다면 웹 접근성에 큰 문제가 없다 label + input type="email" 그런데 만약 클라이언트가 이메일을 ID와 도메인으로 분리하기 원하면 아래와 같이 해결 Email Email ID @ Email Domain display :flex/grid에서 gap or marign 결론은 gap을 추천한다. 이유는 direct items에 대한 사이와 사이에 간격이 생기기 때문이다. 다시 말해 만약 margin-left를 item마다 줄 경우 item을 둘러쌓고 있는 parent class에 붙는 측면(예. 가장 왼쪽에 있는 item의 왼쪽 측면에 간격이 생기지 않는다. dataset을 활용하는 방법 Why dataset인가? dataset의 장점 1. 두 개의 개별 클래스 대신 하나의 데이터 속성만 있으면 활성 상태와 비활성 상태를 모두 처리 가능 2. class명을 바꾸고 싶을 때 원글 https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript/ HTML에 dataset 설정하기 console.log 로 확인하기 const div = document.getElementById("test-div") console.log(div.dataset) 기타 - HTML에 dataset정보 추가 가능 - dataset의 value 값 변경 가능 등등등 참조 https://blog.webdevsimplified.com/20.. [Table vs CSS grid] 장단점이 있다 둘 중 하나의 선택의 어떤게 더 데이터적이냐라는 질문에 답이 있다. 데이터와 연동된다면 현재까진(?) HTML Table을 쓰는것이 더 효율적이다. CSS 장점 1. code 가 간편하다. 단점 1. border주기 힘들다. border + background +gap처리 참조 https://stackoverflow.com/questions/47882924/preventing-double-borders-in-css-grid HTML Table 1. border 주기가 편리하다. 내가 쓴 해결책(2023.11.16) 전체에 border :1 1px 주고 marign- left: -1 px & margin-top : -1px;(height가 늘어난다) 다시 전체 tabled 양쪽 left & right를 #.. [absolute] transform : translate(-50%, -50%)넣는 이유 position: absolute; top: 50% left:50% 하면 부모 중 position:relative가 감싸고 있는 크기의 중앙에 위치 왼쪽 모서리 기준으로 가운데 정렬(장기하의 코가 중심) 이렇게 하면 요소의 중심이 원래 왼쪽 상단 모서리로 효과적으로 이동 왼쪽 모서리 기준으로 가운데 정렬(장기하의 코가 중심) transform : translate(-50%, -50%) 원글 https://stackoverflow.com/questions/46184458/transform-translate-50-50 [CSS] opacity versus background : rgba 차이 -opacity는 적용한 '테그 전체'에 투명도 적용 -background rgba는 '배경만' 투명도 적용 [img]에서 글자와 함께 사용시 1. img 에서 alt="글자 내용" 정리 후 실제 페이지에선 삭제 2. 글자에 감싸고 class="screen_out"으로 숨김 3. 를 활용해서 background에 이미지 넣기 4. pseudo (before or after) 사용해서 background에 이미지 넣기 5. 외부에서 이미지를 불러올 때 사용(외부에서 아이콘 가져올때만 사용 가능) [absolute]요소레벨 변경 및 상태 absolute를 사용하면 inlin-block 상태가 된다. 만약 width가 없으면 자식의 width와 height가 자기 자신과 동일한 상태가 된다. 1. inlin요소가 inline-block으로 변경되는 순간 중 하나 absolute 2. top, right, bottom and left를 움직어야 그때부터 absolute 적용 3. absolute가 되면 width:0, height:0 인 상태 4. 본인이 absolute인 경우 자식에게 absolute 속성이 inherit 되진 않음. inline요소가 inline-block으로 요소 변경 1) float 2) position : absolute / fixed 3) display : flex / grid => '자식'의 요소 레벨 변경(in.. [GNB]GNB의 nav 만드는 방법 1, 2, 3 GNB의 Nav를 만들때는 1depth와 2depth를 구분해야 한다. 1depth 1. gnb > ul : 영역을 width를 설정 가능 2. gnb > ul > li : 2depth :영역 기준 설정 => position:relative 3. gnb > ul > li >a : Click 영역 기준 설정 (주의 : display:block을 통해서 li 전체 영역으로 click 활성화) 2depth 1. gnb ul li ul : ul이 영역을 가지고 있기 때문에 position :absolute 사용 2. gnb li ul a : Click 영역 기준 설정 (주의 : display: (block을 통해서 li 전체 영역으로 click 활성화 ) Mega Sub menu nav ul { position.. [text-align] <p> 가운데 정렬 비교(수직 정렬) 이 글은 의 가운데 정렬을 하기 위한 비교 페이지 입니다. 는 block 요소 인데 왜 text-align을 사용하는지 이해 못했던 발견을 이곳에 정리합니다. text-align만 tag block이다 보니까 default => width 100% + text-align:center text-align + width tag가 block 이다보니 width를 줬을 때 왼쪽으로 밀림 text-align + width + margin 이제 완성 됐습니다. text-align + width + margin 여기서 text-align이 없으면 안에 item의 정렬이 왼쪽 정렬로 변경됨. [CSS] align 가운데(수직) 정렬, 세로(수평) 정렬 '가로' 가운데 정렬하는 방법 block block => margin:auto; (width 필수!) inline 요소 요소가 변경되는 경우(inline => inline-block) 1) float 2) display: flex or grid 3) position:absolute or fixed more ul > li로 dropdown을 만들때, li 안에 tag는 display :block 처리를 해줘야 영역 전체 선택이 가능. 왜냐하면 는 inline 요소이기 때문에 width를 가질 수 없음. block and inline-block 비교 block - 블록 레벨 요소는 일반적으로 부모 컨테이너의 전체 너비에 걸쳐 블록 상자 생성 - 그들은 요소 전후에 새 줄을 만들어 후속 요소가 새 줄에 나타남.. [margin]Margin-Top 버그 이슈 margin-top에는 알 수 없는 버그가 있다. 자식에 margin-top을 하면 부모와 함께 같이 밀려나는 현상이다. 기대 child => margin-top 현실 => child:margin-top 현실과 같이 자식(child)은 부모(Parent)와 함께 내려간다. 해결 방법 1) (부모에)float, position 을 적용 => overflow:auto 2) border-top: 1px solid (배경색);을 적용 TIP - margin-bottom을 활용하여 콘텐츠 영역 사이의 간격을 조절 한다. - block 요소 가운데 정렬 + margin-bottom => margin: 0 auto 50px ; 이전 1 2 다음
