element의 style 태그 내에 있는 속성들의 값을 읽기위해 사용하는 method입니다. element.style."attribute"의 경우, 특정 값을 할당할 때는 사용할 수 있지만 현재 element.style."attribute"내에 들어있는 값을 읽어오는 것은 불가능하기 때문입니다. * 1. 문법 let style = window.g...

사용자와 웹페이지 간의 상호작용하는 모습을 예제를 통해 HTML/CSS/JavaScript가 어떻게 쓰이는지 포스팅하겠습니다. * 1. Log-in 버튼 활성화 1-1. 소스 코드 HTML 기본 클래스였던 unactivatedLoginColor가 삭제되고 activatedLoginColor가 추가된 것을 확인할 수 있습니다. * 실제...

HTML/CSS에서 div 3개를 나란히 정렬하는 방법에 대해 포스팅하겠습니다. ** 결과 스크린샷, 2019-10-04 17-55-47.png 가운데 요소에 margin값을 줘서 1번 방법과 같은 결과가 나오도록 했습니다. flex는 부모요소의 display를 flex로 설정하고 자식요소의 flex값을 설정하는 방법입니다....

aac063eef02bb1f9674bf510c84312c2.jpg game * 백그라운드 이미지 가운데에 넣기 * 귀신내려오는 중 스크린샷 2019-10-05 오후 2.14.57.png :: 뭔가 신기해. 뭔가 만들어내고 있는 것 같아서 기분도 묘하고... 되게 단순해 보이는 데 저렇게 이미지를 띄우고 움직이게 하는 데까...

검사항목 (적절한 대체 텍스트 제공) 텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다. IR기법 .blind{position:absolute;line-height:0;overflow:hidden;} .blind{position:absolute;top:-1000em;line-height:0;overflow:hid...

HTML/CSS 놓치기 쉬운 포인트 1. [block] vs [inline] div와 다르게 span은 line break 되지 않는다. div 같은 태그를 block element, span과 같은 태그를 inline element라고 한다. 2. font-family 설정해줄 때 font-family: Georgia, "Times Ne...

f73aa992a62349e55068249570d83b69.jpg [HTML//CSS] ; input & textarea * Input ; type, placeholder 속성(attribute)가 있다 _ _ :: 크게 흔들렸고, 길게 대화를 나누었다. 처음와서 고민은 진도와 실력의 갭이 과연 메꾸어 질 수 있는 가 였는 데 고새 ...

444fd906e02899c7f1afc1b4b4e924d8.jpg [CSS] ; 상속(Inheritance) 문자 그대로의 상속, css의 특징으로 부모에게 적용된 효과가 그 자식에게도 동일하게 적용이 될 수 있다. 가령, body태그에 글씨 색상을 핑크로 해놓으면 그 밑의 p태그 등 자식 태그들도 자연스럽게 핑크색 글씨를 갖게 됨. 물론, ...

스크린샷 2019-09-05 오후 9.08.01.png [CSS] ;Margin & Padding & Border 9921C3505A42FB1B07.png - MARGIN ; ELEMENT사이의 여백. 마진에 값을 주면 그 만큼의 거리만큼 다른 엘리먼트와의 거리가 멀어지게됨. - BORDER : 테두리. ELEMENT의 경...

테이블 태그 처음부터 끝까지 혼자 만드는 것을 목표로 삼기 때문에 html, css 등 많은 것들을 잘 다룰 수 있도록 노력은 하고 있지만 "이런 것들은 사용하지 않겠지.."하며 넘기는 것들이 있다. 테이블 태그도 사용할 일이 없을 줄 알았는데, 어드민 페이지를 만드는데 있어서 이 태그가 이렇게 중요할 줄이야.. 그래서 오늘은 테이블 태그를 다시 공부하고...

div VS span deafault값으로 div는 한줄을 차지한다 deafault값으로 span태그는 컨텐츠 크기만큼 공간을 차지한다. css로 자유롭게 스타일링 할 수 있지만 기본적인 컨텐츠 크기가 다르다 img: 이미지 삽입 이미지태그는 닫는 태그가 필요없다. 20190829_122356.png...

1. CSS 1) Semantic & Non-semantic CSS 스타일에서 element 요소 중에서는 자체적으로 의미를 가지는 semantic elements와 아무런 의미를 내포하지 않고 id() 또는 class(.)에서 해당 요소의 이름을 부여한다. - non-semantic elements: div and span - semanti...

잠시 살펴보는 둘둘의 1주차 타임라인 in WECODE 1일차 : html/css 그리고 js 문제 2일차 : js 3일차 : DOM&event 과제 끝 + 미니터 html 틀짜기 4일차 : 미니터 css 수정(flex!!!) + 이벤트로 고뇌에 빠지기 5-6일차 : DOM구조 및 미니터에 이벤트 넣기 이 순서대로 한지 모르겠어요.. 시간이 넘나 빠르고...

브라우저는 2차원 좌표시스템을 따르고 있고, DOM에서 지원하는 Canvas 객체를 이용해 점, 선, 도형, 텍스트, 이미지 등을 조작할 수 있다. 좌표 시스템 coordinate space 좌표 시스템 원점은 좌측상단인 (0, 0) 좌표이고, 모든 요소(도형)는 원점을 기준으로 위치하게 된다. Context란 무엇인가 Conte...

CSS3는 2011년 6월 7일 최초 Color 모듈이 발행된 이후로 꾸준히 업데이트 되고있는 최신 CSS 기능이다. 현재도 꾸준히 업데이트가 되고 있으며, CSS3의 등장으로 인해 기존에 사용되던 Bootstrap과 같은 CSS 라이브러리는 J-Query와 함께 레거시가 되었다. 레거시- 신규 기술 등장으로 인해 기존 기술이 도태되는 현상. 그 중에서,...

새로운 부트캠프에서 새로운 과정을 시작하였으니, 새롭게 시작한다는 마음으로 velog를 시작하게 되었다. 사족은 이쯤에서 끝내도록 하고, 어제 배운 HTML과 CSS중, 새롭게 알게된 부분에 대해 정리 해 보고자 한다. + Indentation & Non-breaking Space(&nbsp or &160) + Non-breaking Space - 줄...

Form 태그에서 Submit 처리하는 방법은 세 가지 존재한다. 1. form 태그 onSubmit 속성에서 함수 호출, 반환값(false, true) 따라 요청여부가 결정 -요청 전, 폼 유효성 검사위해 유용 - 이벤트 순서 : first = second = form 태그 onSubmit 참고 - https://www.w3sc...

HTML에서 알지 못했던 부분에 대해 정리하는 글이다