neda의 블로그

BEM BEM (Block, Element, Modifier) is a component-based approach to web development BEM 방법론은 요소(component)기반의 접근 방식으로 빠른 요소 접근을 통해 개발하기 쉽도록 하는 것이 목표이다. BEM을 구성하는 엔티티로는 Block, Element, Modifier가 있다. Block의 네이밍 Block의 목적에 중점 상태나 환경에 관한 것 X CSS 태그, ID 선택자 사용 X block-name Element의 네이밍 요소란? 블록을 이루는 부분으로서 따로 사용할 수 없는 것 요소는 블록의 자손으로 존재하며 요소는 블록 외부에서 스스로 사용될 수 없다. 블록 이름과 요소 이름은 이중 밑줄(__)로 구분 요소 이름은 중첩 되..

requestAnimationFrame requestAnimationFrame(callback) 는 Canvas에서 애니메이션을 위한 함수로 일반적으로 초당 60회의 콜백 함수를 실행하지만 현재의 대다수의 브라우저에서는 디스플레이의 주사율을 파악해 그만큼 콜백을 반복 실행한다. 애니메이션이 지속적으로 이루어지기 위해서는 callback 함수 내에서 다시 requestAnimationFrame(callback) 호출해야 한다. cancelAnimationFrame 이러한 애니메이션을 중지하기 위해서는 window.cancelAnimationFrame(requestID) 를 호출하여 중지시킬 수 있다. let raf; let start; let count = 0; function draw() { consol..

과거 1990년대부터 JPEG(Joint Photographic Experts Group)에서 만든 이미지를 위한 파일 확장자는 jpg jpeg jpe jif jfi jfif 등이 있지만 현대에 와서든 크게 구분이 있어 보이진 않는다. 일단 jpg는 확장자명 제한 때문에 jpeg를 줄여쓴 것이고, jfif도 jpg와 단순히 확장자 변경을 해도 에러는 발생하지 않는 것 같다. 확장자 JPEG(JPG) JFIF 풀네임 Joint Photographic Experts Group JPEG File Interchange Format 목적 웹상에서 이미지 저장 및 전송 인터넷을 통한 JPEG파일 저장 및 전송 설명 데이터를 손실 압축 하는 방법(알고리즘) JPEG 인코딩을 이용한 파일 교환 방식 하지만 근본적으로 ..

html, css만으로 태극기 그리기 가로:세로 비율 = 3:2 대각선 각도는 약 33.69deg. -33.69deg 따라서 대각선에 수직인 건곤감리의 각도는 123.69deg, -123.69deg HTML 삽입 미리보기할 수 없는 소스

전체 소스 코드) GitHub - qaws7791/html_practice Contribute to qaws7791/html_practice development by creating an account on GitHub. github.com 완성 이미지) 참고 사이트) https://www.data.go.kr/data/15084084/openapi.do 기상청_단기예보 ((구)_동네예보) 조회서비스 초단기실황, 초단기예보, 단기((구)동네)예보, 예보버전 정보를 조회하는 서비스입니다. 초단기실황정보는 예보 구역에 대한 대표 AWS 관측값을, 초단기예보는 예보시점부터 6시간까지의 예보를, www.data.go.kr https://gist.github.com/fronteer-kr/14d7f779d52a21..

목표: html, css로 날씨 위젯 만들기 디자인은 아래의 영상을 참고하여 만들었음 1. HTML과 css로 디자인하기 완성이미지) index.html) 20℃ Temperate 30% Probability 2.2m/s Wind speed Date : 2022년08월11일01:21 style.css) @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lato', sans-serif; } body { display: flex; justify-content: center; align-i..

목표: JAVASCRIPT를 이용해 Open API 요청하고 응답받기 1. fetch를 이용해 Open API 요청하기 1.1 변수를 조립해 url 만들기 먼저 weather 폴더를 만들고 > 안에 index.html, index.js, style.css를 생성한다. index.js 파일을 열어 api 요청 변수를 변수로 만들어 저장하고 const serviceKey ="76zDuaNaxv5VU7qa"; let numOfRows = "12"; // 1시간당 기상 정보가 최저기온,최고기온을 제외하면 12개이므로 12개가 편하다 let pageNo = "1"; // 페이지 번호 let dataType = "JSON"; // 요청자료형식 let base_date = "20220810"; // 발표일자 let ..

목표: 사용자의 위치한 곳의 기상 정보를 가져와 위젯 만들기 1. 기상청 단기예보 API 발급하기 1.1 공공데이터 포털에서 로그인 후 "활용신청"을 눌러 Open API 신청하기 기상청_단기예보 ((구)_동네예보) 조회서비스 초단기실황, 초단기예보, 단기((구)동네)예보, 예보버전 정보를 조회하는 서비스입니다. 초단기실황정보는 예보 구역에 대한 대표 AWS 관측값을, 초단기예보는 예보시점부터 6시간까지의 예보를, www.data.go.kr 신청이 완료되면 api 요청시 사용하는 인증키가 발급된다. 1.2 발급받은 서비스 인증키와 참고문서 확인하기 참고문서는 Open API를 활용하기 위한 가이드이므로 필수로 다운로드하여 확인한다. 여기서 인증키는 Encoding을 위한 일반 인증키를 사용한다. 2. 발..

Multi-columns Layout란 요소 안에서 여러 개의 컬럼을 가지도록 할 수 있는 CSS 레이아웃 column-count column-count: 3; 컬럼 개수 지정 가능한 값으로는 auto 와 (숫자값) column-gap column-gap: 10px; column-gap: 20%; 컬럼간의 사이 공백 가능한 값으로는 normal (기본값으로 1em) , (px,em,rem 등), (%) column-width column-width: 100px; 하나의 컬럼이 가질 수 있는 최소 너비 지정 컬럼 개수를 늘어날 때 컬럼의 너비가 이 값보다 작아지려 하면 컬럼 개수가 늘어나는 것을 막는다. 가능한 값으로는 auto (기본값), (px,em,vw등) column-rule column-rule:..