코딩기록

캐러셀, 슬라이드쇼, 이미지로케이터 모두 이미지가 회전하는 패턴을 의미하는 표현이다.캐러셀은 이미지 > 이미지 캡션 > 인디케이터 영역으로 구분된다. 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..

setArray와 Set 복잡도 비교기능 배열 (Array) Set (Set) 삽입 (Insertion)  push() - O(1) (배열 끝에 삽입 시)    splice() - O(n) (특정 위치에 삽입 시)  add() - O(1)(위치 지정 불가)삭제 (Deletion)  pop() - O(1) (끝에서 삭제 시)  splice() - O(n) (특정 위치에서 삭제 시)   filter() - O(n) (특정 요소 삭제 시)  delete() - O(1)검색 (Search)  indexOf() 또는 includes() - O(n)  has() - O(1)접근 (Access)  arr[index] - O(1) (인덱스를 통한 접근)  for...of 반복 필요 - O(n) (인덱스 없음)중복 허..

머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요.제한사항1 ≤ babbling의 길이 ≤ 1001 ≤ babbling[i]의 길이 ≤ 15babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다.즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다.문자열은 알파벳 소문자로만 이루어져 있습니다...

문제 설명문자 "A"와 "B"로 이루어진 문자열 str과 part가 주어집니다. str의 "A"를 "B"로, "B"를 "A"로 바꾼 문자열의 연속하는 부분 문자열 중 part이 있으면 1을 아니면 0을 return 하는 solution 함수를 완성하세요.제한사항1 ≤ str의 길이 ≤ 1001 ≤ part의 길이 ≤ 10str과 part는 문자 "A"와 "B"로만 이루어진 문자열입니다.입출력 예str part result"ABBAA""AABB"1"ABAB""ABAB"0입출력 예 설명입출력 예 #1"ABBAA"에서 "A"와 "B"를 서로 바꾸면 "BAABB"입니다. 여기에는 부분문자열 "AABB"가 있기 때문에 1을 return 합니다.입출력 예 #2"ABAB"에서 "A"와 "B"를 서로 바꾸면 "BABA..

문제 설명알파벳 소문자로 이루어진 문자열 str이 주어집니다. 알파벳 순서에서 "l"보다 앞서는 모든 문자를 "l"로 바꾼 문자열을 return 하는 solution 함수를 완성해 주세요.제한사항1 ≤ str ≤ 100,000str은 알파벳 소문자로 이루어진 문자열입니다.입출력 예str result"abcdevwxyz""lllllvwxyz""jjnnllkkmm""llnnllllmm"입출력 예 설명입출력 예 #10 ~ 4번 인덱스의 문자 "a", "b", "c", "d", "e"는 각각 "l"보다 앞서는 문자입니다. 따라서 "l"로 고쳐줍니다.그 외의 문자는 모두 "l"보다 앞서지 않는 문자입니다. 따라서 바꾸지 않습니다.따라서 "lllllvwxyz"을 return 합니다.입출력 예 #20번, 1번, 6번..

문제 설명영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 str이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요.제한사항str은 소문자와 공백으로 이루어져 있습니다.1 ≤ str의 길이 ≤ 1,000입출력 예str result"bus""bs""nice to meet you""nc t mt y"입출력 예 설명입출력 예 #1"bus"에서 모음 u를 제거한 "bs"를 return합니다.입출력 예 #1"nice to meet you"에서 모음 i, o, e, u를 모두 제거한 "nc t mt y"를 return합니다.const solution = str => { // do something};console.log(soluti..