본문 바로가기

나의 FE피봇이야기

(182)
[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..
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 = ..
HTML과 JavaScript 차이점 2개 1. 연산 능력이 있다. 2. 상호 작용이 있다. 단 조건이 필요 => 조건1 function (함수) => 조건2 event
[JS] 대입 연산자의 활용 '지역변수 -> 전역변수' 대입 연산자 += =>함수, for 등 안, 다시 말해 지역변수에 내용을 저장하여 전역변수에서 사용하고 싶을때, 대입 연산자를 활용하여 변수에 저장한다. 1. itemList를 선언 하지 않았을 때 2. itemList를 for { } '안'에 선언 했을 때 3. itemList를 for { } '밖'에 선언 했을 때
[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 - 블록 레벨 요소는 일반적으로 부모 컨테이너의 전체 너비에 걸쳐 블록 상자 생성 - 그들은 요소 전후에 새 줄을 만들어 후속 요소가 새 줄에 나타남..