'Web Design' 카테고리의 글 목록

thumbnail Article 태그와 Section 태그 정리 ※ 개인적으로 공부하기 위한 HTML5 태그 정리글입니다. 프론트엔드를 공부하다보면 의외로 신기한 태그들을 새롭게 알게 된다. 그리고, 한번쯤은 봤을만한 태그들이 익숙해지고 직접 작업을 할 때, 사용하게 되면 태그들이 있는 이유를 한 번에 이해하게 되고, HTML 구조만 보더라도 어떤 식으로 구성되어 있고 어떤 의도로 작업을 했는지 쉽게 이해할 수 있게 되었다. 어쩌면, 영문으로 되어 있어서 언어를 조금 더 잘 이해하고 그 뜻을 파악할 수 있었다면 더 쉽게 이해할 수 있었을지도 모른다. HTML5에서는 정말 다양한 태그들이 있고 평소에 잘 사용하지 않는 태그들이 있지만, 사실 생각해보면 활용도가 굉장하고 언제든지 쉽게 사용할 수 있는 태그들이 있는 것이다. Audio 태그나 Address태그도 마찬가지다..
thumbnail 유튜브 모바일 반응형 CSS 적용방법 및 과정(Object) 이미지보다는 글로 설명해도 충분할 것 같고 각 사이트마다 적용방법이나 코드가 조금씩 다를 수 있으므로, 수시로 개발자도구를 활용해서 점차 수정해나갈 것을 권장합니다. 유튜브 웹소스를 가져와서 적용시키거나 HTML편집기를 통해서 유튜브 영상을 노출시키고자 할 때, PC버전에서는 정상적으로 작동하지만 모바일에서는 레이아웃이 깨지는 경우가 많습니다. 이를 통해서 컨테이너 또는 블럭(DIV)을 만들고 그 공간에 아래와 같은 소스를 적용시켜서 모바일 사이즈를 조절할 수 있었습니다. .video-container { text-align: center; position: relative; padding-bottom: 56.25%; padding-top: 300px; height: 0; overflow: hidden;..
thumbnail 일러스트 작업할 때 자주 쓰는 UI·UX 인터페이스 아이콘 뭐 이런 아이콘, 저런 아이콘이기는 한데 티스토리 글쓰기에서는 1단에 3개의 이미지만 보여질 수 있기 때문에 레이아웃이 다소 큰 것은 양해해주길 바란다. 물론 별도로 수정해서 깔끔하게 보여지는 방법도 있고, 여러가지 방법이 있기는 한데, 대충 이런 것들을 인터페이스 혹은 UIUX 아이콘이라고도 말한다. 가장 기본적인 형태의 디자인들로 구성되어 있고, 찾아보면 정말 심플하고 미려한 디자인의 아이콘들도 쉽게 다운받아서 활용하고 있다. 내가 자주 쓰는 아이콘이기도 해서, 백업 겸 관리하려고 이렇게 정리해서 올려본다.
thumbnail 유튜브 화면 일러스트(.AI) 소스·Source 유튜브 화면 일러스트(.AI) 유튜브 화면으로 활용하기 좋은 일러스트 파일, 다른 유튜브 아이콘이나 일러스트 파일보다 직관적이고 메뉴형태로 쉽게 활용할 수 있는 일러스트 파일 소스다.
thumbnail [CSS] 유령처럼 서서히 나타나는 텍스트 See the Pen Haunted Text by Fabrice Lejeune (@fabricelejeune) on CodePen. 유령처럼 나타나는 CSS, 한번 적용을 해보려다가 생각보다 대작업이 될 것 같아서 이렇게 페이지에만 적용을 시켜서 사용하는 것이 낫겠다. 주로 메인화면에 적용하면 좋을 것 같고 쉬운 코드로 분위기를 나타낼 수 있을 것 같다. 생각보다 사용방법은 단순해보이는데, 위의 assets에서 조금 복잡하게 적용이 되어 있어서 나의 사이트에서 적용을 하려면 코드를 약간 수정해서 사용해야겠다. 자바스크립트는 별도의 파일로 임폴트해서 적용을 시키는 것이 나을 것 같고, CSS의 경우 각 웹사이트별로 커스텀마이징을 해야할 것만 같다.
thumbnail 이미지를 짜르지 않고 배경화면의 커버속성을 썸네일에 적용하는 방법 썸네일 이미지 깔끔하게 구현하는 CSS 이미지 썸네일 CSS를 할 때, 크로싱 브라우저만 잘 대응할 수 있다면, 가장 좋은 CSS 설정값은 아래와 같다. position: absolute; z-index: 10; width: 100%; object-fit: cover; top: 0; bottom: 0; left: 0; right: 0; margin: auto; 위와 같이 설정해주는 것이 중앙정렬도 잘하고, 같은 비율(4:3) 내에서 가로와 세로의 비율을 적당하게 잘라주면서 가장 썸네일처럼 보이게 해주는 설정값이다. 배경이미지의 속성이 아니라, 이미지 내에서 위와 같이 적용하면 딱 알맞게 떨어지는데, 위에서 가장 중요한 요소는 바로 Object-fit이다. Object-fit에는 다양한 속성이 있는데, 배..
thumbnail [CSS] 밑줄 표시 이펙트 Underline hover effect See the Pen PooerOj by CreativeStudio (@creativestudiocss) on CodePen. background-image: linear-gradient(transparent calc(100% - 3px), #000 3px) background-repeat: no-repeat background-size: 0% 100% transition: background-size 0.8s color: #000 &.yellow background-image: linear-gradient(transparent 60%, #F8CD07 40%) &:hover background-size: 100% 100% 위와 같은 방식 또는 코드펜 방식으로 매우 쉽게 적용할 수 있는 밑줄 CSS 호버 ..
thumbnail 엔티티 코드(Entity Code) 정리 자주 쓰는 특수문자를 HTML에서 쉽게 사용할 수 있는 방법으로는 &로 열고 엔티티 코드 이름을 적은 뒤에 ;로 닫으면 해당 문자를 사용할 수 있다. 한번 외워두면 다양한 웹페이지를 구성할 때, 매우 쉽게 사용할 수 있으니 자주 쓰는 문자코드는 꼭 외워두는 것이 좋다. 특히 세로 바(Vertical Bar)는 몰라서 못쓰는 경우가 많으니, 영문으로 쓰지 말고 문자로 쓰는 것이 폰트가 달라졌을 경우를 대비하여 중요한 요소라고 할 수 있다. 캐릭터 엔티티 이름 엔티티 번호 기술 & nbsp; & # 160; 줄 바꿈하지 않는 공백을 삽입합니다. & & amp; & # 38; 앰퍼샌드 " & quot; & # 34; 따옴표 © © & # 169; 저작권 기호 ® & reg; & # 174; 등록 된 기호 ™ ..
thumbnail [CSS] 배경이미지 위에 점 패턴 이미지 배경이미지 위에 점 패턴 이미지 제작방법 정리 배경이미지를 훨씬 세련되게 만들어주는 배경이미지 위에 점 패턴 이미지 커버를 씌우는 방법이다. 워드프레스를 할 때는 커버이미지에 기본적인 기능이 있어서 매우 쉽게 구현을 했는데, 티스토리내에서도 다른 배경이미지를 멋있게 표현하고 싶었는데, 관련 기능이 없었다. 있는게 오히려 이상하겠다 싶었다. 예전에 점 패턴과 더불어 다양한 패턴이미지를 저장하고 있었으나, 최근 컴퓨터를 포맷하면서 패턴이미지가 삭제되어 버렸다. 그래서 인터넷에서 관련 점 패턴을 찾아보았으나 찾지 못하고 직접 포토샵으로 픽셀작업을 했다. 점 패턴의 경우, 일부로 Opacity를 별도로 지정해주지 않으면 굉장히 이미지가 이상할 수 있으므로 픽셀 패턴이미지를 만들면서 함께 Opacity를 50% ..