# htmlcss

345개의 포스트
post-thumbnail

[Javascript] 이벤트 루프 (Event Loop)

💡 이 포스팅은 자바스크립트의 이벤트 루프에대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.이벤트 루프에대해 공부하고 정리합니다.이번 포스팅에서는 브라우저의 싱글 스레드 동작이 정확히 어떻게 이루어지는지 이

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

[HTML/CSS] SEO 최적화

인터넷 환경이 점점 발달함에 따라 웹 상에는 엄청난 양의 자료들이 넘쳐나기 시작했고, 방대한 자료 중에서 자신이 원하는 자료를 찾는 것이 힘든 일이 되었다.웹에 존재하는 많은 양의 정보 중에서 사용자가 원하는 정보만을 여러 웹 사이트나 웹 페이지 등에서 검색해 주는 시

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

[Javascript] 폼과 폼 이벤트 (Form)

💡 이 포스팅은 폼(Form) 대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.폼과 폼 이벤트에 대해 공부하고, 내용을 정리합니다.이번 포스팅에서는 폼에 대한 것들을 정리하고, 간단한 예제를 작성해봅니다.H

2022년 5월 12일
·
0개의 댓글
post-thumbnail

CSS 기초 총정리

CSS는 Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어입니다.선택자: 디자인을 적용할 HTML 영역속성: 어떤 디자인을 적용할지 정의속성값: 어떤 역할을 수행할지 구체적으로 명령 1\. Inli ne Style Sheet\*\

2022년 5월 10일
·
0개의 댓글
post-thumbnail

HTML 기초 총정리

웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격웹 접근성: 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법HTML이란 Hyper Text Mar

2022년 5월 4일
·
0개의 댓글
post-thumbnail

[Javascript] 마우스 이벤트 / 드래그 앤 드롭 (Drag and drop)

💡 이 포스팅은 이벤트 마우스 이벤트 중 드래그 앤 드롭 대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.마우스 이벤트와 드래그 앤 드롭에 대해 공부하고, 간단한 예제를 작성합니다.이번 포스팅에서는 마우스

2022년 5월 4일
·
0개의 댓글

Accessibitliy and Semantic tag!

요새 웹접근성을 고려하며 개발하다보니 html tag의 중요성에 대해 많이 깨닫게 되었다.의미있는 태그를 사용하면 우선 보기 좋다! 확실히 구조가 보기 좋아야 스타일 적용도 쉬워지고, 웹접근성 고려하기도 편해지는 것 같다.팀에서 웹접근성에 대한 관심도가 매우 높고, 페

2022년 4월 29일
·
0개의 댓글
post-thumbnail

[Javascript] 이벤트 버블링과 캡쳐링 그리고 위임(Bubbling/Capturing/Delegation)

💡 이 포스팅은 이벤트 버블링/캡쳐링 대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.이벤트 버블링과 캡쳐링, 위임에 대해 공부하고, 간단한 예제를 작성합니다.이번 포스팅에서는 이벤트가 발생할 때 일어나는

2022년 4월 28일
·
0개의 댓글
post-thumbnail

[HTML/CSS] Day32. IR기법 🫥

오늘은 웹접근성과 관련된 주제를 조금 다루어보려고 한다.웹접근성을 위한 IR기법이다.아마 IR기법에 대해서는 전 게시물에 한번 언급을 했었던 걸로 기억하고 있다. 하지만 단독으로 다루지 않았기 때문에 이번에 정리해보도록 하겠다.IR은 Image Replacement의

2022년 4월 28일
·
0개의 댓글
post-thumbnail

[HTML/CSS] Day31. 이미지 스프라이트 기법 ✂️

그동안 많은 과제들이 오고 가고 해서 여유시간이 없었는데 드디어 여유로운 시간이 있어서 오랜만에 정리를 한다. 하얗게 불태운다는 것이 이런 것일까..?🔥 아무튼 오늘은 "이미지 스프라이트 기법"에 대해서 살펴볼 것이다. 이미지 스프라이트 기법이란? 스프라이트(Sp

2022년 4월 27일
·
0개의 댓글
post-thumbnail

[Javascript] DOM(Document Object Model)

💡 이 포스팅은 DOM에 대해 공부하며 정리한 내용입니다. 혹여나 일부 올바르지 않은 정보가 있을 시에 지적해주시면 정정토록하겠습니다.DOM에 대한 이해와 접근 방법에 대해 공부하고, 간단한 프로젝트를 제작합니다.이번 포스팅에서는 프론트엔드 개발의 꽃🌻인 DOM에

2022년 4월 20일
·
0개의 댓글
post-thumbnail

[CSS]스크린리더 사용자를 위한 IR(Image Replacement) 테크닉

보여지지 않게 설명하기

2022년 4월 19일
·
0개의 댓글
post-thumbnail

CSS가 까다로운 input, select 박스

스타일링이 까다로운 input, select 박스를 꾸미는 법

2022년 4월 19일
·
0개의 댓글

-또는- 깔끔하게 만들기

!codepenveamcamp/embed/dyJQwWr?default-tab=html%2Cresult

2022년 4월 18일
·
0개의 댓글
post-thumbnail

[HTML/CSS] Day20. Flex(2) 🤷‍♂️

자, 다시 flex 정리 시간이다.이번에 다룰 flex 속성은 flex-basis, flex-shrink, flex-grow이다. 이번 속성들은 컨테이너 요소가 아닌 "자식 요소(flex-item)"에 적용하는 속성이다.이 부분은 flex를 사용할 때 웬만하면 건드리지

2022년 4월 17일
·
2개의 댓글
post-thumbnail

[HTML/CSS] Day19. Flex(1) 😎

오늘은 CSS에서 가장 많이 사용하고 있는 속성인 flex! TIL을 기록하지도 않던 나에게 flex 속성을 나 스스로 정리할 날이 올 줄이야..! 오늘 확실히 정리하고 이해해보도록 하겠다! 🔥 Flex란? 🤔 flex는 '유동적인'이라는 뜻의 flexible에

2022년 4월 16일
·
1개의 댓글
post-thumbnail

[HTML/CSS] Day18. Position 🪑

오늘은 position 속성에 대해서 정리를 해볼 것이다.개인적으로 가장 재미있었던 속성이다. 아무런 신경을 쓰지 않고 이동시키는게 편해서 그런 것 같다.😊position은 문서 상에서 요소를 배치하는 방법 중 하나이다.position을 이해하려면 flow에 대해서

2022년 4월 15일
·
2개의 댓글

CSS Layout

참고 :https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/IntroductionCSS : Cascading Style Sheets (Cascading 은 연속적인에 가깝다)CSS란 무엇입니까?CSS는 사용

2022년 4월 15일
·
0개의 댓글
post-thumbnail

[HTML/CSS] 브라우저 렌더링 과정

대부분의 브라우저는 렌더링을 수행하는 렌더링 엔진(Rendering Engine) 을 가지고 있다. 모든 브라우저가 같은 렌더링 엔진을 사용하지 않고, 파이어폭스는 게코(Cecko), 사파리는 웹킷 (Webkit)을 사용하고 있다.각각의 렌더링 엔진들은 웹 표준에 따라

2022년 4월 15일
·
0개의 댓글
post-thumbnail

[HTML/CSS] JPEG, PNG, TIFF, SVG 차이점

JPEG픽셀 (레스터)손실 압축일반적인 웹 이미지🟢 용량이 적음, 로딩이 빠르다.🔴 화질이 깨짐PNG픽셀(레스터)무손실 압축정교한 웹 그래픽🟢 고화질🔴 용량이 크다. 로딩이 느리다.SVGXML (벡터)무손실 압축정교환 웹 그래픽. 자유로운 확대, 축소🟢 PNG

2022년 4월 14일
·
0개의 댓글