본문 바로가기

분류 전체보기222

[css] block, inline, inline-block block block은 레이아웃을 잡는데 기본이 되는 요소이다. div를 필두로, h1 ~ h6, form, header, aside, article, address, table, 등등이 block이 기본인 요소들이다. Block의 특징 block의 특징은 width, height, margin, padding 설정이 가능 하다는 것이다. 또한 block 내부에 다른 block이나 inline등을 배치하고 레이아웃을 지정해주는 역할 또한 가능하다. inline inline은 block과 반대되는 개념이다, span, a, img, input, label, button 등이 inline이 기본인 요소이다. inline의 특징 inline은 width, height 지정이 불가하며, 컨텐츠의 영역이 크기로 .. 2022. 7. 19.
[css] Layout 잡기 1 (position 속성 - relative, absolute, fixed) 오늘은 CSS에서 가장 중요한 "레이아웃"을 잡기 위해 사용되는 position 속성에 대해 포스팅한다. position : fixed; { position : fixed; } 는 상단 바 (nav bar)나 aside bar를 만들기 위해 보통 사용하는 CSS속성이다. 이름에서 유추할 수 있듯, 위치를 고정시키기 때문에 스크롤을 아래로 내려도 상단에 nav bar가 유지되는 걸 구현할 수 있다. 빠르게 코드와 결과물을 보도록 하자. Relative, Absolute { position : relative; } 는 left, right, top, bottom 과 함께 사용하여 위치를 지정할 수 있다. { position : absolute } 는 부모 중에 position이 relative, fixed,.. 2022. 7. 19.
Simentic Web이란? (img태그와 background-image의 차이) HTML / CSS 기초를 다시 훑는 중 "Simentic Web, Simentic Tag란 무엇일까?" 라는 질문에 답하기 위해 포스팅합니다. 한 줄 정리 시멘틱 웹은 "컴퓨터가 이해할 수 있는 웹", "사람이 이해하기 쉬운 웹"이고 이를 가능하게 해주는 방법이 "시멘틱 태그"를 사용하는 것이다. Simentic Web Simentic Web을 직역하면 "의미론적인 웹"이란 뜻이다. 이를 한국어로 제대로 번역하면 1) 기계도 이해할수 있는 웹, 2) 개발자가 한층 더 이해하기 쉬운 웹 이라고 번역하면 될것 같다. 예를 들면 과거에는 태그 하나로 모든 HTML 문서를 작성 하다 보니 HTML 한 페이지 안에 div태그만 수십개가 존재했고, 이를 해결하기 위해 "id, class" 등의 attributes.. 2022. 7. 18.
[Javascript] (LeetCode) 19. Remove Nth Node From End of List (Medium) [Javascript] 19. Remove Nth Node From End of List (LeetCode - Medium) 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } */ /** * @param {ListNode} head * @param {number} n * @return {ListNode} */ var removeNthFromEnd = function(he.. 2022. 7. 14.
[Javascript] LeetCode 876. Middle of the Linked List [Javascript] LeetCode 876. Middle of the Linked List 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } */ /** * @param {ListNode} head * @return {ListNode} */ var middleNode = function(head) { let node1 = head; let node2 = head; w.. 2022. 7. 14.
[VSCode] emmet 귀찮을 때 해결 방법(ReactJS, Typescript 코딩 할 때) ReactJS 배우는 중 평소엔 잘 사용하던 Emmet기능이 도움이 안되더라구요. 위 사진과 같을 때 아래 Router를 탭하면 자동으로 import 해주는데, Emmet을 눌러버리면 단순히 HTML태그가 만들어진다던지, 심지어 useState같은걸 만들때 미리 지정되어 있는 useState 코드만 생성되고 import는 안해주는.... 정말 귀찮은 상황이 펼쳐집니다.😭😭😭 해결 방법 이럴 때 설정을 만지면 귀찮은 상황에서 벗어날 수 있습니다. 윈도우 기준 ctrl + ,으로 설정을 들어가셔서 검색창에 emmet이라고 검색합니다. 아래 사진처럼 Show Expanded Abbreviation을 inMarkupAndStylesheetFilesOnly로 변경합니다. 그럼 이제 HTML/CSS에서만 Emmet.. 2022. 7. 13.
[Javascript] LeetCode 557. Reverse Words in a String III [Javascript] LeetCode 557. Reverse Words in a String III 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {string} s * @return {string} */ var reverseWords = (s) => s.split(' ').map((x) => x.split('').reverse().join('')).join(' '); 자스 너무 사기템 이잖아~~ 2022. 7. 13.
[Javascript] LeetCode 344. Reverse String [Javascript] LeetCode 344. Reverse String 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {character[]} s * @return {void} Do not return anything, modify s in-place instead. */ var reverseString = function(s) { for (let i = 0; i < Math.floor(s.length / 2); i++) { [s[i], s[(s.length - 1) - i]] = [s[(s.length - 1) - i], s[i]]; } }; 내 풀이 2 /** * @param {character[]} s * @return {vo.. 2022. 7. 13.
[Javascript] LeetCode 167. Two Sum II - Input Array Is Sorted [Javascript] LeetCode 167. Two Sum II - Input Array Is Sorted 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {number[]} numbers * @param {number} target * @return {number[]} */ var twoSum = function(numbers, target) { let lt = 0; let rt = numbers.length -1; let twoSum = 0; while (lt < rt) { twoSum = numbers[lt] + numbers[rt]; if (twoSum === target) { return [lt + 1, rt + 1]; } .. 2022. 7. 13.
오름차순 (Ascending order) vs 비 내림차순(non-decreasing order) Non-decreasing order LeetCode에서 문제를 푸는데 Non-decreasing order라는 말이 나왔다. 릿코드는 문제가 전부 영어라 절반은 추측하며 문제를 풀곤 해왔는데, "Non-decreasing order"라는 말은 한글로 해석을 해봐도 (비 내림차순) 해석이 안되어 구글링을 해보았다. 문제는 이전에도 같은 문제를 푼적이 있고, 오늘처럼 똑같이 구글링을 해서, 같은 글을 보며 이해하고 문제를 풀었다는 것이다. 학습능력이 없..? 😭 이럴땐 블로그에 포스팅을 하면 그래도 기억이 길게 남는다는걸 알기에 포스팅을 남긴다. 한 줄 해석 "비 내림차순으로 정렬된 배열" 은 "같은 숫자가 포함될 수 있다." 는걸 암시한 문장이다. 한 문장으로 다시 정리하면 "같은 숫자가 있을 수 있는 .. 2022. 7. 13.

티스토리툴바