profile
untiring_dev
post-thumbnail

[HTML/CSS] IR기법 🫥

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

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

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

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

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

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

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

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

[HTML/CSS] Flex(1) 😎

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

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

[HTML/CSS] Position 🪑

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

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

[HTML/CSS] Background의 속성 🏞

오늘은 헷갈렸던 몇 가지 background 속성에 대해서 정리를 해볼 것이다.background 속성은 말그대로 "배경"을 이미지 파일을 이용해서 삽입하는 것을 말한다.대체적으로 이전 게시물에서 한번 정리를 해서 겹칠 수도 있지만 background 속성은 디자인적으

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

[HTML/CSS] Text 속성 ✍️

Text는 레이아웃을 결정하는데 중요한 역할을 할 때가 많다. 대표적인 것으로 "가독성"을 책임지는 것이다. 그래서 이번엔 Text와 관련된 대표적인 속성들을 정리해보도록 하겠다. Text 용어 텍스트의 내부에는 명칭이 존재한다. 어센더(ascender) : 소문

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

[HTML/CSS] Font 관련 링크 모음

Google fonts구글 폰트는 가장 대표적인 웹 폰트 사이트입니다. 이곳에서는 라이선스에 대한 설명을 제공하며, 원하는 폰트 굵기 스타일을 선택하여 사용할 수 있습니다.Google Fonts눈누눈누는 상업용 무료 한글 폰트 사이트로, 상업적으로 사용할 수 있는 무료

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

[HTML/CSS] 단위(Units) 📏

우리는 HTML로 마크업을 한 후 스타일을 주기 위해 CSS를 작성하는데 보통 단위(Units)을 정말 많이 사용한다. px라던지, 최근에야 자세하게 배웠던 em과 rem 등 😄그런데 우리가 자주 쓰는 단위보다 더 다양한 단위가 있다고 한다.개인적으로 수업을 들으면서

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

[HTML/CSS] Display:none VS Overflow:hidden 🔥

처음 제목을 쓰고 "둘 다 안보이게 하는 속성이긴 한데.. overflow:hidden은 넘치는 부분을 가려주는 역할이 아닌가?" 라는 생각이 바로 들었다.포트폴리오를 급하게 만들던 나에겐 이 두 속성은 나에게 친숙한 속성이라 어느정도 이해하기는 쉬웠다.하지만 앞의 m

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

[HTML/CSS] 마진 겹침 현상, Margin collapsing 🤨

설명하기 전 소스코드를 먼저 보자. 출력 결과를 보면 클래스명 .first와 .second의 width가 100px, height가 100px인 정사각형의 <div>가 있다. .first에는 margin-bottom이 30px이 설정되어 있고 .second에는 m

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

[HTML/CSS] About CSS 👨‍🎨

이번 게시물은 CSS의 정의와 CSS를 HTML의 요소에 적용시키는 법을 정리할 것이다.CSS는 Cascading Style Sheets의 약어이다. Cascade란 폭포란 뜻인데 이것에서 유추가 가능하다.CSS는 폭포수가 아래로 떨어질 때처럼 CSS에서 스타일이 적용

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

[HTML/CSS] Block Level vs Inline 🧱

HTML 요소의 종류를 배워보자!

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

[HTML/CSS] Tabular data 📊

오늘은 <table>과 관련된 태그와 속성을 정리해보았다!

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

[HTML/CSS] Forms (2) 📝

forms에 대해서 배워보자!

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

[HTML/CSS] Background-image에 대해 몰랐던 사실 😎

오늘은 background-image에 대해 몰랐던 사실들을 한번 알아보도록 하자.CSS의 대가, 유튜브 채널 '빔캠프'의 이종찬 강사님의 강의를 듣고 정리해보았다.우선 HTML/CSS 소스코드는 이렇다.우선 위의 소스코드의 결과는 이렇다.결과를 보면 배경이미지로 적용

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

[HTML/CSS] 로그인 페이지 구성 📚

github에 이번 과제였던 로그인 페이지를 커밋했다.시간은 생각보다 오래 걸렸던 것 같다.. 잔잔한 실수도 많고 깃허브에 올리는 것도 조금 서툴기도 하고..그래도 올린게 어디야..ㅎㅎㅎ링크를 달아놓아서 문제가 발생하면 업데이트 해야겠다.

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

[HTML/CSS] CSS Basic 🌷

오늘의 강의는 특강으로 이루어졌다. 특강을 진행하는 강사님은 무려 유튜브채널 "빔캠프"의 이종찬 강사님! 빔캠프

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

[HTML/CSS] Forms (1) 📝

우리는 인터넷을 사용하면서 많은 로그인과 회원가입을 한다. 많은 포털 사이트 뿐만 아니라 온라인 쇼핑몰 등에서 말이다. 많은 로그인과 회원가입의 과정 중에 이제 우리가 배우는 form과 관련된 태그들이 있다. 하나씩 살펴보도록 하자!&lt;form>은 기본적으로 정보를

2022년 3월 31일
·
0개의 댓글
·
post-thumbnail

[HTML/CSS] Embedded Content(2)

이미지 관련 태그에 이어 이번엔 미디어 관련 태그를 배워보자.미디어 태그는 대표적으로 &lt;iframe> &lt;video> &lt;audio> 이렇게 3개가 있다. 간단하게 동영상을 재생하거나 음성 파일을 재생하는 태그라고 생각하면 될 것이다.&lt;iframe>:

2022년 3월 31일
·
0개의 댓글
·