사이먼's 코딩노트

[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..

[G마켓 2차 메뉴 제작] 지난번 G마켓 1차 탑바 제작에 이어 이번엔 2차 메뉴 제작을 해봅시다. 완성된 G마켓 홈페이지 디자인은 아래 그림과 같다. 우리가 만들어야할 두번째 목표는 2차 메뉴이다. [구조 잡기] 2차 메뉴의 구조를 잡기 위해서 전체 틀인 top-bar-section 아래 2차 메뉴를 의미하는 g-market-2이라는 클래스를 지정한다. 이 때, 1차 탑바인 g-market-1과는 분리되어 형제 엘리먼트로 생성해야된다. g-market-2 안에 구조를 잡는 container와 실제 메뉴를 구성할 g-market-2__nav 태그를 생성한다. container는 각각 너비 1280px과 높이 400px를 고정 px값으로 가진다. container를 가운데 정렬하기 위해선 margin-le..

[G마켓 1차 탑바 제작] 디자인 삼성 2차 메뉴까지 완성해 봤다면 이번엔 G마켓 홈페이지 구현을 해보자. G마켓 홈페이지는 1차 탑바, 2차 메뉴, 3차 메뉴까지 총 3단계로 나눠서 구현할 예정입니다. 완성된 G마켓 홈페이지 디자인은 아래 그림과 같다. 우리가 만들어야할 첫번째 목표는 상단의 1차 탑바이다. [구조 잡기] 1차 탑바의 구조를 잡기 위해서 전체 틀을 top-bar-section이라는 클래스로 지정한다. 전체 틀인 top-bar-section 안에는 1차 메뉴를 의미하는 g-market-1이라는 클래스를 지정한다. top-bar-section과 g-market-1은 해상도를 따라 움직이는 body의 자식이기 때문에 따로 너비 높이에 대한 고정 px를 지정하지 않고 구조 틀을 눈으로 볼수있는..

[폰트 적용] ※ 이 페이지에는 S-Core에서 제공한 에스코어 드림이 적용되어 있습니다. [font] 웹 디자인에서는 코드로 활용할 텍스트는 outline을 사용하지 않는다. 무료 폰트 사이트를 통해 폰트를 적용할 수 있지만 웹 폰트 코드가 없는 폰트는 사용할 수 없다. 폰트 적용 시 본문에서 사용하는 font와 제목에서 사용하는 font가 다르기 때문에 본문과 제목은 반드시 구분해서 font를 디자인한다. 본문으로 사용할 font-weight(두께)가 3가지 이상인지 확인하고 사용해야 한다. 최소 regular, medium, bold 3가지는 포함해야한다. 본문으로 사용되는 font는 모음(ㅏ,ㅑ,ㅓ,ㅕ 등)보다 자음(ㄱ,ㄴ,ㄷ,ㄹ 등)이 더 작은 경우가 많다. 대표적인 font로는 Noto San..

[디자인삼성 2차 메뉴 제작 ~ing] [복습 - 리스트(li) 정렬] HTML & CSS 24일차에 나와있는 css 코드를 기반으로 다시 설명드립니다. 1) 내가 움직이려고 하는 요소가 무엇일까? a태그를 움직여야 하며, a태그는 display 속성이 inline이다. 2) a태그는 브라우저에서 어떤 취급을 받는지 체크를 해본다. inline 요소는 브라우저에서 텍스트 취급을 받는다. 3) 브라우저에서 텍스트 취급 받는 요소는 어떤 속성으로 정렬할 수 있는 지 체크를 해본다. 브라우저에서 텍스트 취급을 받는 요소는 display가 inline과 inline-block이 있다. text-align를 이용하여 가운데 정렬을 한다. 4) text-align 코드는 내가 움직이려고 하는 태그에 적용하는지 or..

[디자인삼성 2차 메뉴 제작 ~ing] 구조 틀이 완성됐다면 이제는 2차 메뉴 리스트를 추가해보자. 완성본을 봤을 때, 디자인삼성 로고 밑에는 비어있는 박스로 여백을 채워야 한다. 2차 메뉴는 태그 구조 상 nav태그 아래 자식 선택자로 세로로 ul태그가 4개이고 각 ul태그 안에 4개의 li태그가 포함된다. [좌측 여백 공간 만들기] .second-menu-bar > .container 아래에 2차 메뉴 리스트를 추가하기 위해선 html에서 여백공간에 대한 air-box라는 클래스와 nav태그를 추가한다. css에선 상위 .top-bar-section > .container > .left-box > .logo-box와 같은 너비의 여백 공간이 필요하기 때문에 .air-box에 고정 너비 280px를 지..

[디자인삼성 2차 메뉴 제작] 디자인삼성 1차 탑바 제작에 이어 2차 메뉴를 제작해보자. 2차 메뉴는 목적은 1차 탑바의 메뉴의 nav태그에 마우스를 올려놓았을 때 2차 메뉴가 나올 수 있도록 하는 것이다. nav태그에 마우스를 올려놓는다는 점에 초점을 두고 하나씩 풀어보자. [2차 메뉴 구조 잡기] 목적을 다시 한번 살펴보면 'nav태그에 마우스를 올려놓는다' 는 말은 nav태그에 hover를 적용했을 때 2차 메뉴가 보이도록 하자는 뜻이라고 생각하면 된다. 그렇다면 기존에 잡았던 top-bar-section와 별개(인접동생 엘리먼트)로 태그를 생성하면 hover를 적용할 방법이 없다. 따라서 새로 만들 2차메뉴의 가장 큰 틀의 클래스를 second-menu-bar라고 칭했을 때 해당 태그가 들어가야 ..

[hover] hover는 마우스 이벤트로 메뉴 화면을 보이거나 감추는 기능이다. html과 css만으로 hover를 적용하여 해당 기능을 구현할 수 있다. 속성과 속성값을 작성하는 코드는 아래와 같다. 선택자:hover { 속성: 속성값; } 1. 인접동생 선택자 활용 목적 : .box에 마우스를 올렸을 때 .div-2 배경색이 green컬러로 변경되도록 한다. 문제점 : .box의 hover를 적용할 때 .div-2이 커스텀되어야 한다. 해결방법 : box와 .div-2의 엘리먼트는 형·동생 사이이기 때문에 인접동생 선택자인 +를 사용한다. 단점 : 인접동생 선택자를 활용했을 때 .box에 마우스를 올려놓았다가 .div-2로 마우스를 옮기면 커스텀된 속성값이 유지가 안된다. See the Pen ho..

[absolute 너비높이 상속] [문제] 아래 코드는 position과 관련된 문제이다. 다음과 같은 조건을 만족하도록 코드를 수정해보세요. 초록색 박스가 주황색 박스를 기준으로 아래에 배치 초록색 박스가 배너 이미지와 겹치보이게 배치 초록색 박스가 배너 이미지 전체를 가리게 배치 See the Pen absolute 너비 상속 문제 by psm817 (@psm817) on CodePen. [풀이] 1. 초록색 박스가 주황색 박스를 기준으로 아래에 배치 초록색 박스가 주황색 박스 아래에 배치되기 위해선 두 태그가 부모와 자식의 관계이기 때문에 position을 이용한 위치를 배치하는 것이 좋다. absolute-2나 absolute-3는 정의되지 않았기 때문에 생략하고, absolute-1에 대해서만 ..

[absolute] absolute는 position의 속성값이다. 웹에서 주로 활용되는 absolute는 상단 메뉴바에서 메뉴 선택하고 하위 메뉴탭을 보여줄 때 해당 위치에 다른 태그들과 겹쳐 보이게 배치될 때 많이 쓰인다. absolute를 적용하지 않으면 태그들이 서로 겹쳐보이지 않는다. 아래 그림(초록색 박스와 이미지)은 서로 다른 태그로 구성되어 있으며, absolute를 적용했을 때의 모습과 적용하지 않았을 때의 모습이다. [x,y,z 축의 의미] x축은 모니터를 기준으로 가로 축을 의미한다. y축은 모니터를 기준으로 세로 축을 의미한다. z축은 내가 바라보는 모니터를 기준으로 점점 앞으로 나오는 3차원 축을 의미한다. [absolute와 fixed의 특징] 1. absolute는 fixed와..