HTML
-
[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) } 위와 같이..
-
메타태그에 대한 이해IT 지식 2021. 8. 19. 20:42
Html의 head는 페이지나 css의 링크, 파비콘, 그리고 다른 메타데이터를 포함하는 태그입니다. 즉 페이지에 대한 메타데이터를 포함하는 역할을 하는 것입니다. 메타태그를 활용하면 다음과 같은 일을 할 수 있습니다. SEO 메타태그에 description, keywords, author, subject, 등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용합니다. IE = Edge 인터넷 익스플로러 10 이하 버전은 문서를 읽을 때 쿼크모드 혹은 IE7 모드를 사용해서 웹페이지를 표시합니다. 사용자가 최근 브라우저를 사용하고 있어도 웹페이지가 적절하게 렌더링 되지 않을 수도 있는데, 이때 메타태그를 활용하여 최신 엔진으로 페이지를 렌더링 할 수 있습니다. 뷰포트 설정 메타태그를 활용..
-
[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. 스크롤 부드럽게 이동하기 하이퍼 ..