본문 바로가기

Languages8

[HTML] Semantic tag Semantic markup(의미론적 마크업)이란? 일반적인 Markup tag에 의미를 부여하여 Web page를 일종의 데이터 베이스처럼 이해할 수 있도록 돕는 방식을 말한다. 기존의 웹 문서는 , , 등의 일반적인 Markup tag를 사용하여 작성되었는데, 이 태그들은 문서 내에서 요소가 그려지는 방식에 따라 사용이 결정되며 그 요소의 의미를 나타내지는 않았다. 이후 웹 문서를 요소의 의미에 따라 구성하는 Semantic markup이 등장했고 일반적인 Markup과 비교하여 아래와 같은 이점을 갖게 되었다. 검색 엔진 최적화(SEO)에 유리하다. 스크린 리더가 웹 페이지를 이해하고 탐색하는데 도움을 준다. 즉, 웹 접근성을 높일 수 있다. 기본적인 문서 구성을 정형화하여 다양한 웹 문서를 탐색할.. 2023. 8. 22.
[Python] List * 연산으로 2차원 배열 이상 확장했을 때 Index 참조 문제 arr = [0] * 5# [0, 0, 0, 0, 0] 위 예시와 같이 Python에서는 배열을 * 연산으로 확장할 수 있다. 이 기능은 위와 같은 1차원 배열에서는 별 문제 없이 동작하나 2차원 배열 이상 확장했을 경우에는 아래와 같은 케이스를 만날 수 있다. arr = [[0] * 3] * 3 # [[0, 0, 0][0, 0, 0][0, 0, 0]] arr[0][0] = 1 # [[1, 0, 0][1, 0, 0][1, 0, 0]]​ 값 변경 시 Index의 참조가 정상적으로 이루어지지 않고 있다. 공식 문서에서는 위 예제와 같은 방식으로 List를 생성할 경우 하나의 배열의 Reference를 사용하여 다른 배열을 생성하므로 위와 같은 케이스가 발생하는 것이라고 설명하고 있다. 🙏 참조 https:/.. 2023. 7. 4.
[JavaScript] Or와 And 연산자 단축 평가 논리 계산법 논리연산자는 많은 프로그래밍 언어에서 단순히 True와 False만을 반환하는 것으로 알려져 있으나 JavaScript 의 논리 연산자 중 Or와 And는 조금 다르게 작동한다. Or Or 연산자는 → 방향으로 연산을 진행하며 True인 값이 나오면 해당 값을 반환하고 연산을 종료한다. 때문에 비교값 중 가장 먼저 나오는 True 값을 반환하며, 값이 모두 True일 경우 가장 앞에 위치한 피연산자를, 값이 모두 False일 경우 가장 뒤에 위치한 피연산자를 반환한다. null || 7// 7 → true 조건의 값을 반환 4 || 7// 4 → 피연산자 모두 true일 경우 가장 앞쪽의 피연산자를 반환한다. null || undefined// undefined → 피연산자 모두 false일 경우 가장 .. 2023. 7. 2.
[JavaScript] 정규표현식의 전역 플래그와 .test() 문제 전역플래그 g 를 사용한 정규 표현식에서 .test() 함수 사용 시 True가 반환되어야 하는 조건에서 True와 False를 번갈아가며 반환시키는 문제 let exp = /[a-z]/g let arr = Array.from('abcdef') for( e of arr.values()) console.log(exp.test(e)) // 출력 : // true // false // true // false // true // false 위와 같은 반복문에서 정규표현식 조건에 부합함에도 불구하고 True와 False가 번갈아가며 나오는 문제가 확인되었다. 원인 전역플래그 g와 .test() 함수를 함께 사용할 때, 검색에 성공할 경우 다음 검색을 위해 성공한 다음 Index를 LastIndex로 저장하.. 2023. 7. 2.
[JavaScript] Template literal & Tagged template Template literal 표현식을 허용하는 문자열 리터럴 문자열 선언 시 백틱(``) 을 사용하며 표현식은 ${} 로 표현한다. let a = 'apple' let b = 'banana' console.log(`a: ${a}, b: ${b}`)// 결과값 : 'a: apple, b: banana' 위와 같이 변수 뿐 아니라 함수, 연산의 결과를 문자열 중간에 삽입할 수 있다. Tagged template 템플릿 리터럴은 변수 및 결과값을 그대로 대입하기 때문에 조건에 따라 다른 값을 대입하는 것이 어렵다. 이를 보완하기 위해 중간처리 함수를 통해 표현식의 값을 조건에 따라 변경할 수 있도록 하는 것이 태그드 템플릿이다. function taggedTest(string, ...exp){ // stri.. 2023. 7. 2.
[JavaScript] 정규표현식 (RegExp) Regular expressions dictionary 문자열에서 특정 조건을 만족하는 문자 조합을 판별하기 위해 사용하는 표현식. 정규표현식 테스트가 가능한 사이트 : https://regexr.com/ 정규표현식 문제집 사이트 : https://regexone.com/ 정규표현식 작성방법 생성 / / 에 담아 생성하는 방법과, new RegExp() 함수를 사용하는 방법이 있다. let re = /정규표현식/플래그 let re = new RegExp('정규표현식', '플래그') 플래그 검색범위 등 정규표현식으로 정의하기 어려운 검색 조건을 설정한다. let re = /정규표현식/gm // 플래그 g와 m의 기능을 사용하겠다는 의미. 자세한 기능설명은 하단 표 참조 플래그 설명 대응하는 속성 g Glo.. 2023. 7. 2.
[CSS] 마진 병합, 마진 붕괘, Margin collapsing Margin collapsing .box { width:150px; height:150px; margin: 20px; /* 상, 하, 좌, 우 여백 모두 20px*/ border: 1px solid; } A B 위 예제와 같이 상, 하, 좌, 우의 여백을 모두 가진 두 DIV 태그를 출력한 결과물은 아래와 같다. 두 DIV의 Margin이 모두 20px 이라면 A DIV와 B DIV 사이 간격이 40px이어야하지만, CSS는 의도적으로 두 마진값을 하나로 병합하여 균일한 정렬에 도움을 주는데 이를 마진병합, 마진붕괘라고 말한다. ※ A박스의 Bottom margin과 B박스의 Top margin 값이 다를 경우 둘 중 큰 값으로 병합한다. 마진 병합이 일어나는 조건은 아래와 같다. 인접해있는 Block .. 2023. 7. 2.
[JavaScript] 이벤트 전파(Event flow) HTML은 여러 요소들이 중첩되어 쌓여있다. HTML BODY DIV 때문에 위 태그, , 에 모두 onClick Event를 설정해둔 채로 div를 클릭했을때, HTML은 중첩된 3개의 요소들 중 우리가 실행을 원하는 것이 어떤 onClick 함수인지 판단이 어려워진다. 그래서 중첩된 요소들의 onClick 함수를 모두 실행한다. 이 때 onClick 함수가 호출되는 순서는 아래와 같이 Capture phase와 Bubble phase 두 가지로 나누어진다. 위 이미지에서 Target은 직접 클릭이 발생한 최상위 요소를 가리킨다. 이벤트가 발생하면 event.target.nodeName으로 해당 요소를 확인할 수 있다. Current target은 본인 요소를 말한다. 이벤트가 호출되었을 때 this... 2023. 7. 2.

티스토리툴바