본문 바로가기

TIL

TIL 052523

https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4

 

CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해

마진 상쇄는 흔히 '마진 겹침 현상'이라고도 불립니다. (혹자는 '마진 빡침 현상'이라고도 합니다) 하지만 인과관계로 볼 때, 마진이 겹치게 되면 상쇄가 일어나기 때문에 영미권에서는 '마진 상

velog.io

마진 빡침 현상 ㅋㅋㅋ쿠ㅜ큐


https://stackoverflow.com/questions/45100570/vscode-ctrl-s

 

VSCode Ctrl + S

I am working on a React project using a Visual Studio Code. When I press Ctrl+S in the Visual Studio Code to save file, it removes all the JavaScript formatting or scatters all the code in the file...

stackoverflow.com

ctrl+s로 저장할 때 마지막 빈 한줄이 없어지는 현상이 오늘 2번 발생

수정하다가 분명 파일을 원래 상태로 똑같이 되돌렸는데 M이 떠 있어서 이것저것 찾다가 맨 마지막 줄의 빨간 삼각형을 발견했다.

visual studio code의 settings에서 format을 검색한 후 Editor: Format On Save의 체크박스를 해제한다.

혹시 몰라서 마지막 한줄 문제를 해결하고나서는 다시 체크해놨다.


https://jinnynote.com/learn/web/css-center-align/

 

[CSS] element 중앙 정렬 방법(div, button 태그) – Jinny Note

element 중앙(가운데) 정렬 하는 법 element를 중앙 정렬하는 기본적인 방법은 element의 width 를 설정해주고 margin을 auto로 설정하여 왼쪽과 오른쪽의 margin을 같게 설정해주는 것이다. element의 width 설정

jinnynote.com

margin: auto로 글작성하기, ai 버튼을 중앙 정렬했다.


http://goldeastsun.blogspot.com/2015/10/button.html

 

button줄바꿈

<input type="button" value="Really Tall Button"> // this is not work on IE etc... <input style="width:100px;white-space: nor...

goldeastsun.blogspot.com

버튼 안의 텍스트 줄바꿈

<br>


https://velog.io/@mamba77/CSS-07.-Margin-Padding

 

[CSS] 07. Margin & Padding

이제는 요소에 여백을 스타일할 수 있는 margin, padding 이라는 property를 배워보도록 하겠습니다.모든 요소는 아래와 같이 margin, border, padding의 스타일을 갖고 있습니다.위의 그림을 해석해보자면,

velog.io

그냥 바깥쪽은 margin, 안쪽은 padding인줄 알았는데 border를 기준으로 안과 밖이었다.

어쨌든 margin-right 조절 실패 ㅜㅠ

margin-left는 되는데 왜 right만 안되는건지 모르겠다.

그냥 class="container"를 삭제 ㅜㅠ


https://heinafantasy.com/110

 

버튼 <button>에 onclick 링크걸기

버튼을 구현할 때 안에 태그를 사용하면 일부 브라우저에서 클릭이 되지 않는 문제가 있다. 이러한 경우 태그가 태그를 감싸는 형태로 순서를 바꾸어 사용해도 되지만 자바스크립트의 onclick 을

heinafantasy.com

href말고 onclick으로 링크 걸기!

현재창: onclick="location.href='article_detail.html?id=${article.id}'"

새창: onclick="window.open("링크주소")


https://velog.io/@haleyjun/JavaScript-filter-%EC%82%AC%EC%9A%A9%EB%B2%95

 

JavaScript : 🚰 filter 사용법

여러 가지 데이터 중에 원하는 데이터만을 뽑아내고 싶다면? 🤔 이처럼 기존의 데이터 집합에서 특정 조건을 만족하는 값만 반환받기를 원할 때 filter 메서드를 사용한다. ✍️ filter 란? 자바스

velog.io

let animals = [
  { species: 'mammalia', name: "cat" },
  { species: 'reptiles', name: "lizard" },
  { species: 'amphibia', name: "flog" },
  { species: 'mammalia', name: "dog" },
  { species: 'amphibia', name: "salamander" }
];

  let result = animals.filter((value) => value.species == 'mammalia')
  

console.log(result);

 

대괄호([])와 헷갈렸는데 점(.)으로 그냥 타고타고 가져오면 된다.

article의 작성자(user) 정보에 nickname도 있고 pk도 있으면 value.user.pk


https://stackoverflow.com/questions/3450593/how-do-i-clear-the-content-of-a-div-using-javascript

 

How do I clear the content of a div using JavaScript?

When the user clicks a button on my page, the content of a div should be cleared. How would I go about accomplishing this?

stackoverflow.com

전체 게시글을 먼저 지우고 내 게시글을 불러올 때 지우는 clear() 이런 함수가 따로 있을 것 같았는데 innerHTML=""으로 해결했다.

const mybutton = document.getElementById("main_mybutton")

mybutton.remove()

이렇게 element를 없앨수도 있다.

'TIL' 카테고리의 다른 글

TIL 052923  (0) 2023.05.29
TIL 052623  (0) 2023.05.27
TIL 052423  (0) 2023.05.25
TIL 052323  (0) 2023.05.23
TIL 052223  (0) 2023.05.22