css
-
[CSS] min, max, clampIT 지식 2022. 8. 14. 17:32
1. CSS min/max 사용법 CSS min은 min(a, b, ...) 의 방식으로 사용하며 인자로 받은 값들 중 가장 작은 값을 값으로 취하는 함수이다. 예시 .container { width: min(50%, 200px) } 위와 같이 사용한다면, .container의 width 는 50%와 200px 중 작은 것을 골라 적용하게 된다. 내가 작성한 예시를 기준으로 한다면 위의 값은 .container { width: 50%; max-width: 200px; } 과 같다고 볼 수 있다. max 역시 이와 마찬가지로 max(a, b, ...)의 방식처럼 사용하며, 인자로 받은 값들 중 가장 큰 값을 적용하게 된다. 예시 .container { width: max(50%, 200px) } 위와 같이..
-
[TIL]Day 29. 핀터레스트 레이아웃을 구현해보자!IT 지식 2020. 10. 25. 15:56
오늘은 지금 진행하고 있는 프로젝트에서 구현해보았던 핀터레스트 레이아웃에 대한 포스팅을 진행해보도록 하겠습니다. masonry layout 위와 같은 핀터레스트의 레이아웃을 masonry 레이아웃이라고 합니다. masonry 라는 뜻은 석공직, 석조 건축이라는 뜻을 가지고 있다고 합니다. 마치 벽돌을 쌓아 올리는 것 같은 모습이죠? 이런 모습을 구현하는 방법은 여러가지가 있습니다. 라이브러리를 사용하는 방법도 있고, 생활코딩에는 기초적인 css를 활용해서 구현하는 강좌도 있습니다. 하지만 오늘 제가 사용하려는 방법은 지난 시간에 설명드린 grid css와 자바스크립트 함수를 통해서 구현하는 방법입니다. 함수를 만들어보자 우선 이 방법을 사용하기 위해선 무한 스크롤 기능 구현 당시 이야기했던 client ..
-
[TIL]Day 28. CSS grid를 정리해보자!IT 지식 2020. 10. 25. 15:11
오늘의 포스팅은 css 끝판왕 기능이라고 할 수 있는 gird에 대해서 알아보도록 하겠습니다! CSS grid가 뭔가요? css grid는 기존의 display:flex를 대체할 수 있는 새로운 display property라고 생각하시면 됩니다. flex와 grid의 가장 큰 차이점은 flex는 1차원 레이아웃인 반면, grid는 2차원 레이아웃이라는 점입니다. 2차원 레이아웃을 지원하기 때문에 grid는 flex에 비해 더 다양하고 고차원적인 레이아웃이 가능해진다는 장점이 있습니다. 기본 용어 정리 그리드 컨테이너 (Grid Container) display: grid가 적용되는, grid의 전체 영역입니다. grid 컨테이너 안의 요소들은 display:grid의 영향을 받아 정렬됩니다. 그리드 아..
-
[TIL]Day 13-2. Semantic Web에 대하여IT 지식 2020. 9. 15. 17:34
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요." 면접에서 자주 다루는 내용 중에 하나라고 합니다. 이 질문에 대한 대답을 하기 위해선 Semantic Web에 대한 이해가 선결 되어야 합니다. Semantic Web은 현재 W3C에 의해 표준화 작업이 진행되고 있는 개념입니다. 웹의 창시자인 팀 버너스리가 1998년도에 제안을 했다고도 하죠. 도대체 Semantic Web이 무엇이길래 웹의 창시자가 직접 이 개념을 제안할 정도인지 알아보는 시간을 갖도록 하겠습니다. 1. Semantic Web의 정의 더보기 시맨틱 웹(Semantic Web)은..
-
[TIL]Day 13. 레이아웃의 모든 것IT 지식 2020. 9. 15. 16:32
오늘의 포스팅은 html 요소들의 레이아웃에 관한 것입니다. 프론트엔드 개발자라면 레이아웃에 대한 고민을 매일 한다고 해도 과언이 아닐텐데요, 저도 아직까지 자주 헷갈리는 개념인 기본적인 레이아웃에 대해 알아보도록 하겠습니다. 1. position 속성 - relative, absolute, fixed position에는 기본적으로 static, relative, absolute, fixed, 이 네 가지 속성이 존재합니다. 이 중 static은 각요소에 가장 기본적으로 부여되어 있는 속성입니다. 따라서 특별히 쓰이는 일은 잘 없습니다. 그저 이런 속성이 있고, 이것이 디폴트 값이구나 생각해주시면 되겠습니다. 1) position: relative position: relative는 이 자체로는 어떤 기..
-
[TIL]Day 9. Java script 함수에 대하여IT 지식 2020. 8. 22. 16:03
1. 함수가 뭐죠? 함수는 대한민국 국민이라면 누구나 한번쯤은 들어본 단어이다. 기초 교육과정인 중등교육 과정에 포함되어 있는 내용이기 때문이다. 더보기 수학에서, 함수(函數, 영어: function) 또는 사상(寫像, 영어: map 또는 mapping)은 첫 번째 집합의 임의의 한 원소를 두 번째 집합의 오직 한 원소에 대응시키는 이항관계다.(출처: 위키백과) 굉장히 어렵고 무섭게 설명되어 있지만, 함수는 쉽게 말해 내가 넣은 어떤 변수가 일련의 과정을 거쳐 변환되는 과정이라고 생각하면 된다. 프로그램 언어는 함수를 매개로 수많은 알고리즘과 로직을 실행시킨다. 그 함수를 작동시키는 변수는 사용자의 입력값이라고 생각하면 된다. 그런 의미에서 프로그래밍을 배운다는 것은 함수를 배운다는 말과 유사하다고 볼 ..
-
[TIL]Day 3. HTML/CSS 정리(3)IT 지식 2020. 8. 12. 23:23
1. 태그를 가로 정렬 하는 법 html에서 어려운 것 중에 하나가 태그들을 배열하는 일이라고 생각한다. 오늘은 그 중 태그를 가로정렬 하는 것을 해보았다. 앞서 썼던 글 중에 태그를 float를 활용하여 정렬하는 내용이 있었는데, 그 방식은 너무 옆으로 붙는 느낌이 들어 이번엔 다른 방식을 사용해보기로 했다. 이 방식도 굉장히 간편했는데, 태그에 display: inline을 부여하는 것이었다. 이렇게 되면 요소들은 어제 정리한 내용처럼 한 줄에 나란히 정렬되게 된다. 하지만 어제 말했던 것처럼 좌우 값만 반영되고 그 외의 값들은 반영되지 않으므로 사용할 때를 잘 가려서 사용해야 할 것 같다. (어제 정리한 내용이었는데, 생각이 나지 않아 한참 구글링을 했다;;) 2. 스크롤 부드럽게 이동하기 하이퍼 ..
-
[TIL] Day 2. HTML/CSS 정리-2IT 지식 2020. 8. 11. 22:18
1. 이미지를 나란히 정렬하는 방법 -이미지 태그는 그 자체로 정렬하는 것이 쉽지 않음 -따라서 html이나 css에서 별도의 속성을 부여해주는 것이 좋음 -오늘 배우고 사용해본 방식은 float를 이용하는 것 -float는 해당 요소를 붕 뜨게(?) 만들어주는 방식인데, 공간은 차지하되 다른 요소들에 영향을 주지 않음으로써 보다 쉽게 요소들을 정리하고 정렬할 수 있게 만들어 줌 2. display-inline, inline-block, block의 차이점 -display 속성이 inline으로 지정된 요소는 줄바꿈 없이 한 줄에 나란히 정렬됨 (단, 주의해야 할 것은 margin, padding의 좌우 값만 반영되며 그 외의 상하 높이 값과 width와 height 값은 무시된다) (대표적 예시- , ..