사이먼's 코딩노트

[marquee]이번에는 marquee 태그를 적용하여 글자가 움직이는 효과를 적용해봅시다.marquee는 글자나 그림 등을 상하좌우로 움직이는 연출을 하고 싶을 때 사용하며, MS에서 Explorer에 적용하기 위해서 만들어낸 태그이다.아래 URL 주소를 참고하여 CSS만을 활용하여 여러가지 형태의 marquee를 확인해보고 실제로 적용시킬 수 있다.참고용 주소 : https://www.quackit.com/css/codes/marquees/See the Pen 240705(marquee) by psm817 (@psm817) on CodePen. [스크롤 바]이번에는 기존에 존재하는 스크롤 바를 커스텀해봅시다.딱히 필요한 라이브러리는 없으며, CSS만을 활용하여 스크롤 바 디자인을 할 수 있다.See..

[밑줄 효과 만들기]이번에는 각 메뉴에 마우스를 올려놓았을 때 밑줄이 그려지는 효과를 적용해봅시다.테일윈드를 사용하여 HTML 자체에서 클래스명을 통해 기본 디자인을 주는 방법도 함께 적용해봅시다.See the Pen 밑줄효과 by psm817 (@psm817) on CodePen.각 메뉴의 이름이 작성된 span 태그에서 position: relative를 적용한다.밑줄이 새겨질 부분은 ::after를 사용하여 배경 색을 칠해줘야 한다.after에 포함된 속성은 position: absolute와 실제 부모 격인 span 태그의 글자를 기준으로 아래에 있어야하고 왼쪽부터 그려져야되기 때문에 left: 0, top: 100%를 적용한다.top: 100% 대신 bottom: 0을 하게되면 밑줄의 heig..

[토글 사이드 바 만들기]이번에는 전에 만들어본 풀 다운 메뉴와 transition 등을 활용해서 토글 사이드 바를 만들어 봅시다.토글 사이드 바란 화면의 좌 또는 우측에 위치한 사이드 바 메뉴를 의미합니다.사이드 바는 좌측에 위치하고 4개의 1차 메뉴가 존재하고, 1차 메뉴의 마지막 메뉴 아이템에만 또다른 4개의 2차메뉴, 3차메뉴가 존재한다.1차 메뉴를 제외한 2, 3차 메뉴들은 모두 hover를 적용하여 마우스 커서를 올려 놓았을 때만 보이도록 한다. 예시의 사이드 바를 설명하자면, 각 메뉴에서 2, 3차와 같은 하위메뉴가 존재하면 메뉴의 이름 끝에 [+] 를 붙혀준다.그리고 뒷 배경에 lorem을 통해 텍스트를 길게 썼을 때, 화면을 스크롤해도 사이드 바가 그대로 형태를 유지하도록 하는 것이 주의..

[라이브러리]이번에는 HTML과 CSS를 보다 더 편하게 꾸며줄 수 있는 몇 가지 라이브러리를 소개하려고 합니다.라이브러리는 보통 HTML의 body 태그 아래에 작성할 수 있습니다. [cdnjs]cdnjs는 Cloudflare에서 호스팅하는 무료 오픈 소스 소프트웨어 콘텐츠 전송 네트워크이다.JavaScript와 CSS 라이브러리를 제공한다.URL : https://cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easier for developersSimple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service ..

[풀 다운 메뉴 만들기]이번에는 position: absolute; 속성을 응용해서 풀 다운 메뉴를 만들어 봅시다.풀 다운 메뉴란 아래 사진과 같은 메뉴 구성을 의미합니다.기본적으로 4개의 1차 메뉴가 존재하고, 각 1차 메뉴별로 하단에 4개씩의 2차 메뉴가 존재한다.마찬가지로 2차 메뉴별로 이번에는 하단이 아닌 좌측에 3차 메뉴가 존재한다.모든 기능은 hover를 적용하여 마우스 커서를 올려 놓았을 때만 2차, 3차 메뉴가 보이게 된다. HTML 마크업 시  ul 태그 안에는 오직 li 태그만 들어갈 수 있는 점을 주의하여 마크업 해야한다.해당 메뉴를 구성할 때는 ul, li, a 태그가 모두 포함되기 때문에 노멀라이즈 작업을 필수로 진행해야한다.2차 메뉴를 생성할 때는 2차 메뉴 ul 태그에 posi..

[테이블]테이블은 표를 만들어주는 HTML 태그 중 하나이다.표 뿐만 아니라 갤러리를 만들 수도 있다.기본 구조는 열과 행으로 정렬하여 표현할 수 있고, 모든 테이블 행에는 셀의 수가 동일해야 한다.아래는 테이블과 관련된 기본 구조 태그들을 정리한 표다.기준이 되는 칸은 th 태그로 작성하는 것이 관례라고 생각하면 좋다. 아래는 테이블을 사용해서 학교 시간표를 만들어보았다.See the Pen html day7 복습 by psm817 (@psm817) on CodePen. 만들어진 시간표 테이블을 보면 디자인 속성에서 특이점을 몇 가지 찾을 수 있다.먼저, th 태그로 감싸진 셀들은 태그의 속성에 의해 글씨의 굵기가 굵고 가운데 정렬이 되어있다.나머지 td 태그로 감싸..

[transform 예제 만들기] 지난번 배운 transform, translate, transition, scale, opacity, rgba을 응용해서 예제를 하나 만들어보자. 예제의 내용은 아래 사진과 같이 이미지 5장을 화면에 놓고 각 이미지 화면에 마우스 커서를 올려놓았을 때 이미지가 흐려지고 이미지가 확대되면서 버튼이 생기는 것이다. [구조 잡기] 가장 먼저 해줄 일은 5개의 이미지가 위치할 수 있도록 구조를 짜는 일이다. 구조 짜는 방법은 복잡하게 생각하지 않아도되고, 앞서 탑바 제작하듯이 틀만 만들어준다고 생각하면 된다. img태그를 이용해 이미지를 한 번에 바로 insert하지 않고 굳이 구조를 짜서 넣어주는 이유는 img태그는 닫히 태그가 없기 때문에 hover를 적용했을 떄의 커스텀이..

[transfrom & translate & transition] 1. transform 엘리먼트를 변형시킬 떄 사용한다. 위치이동이나 회전 또는 크기를 조절할 때 사용하는 css 속성이다. absolute와 같은 position과 transform은 모두 원하는 위치로 옮기는 속성이지만, 둘을 함께 쓴다면 transform이 위로 오는 경우가 있어서 이럴 때는 position으로 통일시켜서 포지셔닝을 하는 것이 좋다. 2. translate transform의 속성값 중 하나이다. 엘리먼트를 X축, Y축, Z축으로 이동할 수 있는 속성이다. X축으로 이동할 때의 형태는 transform: translateX(X값); 이다. Y축으로 이동할 때의 형태는 transform: translateY(Y값); 이..

[G마켓 3차 메뉴 제작 ~ing] [3차 메뉴 상단(left-box) 만들기] 3차 메뉴의 top-box 중 left-box를 먼저 완성해보자. left-box에는 총 3개의 박스가 나눠서 메뉴가 들어가 있는 구조이다. 3개의 메뉴는 left-box 아래에 nav-list 태그를 추가해야한다. nav-list 태그 아래에는 메뉴의 제목과 소메뉴으로 나누는 title-box와 body-text-box를 추가한다. title-box에는 바로 각 메뉴의 제목 텍스트를 적어주고, body-text-box에는 소메뉴를 나눠주는 ul, li태그를 추가하고 각 li태그는 다른 곳으로 링크되는 역할을 가지고 있기 때문에 자식 엘리먼트로 a태그를 추가한다. 각 nav-list 태그는 한 줄에 나란히 배치해야되기 때문에..

[G마켓 3차 메뉴 제작] 지난번 G마켓 2차 메뉴 제작에 이어 이번엔 3차 메뉴 제작을 해봅시다. 완성된 G마켓 홈페이지 디자인은 아래 그림과 같다. 우리가 만들어야할 마지막 목표는 2차 메뉴 옆 3차 메뉴이다. [구조 잡기] 각 2차 메뉴의 li태그에 hover를 적용했을 때마다 보이는 3차 메뉴가 다르기 때문에 html에서 3차 메뉴 태그의 위치는 hover를 적용할 2차 메뉴의 li태그 아래에 위치해야한다. 우선 g-market-2__nav > ul > li 아래에 3차 메뉴의 구조를 잡는 g-market-3__nav 태그를 생성한다. 2차 메뉴의 전체와 3차 메뉴가 겹쳐보이기 위해선 g-market-3__nav에 position: absolute를 통한 포지셔닝이 필요하다. 이 때, g-mark..