CSS

FlexBox 📌 Flex 는? > Flexible Box, Flexbox 라고 부르며 기존보다 세련된 레이아웃 배치 기능이다. 유연하게 속성들을 배치하여 레이아웃을 잡는 아주 유용한 기능이다. 👉 그럼 인터넷 익스플로어(IE) 에서도 지원이 될까? http

이미지맵이란 이미지에 원하는 영역을 설정한 후 링크를 걸어주는 작업으로, 따로 이미지맵을 따주는 사이트를 이용하거나 드림위버를 이용하여 간단하게 이미지맵을 생성할 수 있다.위와 같이 이미지맵을 사용하면 이미지 크기에 따른 이미지맵이 적용되지 않고 틀어져버린다. 이는 스

보통 게시글의 글이 길어져서 영역을 넘어갈 때 css로 말줄임 효과를 줄 수 있다. 물론 jsp에서 substring을 이용해 문자열을 잘라줄 수도 있으나 그렇게 한다면 디자인에 맞추어 자르기 쉽지 않다. ✌ 말줄임 효과 예시 (네이버 웹툰 화면) 한 줄의 경우 간단하

여기까지 해주면 자식요소가 정 가운데에 위치하게 되는데 다음과 같이 요소의 맨 왼쪽, 맨 위쪽 좌표를 기준으로 가운데로 가게 되어버린다.위를 완전히 가운데로 오게 하기위해서는 다음과 같이 translate를 사용하거나 margin-left 를 이용하면 해결할 수 있다.

css에서 여러가지 단위가 존재하는데 크게는 절대적 단위와 상대적 단위로 나뉘어 사용할 수 있다. 부모 요소에 따라 변화할 필요가 있는 것들은 em이나 % 를 사용할 수 있다. em 단위는 부모요소 의 글꼴 크기를 의미한다. em의 예시를 살펴보자.기본적으로 body에

스크롤을 할 때마다 한 페이지씩 넘어가는 사이트를 구현하고 싶어서 찾아보았는데 방법이 다양하게 있었다. 그중에서 몇 가지 방법을 소개해보겠다. 가장 간단한 플러그인을 활용하는 방법이다. 아래는 데모사이트이다. 아래 사이트에 접속하면 fullPage가 어떻게 동작하는지

퍼블리싱 작업을 하다보면 웹 접근성에 맞추어 텍스트를 숨겨야 할 때가 있다. 이미지에 대체 텍스트를 넣어야 하는 경우나 텍스트가 필요한 이미지 등이 이에 해당된다. 일단 텍스트를 숨기는 방법을 몇 가지 소개해보겠다.이렇게 display: none; 을 해주면 아얘 영역

file 필드를 사용하기 위해서는 inputtype="file" 을 사용한다. file 폼이 필요한 프로젝트를 하다가 input 안의 색깔만 커스터마이징 해주고 싶었으나 기본 형태에서 스타일을 바꾸는 것이 불가능했다.이렇게 해주면 기본 형태는 다음과 같이 나타난다.이렇

인라인 프레임으로, 별도의 외부의 웹 페이지 문서를 테이블이나 이미지와 같은 특정 위치에 삽입하는 기능이다. 반응형 작업을 하다가 iframe을 넣었더니 css를 바꾸는 것이 까다로웠다. 찾아보니 이 때에는 css를 이용한 꼼수가 필요한 것 같았다. 일단 예제를 보면서

웹폰트란 홈페이지나 블로그 등에 적용하는 폰트를 의미한다. 이제 확장자에 대한 설명과 간단한 적용 방법에 대해 설명해보겠다.pc에 설치하여 사용하는 폰트otf와 ttf를 압축하여 웹에서 사용할 수 있도록 만들어준 포맷(출처: https://moo-you.tis