post-thumbnail

멋쟁이 사자처럼 FE스쿨 12주차 회고

결국 또 엄청난 텀을 두고 회고를 쓰게 되었다 😂 하지만 나름 6을 공차로 하는 등차수열의 규칙으로 회고를 쓰는 것도 나쁘지 않지 않을까? 하며 합리화해본다. 사실 저번에는 너무 고민이 커서 쓴 회고였지만 이번에는 뭔가 12주차에 일이 많았어서 기억하기 위해 쓰는 것

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

🌏 내 화면에 네이버가 켜질 때까지 - 브라우저 렌더링 과정

브라우저 렌더링 과정을 알아보자! 스터디에서 동료 특강으로 브라우저렌더링 과정에 대해 발표하게 되었다. 나도 공부를 하기 위해서 맡은 주제이긴 하지만 생각보다 DEEP하게 가려면 엄청나게 방대한 내용이 되어버리는지라 머리가 너무 아팠다.. 내가 다른 글들을 수

2022년 11월 15일
·
5개의 댓글
·
post-thumbnail

숫자가 줄어드는 타이머 ⏱

디자인 저작권 문제로 디자인은 올릴 수 없지만 내가 보기 위해 정리하기... 때문에 디자인 다 빼고 날것으로 설명해본다... 원래는 예뻤어요... 기능 구현 방hrs, min, sec에 각각 시, 분, 초를 입력하고 start버튼을 누르면 숫자가 줄어든다pause 버튼

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

1만 시간의 법칙 만들기 ( + 회전하는 로딩 이미지 기능 추가)

멋사에서 html css를 배울 때 초창기에 했었던 '1만시간의 법칙' 페이지 만들기..! js를 배우기 전 까지는 마크업 상태로 놔뒀지만 js를 배운 이후 js 기능도 넣어보았다..! >원래 위니브에서 만든 페이지 https://paullab.co.kr/10000h

2022년 10월 24일
·
7개의 댓글
·
post-thumbnail

DOM #2 이벤트

이벤트 객체 > 이벤트에서 호출되는 핸들러에는 이벤트와 관련된 모든 정보를 가지고 있는 매개변수가 전송되는데 이것이 바로 이벤트 객체이다

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

DOM #1 DOM이란 무엇일까..?

매번 어렴풋이 알고 있던 개념, 드디어 처음 정리해본다..! 해석하면 문서 객체 모델.. 문서객체란 html 문서의 태그들을 JS가 이용할 수 있도록 객체(object)로 바꾼 것을 말한다. DOM은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언

2022년 10월 14일
·
2개의 댓글
·
post-thumbnail

멋사 FE스쿨 3기 6주만에 쓰는 첫 회고

누가 회고를 6주만에 처음 적어요?저요 흑흑... 6주차가 맞긴 맞나요 지금?회고를 적지 않았던 것은 큰 이유가 있던 것도, 그렇다고 마냥 귀찮아서만은 아니다. 나는 글을 정말 많이 써야하는 인문대 출신으로 글을 쓰는 것에 대해 부담을 가진 적은 한 번도 없었다. 오히

2022년 10월 11일
·
8개의 댓글
·
post-thumbnail

🌏 웹(WEB)의 역사

공부를 하면서 근간인 인터넷과 웹에 대해 배워본 적이 없어서 이번 기회에 정리해본다! 수업을 듣는거지만 내 사족을 곁들인... 언어가 전혀 전문적이지 않을 수 있습니다.. 아직 제 어휘력이 성숙하지 못합니다..짱 큰 옛날 컴퓨터.. 엄청 크고 뜨거워서 옆에서 작업하기

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

Sass(scss) 정리

예전에 한 번 sass 정리를 한 적이 있지만 Mixin 같은 기능을 제대로 쓰지 않고 중첩만 쓰기 때문에,, 이번 기회에 다시 정리하여 효율적으로 써보고자 정리를 해본다,,,, >>예전에 했던 sass 정리 https://velog.io/@jhyun_k/HTMLCSS

2022년 9월 28일
·
3개의 댓글
·
post-thumbnail

220922 TIL CSS 기술 - input 커스텀 , IR 테크닉 , 이미지 sprite 기법

스타일링이 까다로운 input 요소를 화면에서 숨기고 label 요소를 연결하여 스타일링을 진행한다.하면 이렇게 된다아예 select 요소를 사용하지 않고 css로 새로 스타일링해주기디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 ht

2022년 9월 22일
·
1개의 댓글
·
post-thumbnail

일단 만드는 JS - 로또 추첨기 , 글자수 계산기, 미니 스타크래프트, 기념일 계산기

랜덤으로 6자리의 수 뽑고 오름차순 정렬 (1~45)반복문 while 은 조건이 만족될 때 까지 실행한다parseInt : 실수에서 소수점 떼고 정수만 남기기Math.random() : 1~10 까지의 랜덤한 실수 추출 (로또는 1 ~ 45 숫자이므로 \* 45 하고

2022년 9월 21일
·
2개의 댓글
·
post-thumbnail

CSS 원근법(perspective)으로 3D 캐러셀 구현하기

perspective 속성은 컨테이너로 하여금 자식들에게 원근감을 부여하는 효과를 줄 수 있다이런식으로 사용perspective 속성 썼을 때 (위 코드랑 무관)요런 느낌X축 Y축 Z축 회전 참고💡 translate3dtranslate 속성의 3D 버전입니다. 한번에

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

220915 TIL - 선택자 심화

속성선택자 > 알아두면 쓸모있는 유용한 속성선택자~ 근데 매번 제대로 활용을 못해서 이번기회에 다시 정리,, > 중에서 그나마 편하게 쓸 수 있을 것 같은건 태그[속성이름] 태그[속성이름="변수"] 태그[속성*="변수"] 정도? 내가 다 까먹을 것 같다..ㅠ

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

220915 헷갈렸던 개념 정리 (text-overfow, position속성, z-index, float)

맨날 쓰려고 하면 까먹어서 구글에 검색하게 만드는 놈text-overflow 속성은 부모 컨테이너를 넘어간 컨텐츠가 어떻게 보여질지 결정하는 속성입니다.clip : 기본값입니다. 컨테이너의 끝에서 텍스트를 자릅니다.ellipsis : 잘린 텍스트를 말줄임 표시로 나타냅

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

CSS Box Model

HTML의 요소는 박스 구성으로 이루어져 있다 > content box : 요소의 콘텐츠가 표시되는 영역 width 와 height 속성으로 제어 padding box : 콘텐츠와 테두리 사이의 공간 border box : 콘텐츠와 패딩을 둘러싸는 테두리 margin

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

CSS 선택자

출처 : 튜토리얼로 배우는 HTML & CSS전체선택자는 \* { } 타입선택자는 해당 타입 { }class선택자는 .classname{ }class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있다

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

220907 TIL- <form> 외

폼 태그에 대한 내용은 이전에 한 번 정리한 것이 있다 하지만 보충!! https&#x3A;//velog.io/@jhyun_k/HTMLCSS-%EC%A0%95%EB%A6%AC06&lt;Form> 기본 속성폼은 정보를 입력하는 영역로그인 화면에서 아이디와 비밀번호를

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

220906 멋사 FE스쿨 3기 TIL - text-level / embedded content

요소안의 컨텐츠의 크기만큼만 영역을 점유자식으로 Sections, Grouping Contents를 배치X&lt;br> : 줄바꿈 태그 &lt;wbr>은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 역할 white-space : nowrap

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

220902 멋쟁이사자처럼 FE스쿨 3기 TIL

margin: 0 auto; / 블록레벨 요소 가운데 정렬해주기 margin:auto는 margin-left: auto 와 margin-right:auto 의 축약이다 /text-align : center : / 인라인 요소 가운데 정렬해주기 , 이미지도 포함 이미지도

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

220831 멋사FE스쿨 3기 TIL - 시멘틱 태그

웹 세상은 수많은 문서로 이루어진 세상, 웹 세상을 정리하기 위해서!시멘틱한 html 을 작성하는 것은 중요해검색 엔진에 영향을 줄 수 있기 때문에 검색을 할 시 노출이 된다.시각장애인처럼 웹사이트 이용에 제한이 있는 경우 Semantic 마크업 한 사이트를 이용한다면

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