본문 바로가기

장원익 기술블로그

📺 Front End/- HTML,css,Javascript29

[CSS] Box Modeling에 필요한 모든 것(margin, padding, border) 한 웹 사이트를 봐보자. 웹사이트는 내가 디자인적으로 좋아하고 학습을 위해 벤치마킹 하고 있는 디자인 베이스를 볼 것이다. 여기 이 멋진 디자인베이스 홈페이지에도 Box Modeling이 적용되어 있다. 이런 빨간 네모들이 Box이고 Box 가 모여 하나의 멋진 웹 사이트를 구성한다. 바로 이게 오늘 배워볼 Box Modeling이다. 들어가기 전에 먼저 이야기 하자면 Box Model을 잘 이용해야 우리가 원하는 공간에 배치하고, 조절, 나열할 수 있게 된다. 최신 CSS 기술에는 Flexbox라는 것이 생겼다. Flexbox도 사실상 Box Model에 상응하는 개념이니 다음에 배워볼 Flexbox를 위해 이번 시간에 Box model이 무엇인지 잘 알아보고 넘어가도록 하자. Box Modeling .. 2020. 10. 4.

[CSS] Css의 Cascading의 의미 CSS 우리가 CSS를 배우기 위해서 가장 먼저 해야할 것은 이름의 뜻을 파악하는 것이다. Cascading Style Sheets Cascading이란 폭포를 뜻한다. 여기서 CSS에는 어떤 의미로 적용되냐? HTML 요소들은 하나 이상의 CSS 스타일에 영향을 받을 수 있다. 그 말은 즉, 우리가 Welcome 이라는 HTML 요소에 글씨 크기를 조절하는 스타일, underline의 스타일 + 주황 배경색을 적용한다고 하면 이미 3가지의 스타일링에 영향을 받는 것이다. 이런 특성 때문에 어떤 스타일을 적용 받을지에 대한 우선순위에 대한 결정이 중요한 역할을 한다. 이를 Cascading(캐스캐이딩)이라고 한다. Cascading의 3가지 요소 Cascading을 결정하는 3가지 요소가 있다. 중요도 .. 2020. 10. 4.

[Javascript-Core] 자바스크립트의 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해서 알아보자. 오늘 알아볼 것은 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)이다. 우선 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)를 이해하기 위해서는 원시 타입(Primitive Type), 참조 타입(Reference Type)에 대해서 알아야 한다. 사실상 자바스크립트를 학습하며 깊은 복사와 얕은 복사를 학습하기 위해 내 블로그를 검색을 통해 들어올 사람들이라면 원시 타입과 참조 타입에 대해서 모를 사람은 없다고 생각하고 그에 대한 깊은 내용은 생략하겠다. 하지만 여러 자바스크립트 개념을 학습하고 있는 상황이라면 머릿속이 아주 혼란스러울 수 있으므로 가볍게 한 번 짚고 넘어가 보자. Primitive Type 원시 타입은 Number String Boolean Nul.. 2020. 7. 31.

[Javascript-Core] 함수 내부에서의 this와 우회 방법 그리고 화살표 함수의 this (부제) :: JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(3) 오늘 알아볼 것은 this이다. 나는 객체 지향 언어인 java를 먼저 배웠기 때문에 js에서 말하는 this를 단지 class 내부의 프로퍼티에 대한 포인터역할로써 이해를 했었지만, js에서 말하는 this는 훨씬 다양하고 심오한 기능을 수행하고 있었다. 오늘 그 심오한 기능들에 대해서 짚어보자. 해당 글은 4부작으로 나뉘어져 있습니다. this에 대한 모든 것을 완벽히 파악하고싶다면 한 번 봐보는 것을 권장합니다. 전역 공간에서의 this 메서드 내부에서의 this 함수 내부에서의 this 콜백 함수에서의 this What is this 최대의 docs를 제공한다는 w3c에는 다음과 같이 this의 기능을 분류한다. 메서드에서 this는 그의 주인 객체(Owner Obj)를 뜻한다. this가 단독으.. 2020. 7. 28.

[Javascript-Core] 메서드 내부에서의 this 그리고 함수와 메서드의 차이점 (부제) :: JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(2) 오늘 알아볼 것은 this이다. 나는 객체 지향 언어인 java를 먼저 배웠기 때문에 js에서 말하는 this를 단지 class 내부의 프로퍼티에 대한 포인터역할로써 이해를 했었지만, js에서 말하는 this는 훨씬 다양하고 심오한 기능을 수행하고 있었다. 오늘 그 심오한 기능들에 대해서 짚어보자. 해당 글은 4부작으로 나뉘어져 있습니다. this에 대한 모든 것을 완벽히 파악하고싶다면 한 번 봐보는 것을 권장합니다. 전역 공간에서의 this 메서드 내부에서의 this 함수 내부에서의 this 콜백 함수에서의 this What is this 최대의 docs를 제공한다는 w3c에는 다음과 같이 this의 기능을 분류한다. 메서드에서 this는 그의 주인 객체(Owner Obj)를 뜻한다. this가 단독으.. 2020. 7. 28.

[Javascript-Core] 전역 공간에서의 this (부제) ::JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(1) 오늘 알아볼 것은 this이다. 나는 객체 지향 언어인 java를 먼저 배웠기 때문에 js에서 말하는 this를 단지 class 내부의 프로퍼티에 대한 포인터역할로써 이해를 했었지만, js에서 말하는 this는 훨씬 다양하고 심오한 기능을 수행하고 있었다. 오늘 그 심오한 기능들에 대해서 짚어보자. 해당 글은 4부작으로 나뉘어져 있습니다. this에 대한 모든 것을 완벽히 파악하고싶다면 한 번 봐보는 것을 권장합니다. 전역 공간에서의 this 메서드 내부에서의 this 함수 내부에서의 this 콜백 함수에서의 this What is this 최대의 docs를 제공한다는 w3c에는 다음과 같이 this의 기능을 분류한다. 메서드에서 this는 그의 주인 객체(Owner Obj)를 뜻한다. this가 단독으.. 2020. 7. 28.

이전 1 2 3 4 5 다음

티스토리툴바