마크업

16진수 컬러코드

https://codeya.tistory.com/54 포토샵에서 #ffffff 같은 RGB 컬러값 표현방법이 궁금해요. (16진수와 2진수 표현) 포토샵으로 사진을 수정하거나 워드 같은 앱에서 문서작업을 하면서 글자의 색을 변경할 때 "#ffffff" 같은 값들을 보신 적 있으시죠? 이 값이 어떤 의미인지 그리고 왜 이런 식으로 표현하는지 알 codeya.tistory.com https://jimnong.tistory.com/181

[CSS] 백그라운드 이미지, margin-auto

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images 배경 이미지 크기 조정하기 - CSS: Cascading Style Sheets | MDN CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. background-size 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다. 이미지는 원하는대로 developer.mozilla.org 로그인 페이지 아이디, 비밀번호를 입력해주세요. 로그인 ID = PW = 로그인하기 margin auto auto; 와 text-align: center; 의 차이 1. text-align: cen..

[HTML & CSS][DOM] CSSStyleDeclaration 알아보기

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration 참고 블로그 (학습 내용) [2022.05.19] DOM - 노드 CSS 스타일(CSSStyleDeclaration), 클래스 추가/삭제 하기(className, classList) 문서 객체 모델(DOM)을 자바스크립트로 조작하여 노드의 CSS style과 class를 추가/삭제 하는 방법이다.자바스크립트에서 DOM을 조작하여 노드에 style을 넣어볼 것이다.먼저, ul태그에 스타일을 넣어보 velog.io CSSStyleDeclaration 쉽게 말해, 노드 css 스타일! HTMLElement 객체의 style 프로퍼티에 의해서 참조된다. 아래와 같이 자바스크립트에서 DOM을..

[HTML][Canvas] 태그 Canvas 알아보기

This browser doesn't support canvas 그리고 위의 DOM 객체를 가져와서 context를 뽑아낸 다음에 조작해서 써야한다. var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); context를 가지고 여러 가지 도형이나 그림을 그리면 된다. : fillRect로 채워진 사각형, fillText로 텍스트, moveTo로 시작점으로 간다음 lineTo로 이은 선, rect로 속이 빈 사각형을 그려주기 var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); context.fillR..

[Css][반응형 웹] flex 이용하여 div 박스를 원하는 위치로 내리기

기본 스펙 : react 사건의 전말 이 포스팅은 원하는 마크업을 위해 좌충우돌 css를 만졌던 과정을 담은 작업기이다. 도시별 현재 날씨 정보 앱페이지를 만드는 과정 중에 div 박스를 적절한 위치로 내리고 싶었다. CSS position [css] position 요소의 위치 설정 CSS / POSITION position 특징 요소의 위치를 마음대로 설정하기 위한 속성 static, relative, absolute, fixed, sticky로 position에 값을 줄 수 있다. 위치를 설정할 때에는 top,right,left,bottom을 사용할 수 있다. 요소 itjy2.tistory.com 위 포스팅을 참고하여, div를 원하는 위치에 옮겨보았다. .container{ position:rel..

[HTML 좌표] x, y, ox, oy, Height, width

https://stackoverflow.com/questions/57068928/opencv-rect-conventions-what-is-x-y-width-height OpenCV Rect conventions – What is x, y, width, height? I'm studying the OpenCV tutorial found here. I am a little confused about what is represented in the following line of code: let trackWindow = new cv.Rect(150, 60, 63, 125); I'm not sure what the stackoverflow.com https://stackoverflow.com/questions..

[HTML][CSS] box model

안쪽 여백은 패딩 바깥 여백은 마진 실제 보여지는 컨텐츠는 체감상 border까지 이다. margin은 다른 element 와의 간격 또한 패딩과 마진은 속기형으로 작성 가능 1px 0px 0px 10px 등.. (속기는 시계방향 위->오른쪽->아래->왼쪽) .header-box { width: 10px; height: 10px; background-color: rgb(155, 204, 204); border: 5px black solid; padding: 50px 70px 50px 70px; margin: 1px 0px 0px 10px; } test 해볼 html 태그 JS Test Page 디자인 따라 다르겠지만 border style은 solid가 가장 대중적으로 쓰인다. border-radius:..

[CSS] CSS Variable --

https://developer.mozilla.org/en-US/docs/Web/CSS/--* 홈페이지 만들면서 겹치는 css style속성들을 하드코딩하지 말고 상수로 잘 정의해주도록 하자! 또한 css 변수명은 카멜케이스로 쓰기 않고 데시 (-)로 단어들을 연결한다. ex) redBar (x) ex) red-bar (O) 자주 쓰는 font-middle-size를 32px로 하여 이걸 상수화 시켜서 필요할 때 마다 가져다 쓰고 싶다고 가정하자, 그려면 var 이라는 css에서 제공해주는 함수를 이용해야 한다. .red-viewer { --font-size : 32px; font-size : var(--font-size); } .red-viewer { --font-size : 32px; font-siz..

웹페이지 아이콘 변경하기

폴더 만들어서 이미지 파일 넣고 헤드 안에 위와 같이 작성해주면 된다!

[css] png 파일 이미지만 보이게 처리하기

Blue Yellow Pink .btn { background-color: transparent !important; border: none !important; outline: none !important; cursor: pointer !important; }