코딩기록

캐러셀, 슬라이드쇼, 이미지로케이터 모두 이미지가 회전하는 패턴을 의미하는 표현이다.캐러셀은 이미지 > 이미지 캡션 > 인디케이터 영역으로 구분된다. wai-aria의 role="region" => 탐색 가능함. role="region"은 배너,컨턴트인포같은 랜드마크 역할에는 적절하지 않지만 해당 영역을 탐색할때 도움을 받을 수 있는 일반적인 랜드마트 역할이다.region은 문서의 영역을 식별하는데 도움을 준다.aria-roledescription="carousel" => role에 대한 상세한 설명.보조기기가 region을 탐색가능한 영역으로 인식하고 carousel이라고 정확한 정보를 전달받게 됨.carousel이 여러개일 경우 aria-label="생활용품 슬라이드 배너" 처럼 aria-label속..

홈피 상단 로그인바 html 구조와 css배치가 다를 때1. grow로 순서를 잡고 2. flex-grow로 간격을 px나 margin이 아닌 auto나 flex-grow 등 가변적 수치로 조절하는 것이 좋다. [ html ] 구조          ul class="login-bar">      li>a href="/">로그인a>li>      li>a href="/">회원가입a>li>      li>a href="/">고객센터a>li>      li>a href="/">즐겨찾기a>li>      li>a href="/">쇼핑나들이a>li>    ul>   먼저 li > a를 감싸고 있는 login-bar클래스의 ul을 display: flex로 배치했다.   순서를  order 를 사용해 [로그인 > ..

html 기본구조 ul > li > a + ul > li > a + ul  ● aria-expanded="false"스크린리더 사용자에게 하위항목이 접혀있는지 펼쳐졌는지 알려주는 속성펼친 상태 : true접은 상태: false  ● aria-conttols="food"  /  id유니크한 id값을 식별해 컨트롤하는 속성  2depth ul에 id="food"이 2depth ul을 컨트롤하는 버튼(a태그)에 aria-conttols="food"aria-controls="food"가 id="food"를 컨트롤,2depth 의  aria-controls="fruits"  =>  3depth의  id="fruits" 를 컨트롤.    nav class="navigation">    h2 class="sr-onl..

1. HTML/CSS를 공부하면서 느낀점전부터 느꼈지만 html/css는 재밌다. 결과물을 바로바로 눈으로 확인할 수 있다는 점과 내 의지대로 만들어 가는 웹 세상이 참 매력적이다. 이번에 공부하면서 '웹 접근성' 이라는 개념에 대해 알게 되었다. aria-label, tabindex 등을 사용하는데 웹 접근성을 공부할 수록 프론트엔드의 필수적인 공부라고 느꼈다.  누가 모르더라도(알아주면 좋지만) 그를 위한 배려를 하며 살자는 내가 생각하는 삶의 방향과 사용자의 편의성을 생각해 일하는 프론트엔드의 업무와 닮았다. 그래서 프론트가 끌렸나보다. 마크업을 끝내고 css를 입히는데 태그에 따라 flex, position으로 배치하는 어려움이 있어 inline 요소, block 요소를 가진 태그를 생각하며 ht..

기본인스타그램 이미지에 배경색을 gradient로 스타일을 주는 방법이다. 파일을 받아 배경색을 주면 가로, 세로 34px의 이미지가 나온다. 최종적으로 저 노란 네모 테두리를 동그랗게 그려 배경색을 입힐 예정이다. 인스타그램 배경색1 [ css ].footer-rights li a:last-child { border-radius: 34px; border: 1px solid #000; background: linear-gradient(174deg, #285AEB 5.61%, #BC1888 22.32%, #CC2366 36.16%, #DC2743 51.91%, #E6683C 73.38%, #F09433 91.99%); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2..

내가 주로 쓰는 reset css 다.보통은 base.css, reset.css, defaul.css 라는 이름을 붙인다.이 코드는 강의나 인터넷 검색으로 짜집기한 정보들로, 계속 업데이트 중이다./* 여백 초기화 */ body, div, ul, li, dl, dd, dt,ol, h1, h2, h3, h4, h5, h6,input, fieldset, legend, p,select, table, th, td, tr,textarea, button, form { box-sizing: border-box; margin: 0 auto; padding: 0; border: 0;}/* *,*::before,*::after { box-sizing: border-box;} */body { font: 1.6..

select 태그 기본 버튼을 없애고 svg를 이용해 화살표 버튼으로 변경했다.select 태그 영역이 svg까지 포함되지 않아 이것 저것 하다가 해결했다.width도 아니고 padding. margin 등도 html 구조를 div로 감싸서 변경하거나 하는것도 아니다. 아주 간단하게  select가 태그 영역이 도달해야하는 이미지 css에pointer-events: none;  코드만 적으면 해결❗[ html ] 전체 의류 식품 생활   [ css ]/* 검색 영역 ..

마우스가 호버 됐을 때 버튼이 변경되면서 transition을 적용하는 css를 작성 중이다.   전체를 .cardWrap으로 감싸고 총 세줄의 상품 카드가 있고 .imgCard라는 div 컨테이너 안에 a > img > span의 구조로 되어있다.[ html ] ..

1. text-align: center;와 같은 블록 레벨 컨테이너 안에 있을 때만 작동.  2. margin: auto;margin: auto;는 인라인 요소에 영향을 미치지 않는 특징이 있다. 태그는 인라인 요소라 블록레벨로 바꾼 다음 margin: auto;를 적용해야한다.img { margin: auto; display: block;} 여기에서 너비를 주면 100%는 가득 차고  그 보다 낮으면 이미지 좌,우 마진이 빈 공간에 자리를 잡아 자동으로 가운데 정렬이 된다. 덧), 개인적으로 이방법이 제일 편했다. 3.  display: flex;컨테이너 요소에 text-align 속성을 사용했던 것 처럼 컨테이너에display: flex를 사용하..

vertical-align:middle;  전에도 헤맸던 부분인데[ html ] 오늘의 발견 | 오늘 쿠팡이 엄선한 가장 핫한 제품 [ css ].title h4,.title p { display: inline; vertical-align: middle;}  vertical-align: middle 을 .line, .title p 에 주어서 css가 안먹혔다. h4, p는 블럭요소라 inline을 주었고 그곳에서 수직정렬을 해야한다.  만약 div로 텍스트를 감싼 경우라면 display:table-cell; 과  vertical-align: middle 을 같이 쓰면된다.

은 가로 라인을 만드는 태그다이 태그를 꾸밀 수있다. css에서 border를 none으로 설정하고 height와 bacground-color를 설정한다.[css]hr { height: 1px; border: none; background-color: lightgray;}  완성!❤😍

1. 부트스트랩 아이콘 홈피에서 svg 주소를 html에 붙인다.   2. 마우스 호버 + script로 색상 변경1). css > hover 시 color: red로 변경.그리고 fill-heart를 우선 화면에 보이지 않게 변경하고 fill속성을 red로 채운다.[css].top-left span:nth-of-type(1):hover { color: red;}#fill-heart { display: none; fill: red;}  2). html에서 svg에 id값을 부여한뒤script에 하트, 채워진하트 addEventListener로 클릭이벤트 발생시 스타일의 디스플레이 속성을 변경한다.       참고 제로베이스 판다코딩 강의부트스트랩아이콘 - https://icons.getbootstr..