Front End15 스코프 체인 | 너와 나의 연결 정의 ✨ 서론 자바스크립트를 공부하는데 있어서 시작할때 제일 중요한것은 변수가 무엇인지 그리고 어떤것들이 할당되는것을 알아야 하는것도 있지만 이 개념이 선 다음에는 함수를 알아야하고 다음으로 이 '스코프 체인'에 대해서 어느정도 원리를 알아야 한다고 생각한다. 물론 요즘에는 책이라던가 영상강의등의 여러 풍부한 자료들이 많아서 볼 자료들이 많지만 혹여나 이 포스팅을 통해서 정보를 얻어갈 수 있는 사람들이 한둘이라도 생기길 바라는 마음에 나름 학습하고 이해한 내용을 적어본다. ✨ 왜 불렀는데 듣지를 못하니... 자니? 스코프를 이해하기 앞서 먼저 함수의 선언과 호출에 대한 기본 개념을 알고 있어야 한다. 다음 코드를 한번 살펴보자. function 전애인_카톡() { console.log("자니..?") } 여기.. 2022. 9. 22. position의 fixed와 sticky | 똑같은 고정이 아니야 ✨천하제일 고정대회 출전자 position으로 요소들을 배치할 때, 레이아웃 고정에 이용되는 속성이 두종류가 있다. 대체로 fixed를 많이 쓰는것으로 알고 있었으나(나 또한 그래왔었고) sticky라는 속성을 알게 되면서 나 또한 이번 기회에 제대로 알게 되었었다. 둘의 차이는 어떻게 다른지 한번 보자. ✨화면 변동없이 계속 자리 고정이면 'fixed' 아무런 변동없이 특정 고정요소를 한 자리에 계속 놔두려면 fixed를 쓰면 된다. 가장 맨위 제목의 h2에 'title'이라는 클래스를 넣어주고 position을 fixed로 적용한 코드와 결과화면은 다음과 같다. sticky test 오늘의 메뉴1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. .. 2022. 4. 12. overflow:hidden vs display:none | 누가 무엇을 숨겼는가 ✨둘의 차이는 무엇일까? 일단 둘 다 무언가를 숨기는 property의 기능을 담당한다. 그러나 기본 기능상의 차이가 있는데, 먼저 코드의 예제를 살펴보도록 하자. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, voluptatibus porro omnis quod repellendus est deleniti, ipsum blanditiis cum, dolor fuga! Deserunt quod impedit dolorem sint, voluptas dolores cumque vel. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, voluptatibus porro .. 2022. 4. 7. margin 병합 현상 | 누가 내 마진을 먹었을까? ✨누가 나 몰래 margin을 먹은것같아요 css로 작업을 하다보면 가장 많이 스타일 적용하는것에 쓰이는것이 padding, 그리고 margin일것이다. 여기서 이 margin은 독특한 property인데, 기본적으로는 스타일을 정의하는데 있어 이로운 녀석이지만 위 아래로 margin이 붙을 경우 조금은 곤란한 상황이 벌어질 수 있다. 위 아래의 요소에 margin값이 붙어있다면, 그중 가장 큰 margin값으로 통일되어서 그 요소간 간격이 결정되는 상황이 생긴다. 즉 목소리가 큰 요소가 작은 요소의 margin을 잡아먹는 이 현상을 바로 'margin collapse', margin 병합(혹은 결합)현상이라 불린다. 대개 margin병합이 일어날 수 있는 환경은 인접해있는 블록요소끼리 상하단이 맞물려 .. 2022. 4. 7. HTML Living Standard(5) | table ✨HTML로 그려보는 table data 호랭이가 수락산에서 곰방대피며 떡 주워먹고 디아2하면서 해골굴에서 열심히 혼마술과 태양의기원 돌리던 시절... 당시 html의 레이아웃 코딩은 table로 레이아웃 잡는것이 트렌드였다. 지금의 코딩열풍이 있기전에 시대를 앞서간 html 코딩 열풍이 있었다. '장미가족의 태그교실'이라는 DAUM 카페를 시작으로 각각 지역의 컴퓨터학원이 기하급수적으로 늘어나기 시작했고 html과 나모웹에디터2.0을 이용하여 개인홈페이지 꾸미기가 트렌드였던 시절이 있었다. 친구들이 보습학원 갈 시간에 동네 형 따라서 컴퓨터 만지러 컴퓨터학원에 놀러가듯 드나들며 배웠던 그 html을 서른살이 넘은 지금 나의 주 언어가 되었을줄이야. 사람일은 정말 모른다. div 떡칠보다 더욱 난리부르스.. 2022. 4. 6. HTML Living Standard(4) | form 요소들 ✨form은 어떤 요소를 가지고 있을까? form 요소들은 특히 백엔드 개발자들과의 협업이 매우 중요하다. 사용자의 입력값을 데이터로 받아서 그걸 처리하고 가공하는데 해당 form요소들이 중요하기 때문. form 태그는 대표적인 요소로 action과 method를 가지는데, action은 데이터가 submit 되었을때 어떤 서버로 보내줄 것인가 결정하는 것이며 method는 서버로 값을 보내는데 보이게 보낼것인지(get) 안보이게 할것인지(post) 정하는 방식으로 설정된다. 쉽게 말해 공개적으로 내 tmi를 알려줄것인가, 포스트잇에 내 tmi를 적고 고백공격을 할것인지. 또한 하위 요소로 fieldset을 가지는데 form 내부의 영역을 나누게 되는 semantic 태그라 볼 수있다. 뒤이어 form의.. 2022. 4. 5. 이전 1 2 3 다음
