프레임워크160 [생활코딩] 마진 겹침 1 마진(margin)이란 여백, 테두리와 다른 element 테두리 사이의 간격을 의미합니다. 그 마진이 어떤 경우에 사라져 버리는 현상이 있습니다. 이를 마진 겹침 현상이라고 합니다. 만약 마진 겹침 현상이 없었다면 위에 있는 h1과 아래에 있는 h1의 간격은 지금 중간에 위치하는 부분의 2배가 되어야 합니다. "위에 있는 태그와 아래에 있는 태그의 마진 값 중에 더 큰 값이 두 개의 태그 사이의 간격이 된다." 이것이 가장 전형적인 형태의 마진 겹침 현상입니다. 만약에 마진 겹침 현상이 없었다면? 우리는 특정 px만큼만 띄우고 싶은 건데 양쪽 다 같은 마진을 먹는 다면 두 배의 간격이 생기기 때문에 보기 안좋아 집니다. 2022. 1. 30. [생활코딩] box-sizing 어떤 element의 width, height를 사용하여 크기를 지정 할 때 해당 element에 padding, border와 같은 속성을 가지고 있을 경우 내가 지정한 사이즈가 예상과 다르게 적용되는 경우가 생깁니다. 어떤 element의 크기를 예측하기 쉽게 해주는 box-sizing을 알아 보겠습니다! Hello Hello Hello Hello [ 결론 ] box-sizing : border-box는 "box(태그)의 크기를 border에 맞춰서 지정한다" 2022. 1. 29. [생활코딩] box model box model은 각각의 태그들이 웹페이지에 표현 될 때 그 태그의 부피감, 여백, 위치, 크기를 결정하는 것을 말합니다. 각각의 태그들은 태그 바깥쪽에 사각형의 박스와 같은 모양으로 둘러싸여 있다고 해서 박스라는 표현을 사용합니다. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero! a 안녕하세요 오새봄 inline block에서는 width, height는 적용 되지 않는다(무시된다) 2022. 1. 29. [생활코딩] inline block HTML의 태그들은 태그의 성격에 따라서 화면 전체를 쓰는 태그와 자기 자신의 크기만큼만 사용하는 태그로 나뉩니다. 이것들을 inline 방식, block-level-tag(block-level-element) 방식이라고 칭합니다. 어떤 element가 block이고, 어떤 element가 inline인 지 보도록 하겠습니다! Hello World 안녕 세상아 a 태그처럼 자신과 자신을 둘러싸고 있는 다른 텍스트, 정보와 하나의 같은 줄에 위치하는 형태의 태그(element)를 inline 태그라고 합니다. h1 태그처럼 자기 혼자 화면 전체를 다 쓰는 태그를 block-level-elements이라고 합니다. + inline이던 block이던 간에 언제든 지 inline → block / block →.. 2022. 1. 29. [React] useEffect [ 개념 ] 어떠한 컴포넌트가 마운트 되었을 떄, 업데이트 될 때, 언마운트 되었을 때 특정 작업을 처리 할 코드를 실행할 때 useEffect를 사용합니다. 기본적으로 useEffect Hook은 인자로 콜백 함수를 받습니다. (콜백 함수란? 다른 함수의 인자로 전달된 함수를 말합니다.) useEffect는 아래와 같이 두가지 형태만 알고 있으면 됩니다. 첫번째 형태는 useEffect의 인자로 하나의 콜백 함수만 받는 형태이고 두번째 형태는 useEffect의 첫번째 인자로 콜백 함수, 두번째 인자로는 배열(dependency array)를 받는 형태 입니다. 첫번째 형태를 사용할 경우 컴포넌트가 렌더링 될 때마다 콜백 함수가 실행 됩니다. 두번째 형태는 매번 렌더링 될 때마다 실행 되는 것이 아니라.. 2022. 1. 29. [React] useState React에서 함수형 컴포넌트로 개발 한다면 React Hooks이라는 매우 편리한 기능을 사용 할 수 있습니다. 이번에는 React Hooks 중에서도 가장 기본적인 useState에 대해 정리 해보겠습니다. [ 개념] React에서 state라는 건 무엇일까요? state란 컴포넌트가 가질 수 있는 상태를 의미합니다. 예를 들어 Watch라는 컴포넌트가 있다면 state로는 time을 가지고 있을 것입니다. useState는 컴포넌트의 상태를 간편하게 생성하고, 업데이트 할 수 있는 도구를 제공 해줍니다. state에 생성과 동시에 가져야 하는 초기값을 useState 함수의 인자로 넣어주면 state와 setState라는 두 가지 요소를 배열 형태로 return 해줍니다. (초기값이 없으면 null.. 2022. 1. 29. [생활코딩] 캐스케이딩(Cascading) [ CSS란? ] Cascading Style Sheet의 약자입니다. 즉, 캐스캐이딩(Cascading이라는 기능 또는 규칙은 CSS의 첫번째의 글자에 나올만큼 중요합니다. 웹브라우저가 있고 이 웹브라우저는 기본적으로 HTML을 해석하는 기계입니다. HTML에는 기본적인 디자인이 되어 있기는 합니다. h1 태그는 크고 h2는 그것보다 작고 h3, h4... 등 웹브라우저를 사용하는 사용자(User)도 자기가 보고자 하는 웹브라우저의 디자인에 대한 자기 결정권이 있어야 한다. (시력이 안좋으면 글자 크기를 키워야 하고, 원하는 색상으로 바꿔야 한다는 철학을 가지고 있었습니다.) 동시에 웹 페이지를 만드는 사람(Author)도 자기가 만든 웹페이지가 어떤 모습으로 보여야 할 지 결정 할 수 있는 자기 결정.. 2022. 1. 28. [생활코딩] 상속 어떤 요소에 속성 값을 줘서 효과를 주게 되면 해당 요소의 하위 요소들이 그 속성을 이어 받게 되는 성질을 상속이라고 합니다. CSS의 속성들을 모두 상속 되는 것이 아니라, 상속 되는 것이 유리한 속성들은 상속 되고 그렇지 않은 것들을 상속 되지 않습니다. 수업 내용 HTML CSS JS 2022. 1. 26. [React] useContext + Context API [ Context란? ] React로 만든 앱은 여러개의 컴포넌트로써 최상위 APP 컴포넌트로 부터 시작되어 트리 형태로 이루어져 있습니다. 일반적인 데이터 흐름은 위에서 아래로 진행 됩니다. 즉, 부모에서 자식으로 props를 전달 해주는 흐름입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨 줄 때는 아래와 같은 형식으로 일일이 넘겨 주어야 합니다. 컴포넌트도 많고, 트리도 깊은 상태에서 전역으로 쓰는 데이터가 있을 경우 일일이 단계별로 전달 해야 한다면 Prop Drilling이 발생 할 수 있습니다. 이런 문제를 해결 하기 위해서 React는 Context API를 제공 해줍니다. Context는 앱 안에서 전역적으로 사용되는 데이터들을 여러 컴포넌트들 끼리 쉽게 공유 할 수 있는 방법을 제.. 2022. 1. 26. 이전 1 ··· 9 10 11 12 13 14 15 ··· 18 다음 728x90
