# htmlcss
[Javascript] 이벤트 루프 (Event Loop)
💡 이 포스팅은 자바스크립트의 이벤트 루프에대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.이벤트 루프에대해 공부하고 정리합니다.이번 포스팅에서는 브라우저의 싱글 스레드 동작이 정확히 어떻게 이루어지는지 이
[HTML/CSS] SEO 최적화
인터넷 환경이 점점 발달함에 따라 웹 상에는 엄청난 양의 자료들이 넘쳐나기 시작했고, 방대한 자료 중에서 자신이 원하는 자료를 찾는 것이 힘든 일이 되었다.웹에 존재하는 많은 양의 정보 중에서 사용자가 원하는 정보만을 여러 웹 사이트나 웹 페이지 등에서 검색해 주는 시
[Javascript] 폼과 폼 이벤트 (Form)
💡 이 포스팅은 폼(Form) 대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.폼과 폼 이벤트에 대해 공부하고, 내용을 정리합니다.이번 포스팅에서는 폼에 대한 것들을 정리하고, 간단한 예제를 작성해봅니다.H
CSS 기초 총정리
CSS는 Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어입니다.선택자: 디자인을 적용할 HTML 영역속성: 어떤 디자인을 적용할지 정의속성값: 어떤 역할을 수행할지 구체적으로 명령 1\. Inli ne Style Sheet\*\
HTML 기초 총정리
웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격웹 접근성: 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법HTML이란 Hyper Text Mar
[Javascript] 마우스 이벤트 / 드래그 앤 드롭 (Drag and drop)
💡 이 포스팅은 이벤트 마우스 이벤트 중 드래그 앤 드롭 대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.마우스 이벤트와 드래그 앤 드롭에 대해 공부하고, 간단한 예제를 작성합니다.이번 포스팅에서는 마우스
Accessibitliy and Semantic tag!
요새 웹접근성을 고려하며 개발하다보니 html tag의 중요성에 대해 많이 깨닫게 되었다.의미있는 태그를 사용하면 우선 보기 좋다! 확실히 구조가 보기 좋아야 스타일 적용도 쉬워지고, 웹접근성 고려하기도 편해지는 것 같다.팀에서 웹접근성에 대한 관심도가 매우 높고, 페
[Javascript] 이벤트 버블링과 캡쳐링 그리고 위임(Bubbling/Capturing/Delegation)
💡 이 포스팅은 이벤트 버블링/캡쳐링 대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.이벤트 버블링과 캡쳐링, 위임에 대해 공부하고, 간단한 예제를 작성합니다.이번 포스팅에서는 이벤트가 발생할 때 일어나는
[HTML/CSS] Day32. IR기법 🫥
오늘은 웹접근성과 관련된 주제를 조금 다루어보려고 한다.웹접근성을 위한 IR기법이다.아마 IR기법에 대해서는 전 게시물에 한번 언급을 했었던 걸로 기억하고 있다. 하지만 단독으로 다루지 않았기 때문에 이번에 정리해보도록 하겠다.IR은 Image Replacement의
[HTML/CSS] Day31. 이미지 스프라이트 기법 ✂️
그동안 많은 과제들이 오고 가고 해서 여유시간이 없었는데 드디어 여유로운 시간이 있어서 오랜만에 정리를 한다. 하얗게 불태운다는 것이 이런 것일까..?🔥 아무튼 오늘은 "이미지 스프라이트 기법"에 대해서 살펴볼 것이다. 이미지 스프라이트 기법이란? 스프라이트(Sp
[Javascript] DOM(Document Object Model)
💡 이 포스팅은 DOM에 대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.DOM에 대한 이해와 접근 방법에 대해 공부하고, 간단한 프로젝트를 제작합니다.이번 포스팅에서는 프론트엔드 개발의 꽃🌻인 DOM에
[HTML/CSS] Day20. Flex(2) 🤷♂️
자, 다시 flex 정리 시간이다.이번에 다룰 flex 속성은 flex-basis, flex-shrink, flex-grow이다. 이번 속성들은 컨테이너 요소가 아닌 "자식 요소(flex-item)"에 적용하는 속성이다.이 부분은 flex를 사용할 때 웬만하면 건드리지
[HTML/CSS] Day19. Flex(1) 😎
오늘은 CSS에서 가장 많이 사용하고 있는 속성인 flex! TIL을 기록하지도 않던 나에게 flex 속성을 나 스스로 정리할 날이 올 줄이야..! 오늘 확실히 정리하고 이해해보도록 하겠다! 🔥 Flex란? 🤔 flex는 '유동적인'이라는 뜻의 flexible에
[HTML/CSS] Day18. Position 🪑
오늘은 position 속성에 대해서 정리를 해볼 것이다.개인적으로 가장 재미있었던 속성이다. 아무런 신경을 쓰지 않고 이동시키는게 편해서 그런 것 같다.😊position은 문서 상에서 요소를 배치하는 방법 중 하나이다.position을 이해하려면 flow에 대해서
CSS Layout
참고 :https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/IntroductionCSS : Cascading Style Sheets (Cascading 은 연속적인에 가깝다)CSS란 무엇입니까?CSS는 사용
[HTML/CSS] 브라우저 렌더링 과정
대부분의 브라우저는 렌더링을 수행하는 렌더링 엔진(Rendering Engine) 을 가지고 있다. 모든 브라우저가 같은 렌더링 엔진을 사용하지 않고, 파이어폭스는 게코(Cecko), 사파리는 웹킷 (Webkit)을 사용하고 있다.각각의 렌더링 엔진들은 웹 표준에 따라
[HTML/CSS] JPEG, PNG, TIFF, SVG 차이점
JPEG픽셀 (레스터)손실 압축일반적인 웹 이미지🟢 용량이 적음, 로딩이 빠르다.🔴 화질이 깨짐PNG픽셀(레스터)무손실 압축정교한 웹 그래픽🟢 고화질🔴 용량이 크다. 로딩이 느리다.SVGXML (벡터)무손실 압축정교환 웹 그래픽. 자유로운 확대, 축소🟢 PNG