# html

7404개의 포스트
post-thumbnail

tab 구현하기 1. class 바인딩

tab 구현하기 첫번째. class binding하여 현재 있는 탭 위치를 보여주는 기능 구현.

약 1시간 전
·
0개의 댓글
post-thumbnail

[2022.05.17] Canvas API - 간이 그림판 만들기

먼저, 캔버스 위에서 원하는 위치에 도형이 그려지는 것을 만들어 보자.테스트를 위해 캔버스에 클릭 이벤트 리스너와 클릭 이벤트 리스너에 들어갈 콜백 함수를 작성했다.이렇게만 작성하면 캔버스 위에서 아무 곳이나 클릭하면 캔버스 기준 x좌표 100, y좌표 100위치에 반

약 8시간 전
·
0개의 댓글

[TIL] 콘텐츠 모델, 시멘틱 마크업, 블록&인라인

HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있다. 이 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 된다.메타데이터(METADATA) 모델콘텐츠의 s

약 8시간 전
·
0개의 댓글
post-thumbnail

<img> 태그에 width와 height 속성 지정하는 것이 좋은 이유

글 잘 읽고 있는데 갑자기 이미지가 뙇 로딩되서 읽던 지점 찾아 스크롤 올렸다내렸다하는 귀찮은 상황 다들 겪어보셨는지..

약 9시간 전
·
0개의 댓글
post-thumbnail

문서 흐름

이전에 만들었던 홈페이지이다. 배경이미지를 추가했었는데, 가운데 있는 검은 박스의 콘텐츠를 배경 이미지 중간쯤에 위치하도록 하려면 어떻게 해야할까? 현재 검은 박스는 배경 이미지를 가지는 section 요소 안에 존재하고 있다. 그러므로 단순히 hero-content

약 12시간 전
·
0개의 댓글

Cascading의 두 가지 원칙

CSS는 Cascading Style Sheets의 약자로, 위에서 아래로 흐르는(cascading) 작동방식을 가지고 있다.

약 12시간 전
·
0개의 댓글
post-thumbnail

HTML 태그 기초 - <a> 태그

<a> 태그의 target 속성 그리고 이를 활용한 페이지 내 이동

약 13시간 전
·
0개의 댓글

[TIL] 폼 요소

이때까지 값을 입력하는 폼 요소를 배웠고, 이후는 그 외적인 폼 관련 요소들이다.폼 요소와 연결해주기 위함으로 사용되는데, 웹 접근성 향상에 도움이 되므로 필수적으로 선언 해줘야 한다. id 속성의 값과 해당 label요소의 for속성의 값을 동일하게 적어야 한다.아이

약 13시간 전
·
0개의 댓글
post-thumbnail

[HTML] 배경 지식

[TIL] HTML / W3C / 브라우저 에 관련한 간략한 설명

약 17시간 전
·
0개의 댓글

[수업 5월 셋째주 1일차] CSS-4

오늘은 position과 기본 레이아웃을 공부했다.\-position: relative\-position: absolutepostition에서 relative 와 absolute의 가 설명이 이해하기 어려워 구글링해보았다.relative는 요소를 원래 위치를 기준으로

약 18시간 전
·
0개의 댓글

Html 시작하기(2)

Html 시작하기 2

약 18시간 전
·
0개의 댓글

[수업 5월 둘째주 4일차] CSS-3

1. 학습내용 오늘은 Box-shadow와 애니메이션 효과를 주는 방식에 관해 배웠다. Box-shadow 각각 수치에 따라서 그림자를 짙게 주거나, 밖이 아닌 안쪽으로 주는 등의 옵션을 지정할 수 있다. transform과 transition으로 애니메이션 효과

약 19시간 전
·
0개의 댓글

20220509~20220515 WIL lee jaeguen

부트캠프의 첫 주가 지나갔다.몰려오는 지식은 머리를 스쳐 지나가고스치며 생기는 생채기는 상처인 듯 바쁨을 알려준는 상징인 듯어찌되었든 무언가 남고있다는 느낌은 든다.첫 주는 jquery 를 사용하여 웹 페이지에 one click으로 modal창을 띄우거나준비해놓은 창으

어제
·
0개의 댓글

HTML/CSS 코칭 스터디 1주차 간단한 학습 내용 정리

HTML/CSS 코칭 스터디 1주차 간단한 학습 내용 정리

어제
·
0개의 댓글

TIL(2022. 5.10) - form

form 태그는 자주 쓰이는 태그로 우리가 로그인할 때 보는 로그인창, 검색창을 이용할 때마다 보았을 것이다. form 태그에 대해서는 한 차례 정리해놓은 적이 있었다. (혼자 공부하면서 html 태그에 대해서 정리했을 때 정리했다) form `` : 주소 표시줄에

어제
·
0개의 댓글
post-thumbnail

[9일차] CSS transition, animation, transform, box-model, margin, border, display 속성들

transition, transform, animation, CSS boxmodel, border, margin 등의 속성에 대해 알아보자.

어제
·
0개의 댓글

[TIL]폼 요소

select 요소 선택 목록 상자 혹은 콤보 박스라고도 한다. 몇 개의 선택지를 노출시키고 하나를 선택하게끔 하는 요소로 리스트 태그와 비슷하다. select태그의 자식태그로 option태그가 들어온다. option태그에는 selected라는 속성이 있는데,<inpu

어제
·
0개의 댓글
post-thumbnail

[2022.05.15] Canvas API - 캔버스에 이미지 사용하는 방법

자바스크립트에서 이미지 객체를 만든 후, 캔버스에서 불러오면 된다.두 가지 방법 중 1개를 사용하면 메모리 상에 이미지 객체가 만들어진다.이제 HTML에서 img 요소를 작성하는 것처럼 자바스크립트에서 src를 넣어서 이미지의 경로를 작성해주면 된다.여기서 알아야 할

1일 전
·
0개의 댓글
post-thumbnail

[Javascript] 금융앱 토이 프로젝트 - 리팩토링

💡 리팩토링 import용 파일 생성 용도에 따른 js 파일 분리 JSON 데이터 처리 이벤트 처리 chart.js 라이브러리 ` → ` 변경 className, classList.add, setAttribute JSON 데이터 처리 부분 구조 변경 중

2일 전
·
0개의 댓글
post-thumbnail

[Javascript] 금융앱 토이 프로젝트

🪙 Fintech App 금융앱 화면을 웹으로 구현해보는 프로젝트이다. 5월 6일 저녁부터 시작해서 5월 10일까지, 주말을 제외한다면 약 3일동안 프로젝트를 진행해야 했다. Figma를 통해 받은 디자인 시안을 보고 HTML과 CSS로 화면을 구성했고, Javas

2일 전
·
0개의 댓글