엘리스 AI 트랙 4기/Frontend CS Study15 [CSS] float를 해제하는 방법들 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ float를 해제하는 방법들 float이라는 단어는 뜨다, 부유물 등의 사전적 의미를 가지고 있다. 이름에 걸맞게 css의 float 속성은 주변의 요소들을 플로팅 요소 주변에 흐르게 만든다. 즉, 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다. 보통 웹 페이지의 레이아웃을 작성할 때 자주 사용된다. float 속성을 자식 엘리먼트에 사용하게 되면 부모 엘리먼트가 자식의 높이를 감지할 수 없기 때문에 이를 반영하기 위한 방법이 필요하다. 부모 자식 .child { float: left; } ✔️ 부모 엘리먼트에 float 적용 자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 flo.. 2022. 4. 1. [CSS] 박스 모델 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ Box Model 문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. CSS는 박스의 크기, 위치, 속성 등을 결정한다. 하나의 박스는 네 영역으로 이루어진다. 각 영역을 margin, border, padding, content 영역이라 한다. ✔️ content area content 영역은 글이나 이미지, 비디오 등 요소의 실제 내용을 가지고 있다. content 영역의 크기는 해당 content의 너비와 높이로 이루어진다. ✔️ padding area padding 영역은 content 영역을 안쪽 여백까지 포함하는 크기로 확장시킨다. pa.. 2022. 3. 9. [HTML] Sematic Markup 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 시맨틱 마크업 시맨틱 마크업(Semantic Markup)은 의미를 잘 전달하도록 마크업 문서를 작성하는 것을 말한다. 여기서 마크업은 HTML 태그로 문서를 작성하는 것을 의미한다. 시맨틱 마크업은 각 태그를 용도에 맞게 사용하는 것을 권장한다. 예를 들자면 다음과 같은 것들이 해당한다. 헤더/푸터 : 메인 컨텐츠 : 독립적인 컨텐츠 : 최상위 제목 : 순서가 없는 목록 : 네비게이션 : 태그를 태그가 가지고 있는 의미에 맞게 사용하는 것 외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것도 시맨틱 마크업의 한 종류이다. 이는 태그가 스타일이라는 의미를 가진다면 마크업 자체가 스타일을 가지게 되므로 시맨틱 마크업에 .. 2022. 2. 13. [HTML] script tag attributes 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 위와 같이 외부 스크립트를 가져오거나 async 속성은 boolean 속성으로 명시하지 않으면 false 값을 가지게 되고 명시하면 true 값을 가진다. 이 속성은 defer 속성은 async 속성과 동일하게 boolean 속성으로 명시하지 않으면 false 값을 가지게 되고 명시하면 true 값을 가진다. 또한 요소가 외부 스크립트를 참조하는 경우에만 사용할 수 있어 src 속성이 반드시 필요하다. ✅ vs vs HTML 파싱이 중단되고 즉시 스크립트가 로드된다. 로드된 스크립트의 실행이 종료되면 파싱이 재개된다. HTML 파싱과 병렬적으로(비동기적으로) 스크립트가 로드된다. 파싱하는 동안에도 스크립트 실행이 가능하며 .. 2022. 2. 12. [HTML] local storage, session storage, cookie 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ local storage 로컬 스토리지(local storage)는 웹 스토리지(web storage)의 한 종류로 데이터를 브라우저 상에 저장할 수 있다. 로컬 스토리지는 세션 스토리지와 달리 웹 페이지의 세션이 끝나더라도 데이터가 지워지지 않으며 여러 탭이나 창 간에 데이터가 서로 공유된다. 이러한 점은 동일한 컴퓨터에서 동일한 브라우저를 사용할 때에만 해당된다. ✅ session storage 세션 스토리지(session storage)는 웹 스토리지의 나머지 한 종류로 로컬 스토리지와 마찬가지로 데이터를 브라우저 상에 저장할 수 있다. 세션 스토리지는 세션이 끝날 때 저장된 데이터가 지워진다. 즉, 브라우저에서 같은.. 2022. 2. 5. [HTML] data- 속성 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ data- 속성 data- 속성은 DOM에 데이터(추가 정보)를 저장할 수 있는 사용자 정의 데이터 속성이다. HTMl5의 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 만들어졌다. 따라서 사용하고자 하는 용도에 적합한 속성이나 요소가 없을 때 사용한다. data- 다음에 오는 값이 데이터가 되며 해당 웹 페이지가 독자적으로 사용하는 값이다. ... ✔️ CSS에서 접근 CSS에서 data- 속성 값에 접근하기 위해서는 속성 선택자를 사용한다. article[data-columns='3'] { width: 400px; } article[data-columns='4'] { wi.. 2022. 2. 4. [HTML] 표준 모드와 호환 모드 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 표준 모드와 호환 모드 과거의 웹 페이지는 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)용의 두 가지 버전으로 만들어졌다. 이후 W3C에서 웹 표준을 제정했는데 이 당시 기존의 브라우저들은 새롭게 만들어진 표준을 따르면 웹 사이트를 제대로 표현할 수 없었다. 따라서 브라우저들은 새로운 표준을 기반으로 제작된 사이트와 예전 방식으로 제작된 사이트를 둘 다 렌더링 하기 위해 두 가지 모드를 제공했는데 이들이 바로 표준 모드(standards mode)와 호환 모드(quirks mode)이다. 브라우저는 HTML 문서가 DOCTYP.. 2022. 2. 4. [HTML] DOCTYPE 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ DOCTYPE DOCTYPE(Document Type)은 HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것이다. 따라서 DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 가장 먼저 선언되어야 한다. DOCTYPE 선언은 대소문자를 구분하지 않는다. DOCTYPE 선언을 해주지 않으면 브라우저는 호환 모드(quirks mode)로 동작한다. 하지만 이 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 심해진다. ✔️ Cross Browsing Issue 모든 브라우저가 W3C 표준을 구현하지만 반드시 동일한 방식으로 구현하.. 2022. 2. 2. [Frontend] CSS와 JS Animation의 차이점 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ CSS Animation CSS로 웹 사이트에 애니메이션 효과를 줄 때 transition과 animation 속성을 사용할 수 있다. CSS에서의 애니메이션은 JS에서보다 좀 더 간단한 애니메이션을 구현, 처리하는데 사용한다. 특정 영역에 마우스를 올리거나(hover) 특정 영역의 크기를 바꾸거나 하는 것들이 여기 해당한다. 만약 어떤 정사각형을 왼쪽 위에서 오른쪽 아래로 이동하는 애니메이션을 구현한다고 하면 transform의 translate 속성을 바꿔주면 된다. 이를 JavaScript로 구현하기 위해서는 setInterval을 이용해서 top과 left 속성을 계속 변화시켜 주어야 한다. 이때 값이 계속 변화하는.. 2022. 2. 2. 이전 1 2 다음
