본문 바로가기

UI

(227)
[setProperty]pseudo class 값 변경하기 at tab UI 텝 하단에 animation underline을 만들기 작업을 진행했다. 핵심 포인트 1. underline이browser가 움직여도 같이 따라 움직여야 한다. 2. screen leader에 굳이 읽힐 필요는 없다. 첫번째, ul >ul:last-child() Ul > li 맨 마지막 번에 class="underline"을 만들어서 만들었다. 일단, 가능을 할 수 있으나, 정석은 아닌거 같다. 두번째, Ul::after 활용 이건 적어도 diable 사람들에게 underline tag가 읽기지 않기에 웹접근성엔 좋은 거 같다. 배운점 1. translate이 left(position : absolute)보다 자원활용이 적다. 2. javascript에서 css의 ::after 값을 변경 할 수 있다. ..
[getBoundingClientReact]웹 브라우저를 좌표로 실시간 반환 메서드는 엘리먼트(Element)의 크기와 뷰포트(Viewport)에 상대적인 위치 정보를 제공 다시 말해, getBoundingClientRect() 의 요소의 위치는 고정값이 아니라 문서가 브라우저에서 스크롤 될 때 마다 값 전달. console.log('offsetTop: ' + elem.offsetTop); //This is fixed. it get's calculated from beginning of your page to actual element's position. console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this will changing while scroll, because it's re..
[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)
[addEventListener]클릭 대상의 부모를 클릭해도 작동한다. 이벤트가 발생할 contain or wrap에 addEventListner을 설정해도 contain 안에 있는 모든 이벤트는 작동한다. 다만 클릭을 할때마다 target정보를 가져오기 때문에 무조건 e.target.closest("(target tag")와 조건문을 함께 작성할 것. 예시 tabContainer.addEventListner("click", (e) =>{ const clickedTab = e.target.closest("a"); if (!clickedTab) return // => 대상이 아니면 그냥 function 종료 tabContainer.addEventListner("click", (e) =>{ const clickedTab = e.target.closest("a"); if (!cl..
[JavaScript]scrollTo를 통해서 움직이는 화면 이동 이 글은 아래의 URL을 참조하여 작성하였습니다. https://velog.io/@phrygia/2021-09-21-html-scroll 중간에 잠깐 착각을 하는 바람에 for 문으로 선택한 button에서 자꾸 offsetTop값을 가져오려고 했다. 그러다 다른 분에 물어봤다가 아래와 같이 3가지 방법으로 해결책을 발견했다.
[git bash] local <--> remote 데이터 전송하기 ☆Github 저장소를 로컬 git에서 별칭으로 만들어 관리하기 1. github 와 연결 $ git remote add origin(별칭) github's URL(내가 앞으로 올릴 repository URL) 2. Local git 에서 remote github로 $ git remote push origin(별칭) main(git hub default branch name) ※ 주의 Local과 remote의 데이터 상태가 동일하지 않을 경우 push가 불가능. 따라서 pull을 통해서 local === remote 데이터 상태를 동일화 시킨후 push 가능 url. Basic concept master(main) = local repository orgin/master(main)[보통 최신 버전을 가..
Framework and Library framework : 도구를 사용하기 위한 환경 -설치 기본 코드를 작성하면 코드를 작성하면 브라우져가 변환 **convert, encoding => 컴파일러 by C or Java library : 이미 만들어진 기능 자바스크립트 라리브러리 참고 https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC_%EB%AA%A9%EB%A1%9D
[nodelist]for문을 통해서 childern 값 변경하기 for ( let item = 0 ; item < $navTexts.length; item +=1){ 조건식 } for문을 돌리는 것은 nodelist에 있는 것으로서 for( var item = 0; item
[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의 왼쪽 측면에 간격이 생기지 않는다.
[Article]유튜브는 독서인가? Yes! 유튜브 시청을 독서라고 생각하는 사람들의 독서관(讀書觀) -독서의 목적을 ‘지식 습득’이라고 규정 -‘가성비 좋은 독서’를 추구 -투자한 시간 대비 습득할 수 있는 지식이 얼마나 되는지 효율성을 중요하게 생각 Yes but no! -독서의 본질은 공부가 아니라 체험 -책은 지식과 정보가 아니라 지혜와 통찰의 매체 -어떤 지혜와 통찰은 충분한 시간과 길이 없이는 전달되지 않기 때문에 요약된 영상으로는 독서의 깊은 체험이 불가능 원글 https://m.khan.co.kr/culture/culture-general/article/202310120600011
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..
JavaScript 오류 JavaScript 오류 1. JavaScript는 오류가 발생하면 일반적으로 중지되고 오류 메시지 생성 2. 기술 용어 : JavaScript will throw an exception(thorw an error) 3. name & message 속성을 가진 Error 객체 생성 - 이름 : 오류 이름을 설정하거나 반환 - 메세지 : 오류 메시지(문자열)를 설정하거나 반환 오류 유형 1. ReferenceError(잘못된 참조) : 선언되지 않는 변수를 사용(참조)하는 경우 발생 let x = 5; x= y+1; 2. SyntaxError(구문 오류) : 구문 오류가 있는 코드를 평가하려고 할때 발생 eval("alert('Hello')") 3. TypeError(유형 오류) : 예상 유형 범위를 벗어..
[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를 #..
[Javascript] 문자열 및 문자 추출 javascript 문자열 1. 텍스트를 저장하고 조작하기 위한 자료형 2. 따옴표 안에 쓰여진 0개 이상의 문자 ex. let txt = "Hong Gildong"; let txt = 'Hong Gildong'; 3. 문자열을 둘러싼 다옴표와 일치하지 않으면 문자열 내에서 따옴표 사용 가능 let txt1 = "lt's alright"; let txt2 = "He is called 'Robin Hood'"; let txt3 = 'He is called "Robin Hood"'; lenth: 문자열 길이 1. 문자열의 길이 - let txt = "ABCDEG" - let length = txt.length; escape 문자 1. 백슬러시(\) 사용 2. 특수 문자를 문자열 문자로 변환 Code \' :..
[splice] splice(index, how many, exchange) splice(1 ) index 뒤로 다 지워 splice(1, 0, "ee", "ff"); 중간에 요소 추가 splice(1, 1, "ee") 중간 요소 수정 splice(1, 2, "ee", "ff") 중간 요소 여러개 수정
객체 객체 1. 여러 개의 값을 가지는 자료구조 2. 값은 이름 : 값 쌍으로 기록 => {key, property, name etc : value} 3. 일반적으로 const로 선언 정의 1. 객체 리터럴을 사용하여 정의 - const person = {firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"}; 2. 공백, 줄바꿈 무관 3. 여러 줄에 걸쳐 객체 정의 가능 - const person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue", }; 객체 생성자 1. 생성자 함수의 이름 첫 글자는 가급적 대문자 지정 (below the 'this' is to Pers..
[addEventListner] 특징 1. 1개 이상을 사용할 수 있다. 2. event.target 3. bubble event(phase) - capturing phase (html > body > grandparent > parent > child) : outside to in - bubbling phase (child > paraent >grandparent > body > html) : inside to out 4. removeEventListner => closet('') bc of working out the HTML hierarchy onclick vs addEventListner onclick : 마지막 등록된 핸들러만 실행 addEventListner: 1개 이상의 핸들러 '동시' 실행 가능 $button.addEve..
[Javascript] 변수선언, 함수, 생성자, 매서드 등 확인하는 방법 함수 작동 원리 hosting environmentRecord는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지에만 관심이 있고, 각 식별자에 어떤 값이 할당될 것인지 관심없음. (단 변수는 선언부와 할당부에서 선언부만 반면, 함수 선언은 함수 전체를) 1. 변수망 끌어올려 주솟값 배정(할당) 2. 할당 처리 X 함수 선언문은 함수명으로 선언한 변수에 함수를 할당 명칭 예시 변수 (var / let / const) aaa string, value "aaa" 함수 aaa( ) method(메소드) _____.write( ) (거의)객체 :생성자 함수 Aaa( ) property(속성) _____.scr = _____.scr = : property(속성) _____.write( ) : meth..
함수 정의 및 선언문 작성 그리고 event&event handler 1. 변수 선언문 => (var / let / const) aaa => 변수 2. 함수 선언문(명령어) => function Function'Name ( parameter ) Function'Name(Optinal) 이름은 구분을 위한 것이기 때문에 구분이 필요 없을시 삭제 가능 - 자동으로 실행 안됨(호출 시에만) 함수 1. 내장함수 : 만들어져 있는 명령어 => redefine HTML Tag 2. 사용자 정의 함수 : 만들어서 사용하는 명령어 함수 : aa( ) 메서드 : ____.aa( ) 2. 사용자 정의 함수 2-1) 사용자가 임의로 생성한 함수 2-2) 선언문 : function 2-3) function 함수명( 매개변수, 매개변수,...){ 선언문; 선언문; } let saveFunc = ..