IT 배움터

See the Pen Untitled by 무기미도 (@gfifvcbf-the-typescripter) on CodePen.

   document.querySelector('#demo') CSS선택자로 p태그를 선택한 후, .innerHTML='Hello JavaScript!' 를 입력해 HTML문자열을 해당 속성값에 덮어씌우는 스크립트를 작성했다. 해당 버튼을 누르면 글자가 바뀌는 것을 볼 수 있다. 

See the Pen Untitled by 무기미도 (@gfifvcbf-the-typescripter) on CodePen.

   비슷한 방식으로 보이지 않았던 p태그의 글자를 보일 수 있도록 속성을 바꿀 수 있다. display값을 none으로 지정했던 p태그를 선택하고 반대로 보일 수 있도록 block 값을 주게되면 버튼이 작동함과 동시에 숨겨져 있던 p태그가 나타난다.

   자바스크립트에서 사용할 변수 선언 규칙에 관해서는 다음과 같다.

   이렇게 선언된 변수에는 각 데이터가 담기게 되는데, 그 안에 담길 데이터의 유형을 결정하는 선언을 작성할 수 있다.

   <header> 부분   

• <nav> 태그 안에 logo가 들어갈 <div>와 네비게이터가 될 부분의 <ul>을 넣어 전체적인 틀을 잡는다.
• 블럭요소로 이루어져 세로로 쌓인 요소를 가로로 나열하기 위해 display 속성 값을 flex로 바꾸어 가로로 나열한 뒤, justify-content 속성을 space-between 값으로 바꾸어 최대 너비로 지정한 위치의 양 끝으로 이동시킨다.
• 메뉴들은 다른 페이지로 이동할 수 있어야 하기 때문에 <li>항목에 <a>태그를 추가적으로 사용하여 링크 연결이 가능하도록 만든 뒤 CSS속성으로 꾸밈 요소를 지정한다.
• 로고와 네비게이터가 <header>의 세로 중앙에 올 수 있도록 aling-item속성을 center로 바꾸어 위치시킨다. 이 때, aling-item 속성은 stretch값을 상쇄시키므로 높이 지정을 하지 않은 항목이 있다면 지정해주도록 하자. (그렇지 않으면 높이가 0으로 바껴버린다.)

   <section1> 부분   

• <div>로 섹션 전체를 잡고 백그라운드 이미지, 또는 이미지 태그로 배경을 넣을 수 있으니 요령껏 할 것. 여기서는 <section> 자체의 백그라운드 이미지를 지정하여 컨테이너 너비를 설정하지 않았고, 배경 이미지가 잘리지 않게 나오기 위해 size를 cover로 지정했다.
• 슬라이더를 구현하기 위한 <input> 태그의 radio 속성을 이용해 잘 작동이 되는지 확인한다.
• 슬라이더가 들어갈 부분을 <ul>로 박스를 지정한 뒤, 웹문서 본래의 컨테이너를 설정하여 설정을 통일 시킨다. 자식으로 나열되는 <li> 태그가 가로로 길게 늘어날 수 있도록 white-space값을 nowrap으로 하여 세 개의 슬라이드 페이지가 가로로 나열되게 만든다. 이 때, block요소는 가로로 나열될 수 없으므로 <li>의 display값을 바꿔주는 것을 잊지 말자.
• 텍스트가 차지하는 범위는 웹 문서의 절반밖에 되지 않지만, 이동할 때 메인 이미지를 스쳐 지나오기 때문에 <li>태그가 가질 실제 너비 값은 100%로 주어야 한다. 텍스트는 조상이 가진 nowrap요소로 줄바꿈이 일어나지 않으니 다시 부모 요소인 <li>태그에 white-space : wrap값을 주어 줄바꿈이 가능하도록 바꾼 뒤, 텍스트가 화면의 절반만 차지할 수 있도록 패딩이나 텍스트 박스의 너비값을 지정해 조절한다.
• <ul> 태그에 overflow : hidden 속성을 주어 넘친 부분을 보이지 않도록 가린다.
• <label>태그에 block값을 주어 크기 및 위치 조정이 가능한 상태로 만들어준 뒤, 앞서 지정해둔 <input>태그와 연결하여 마치 버튼처럼 동작할 수 있도록 만들어 준다. <input>이 가진 아이디 값에 check가 될 때마다 <li>의 translateX 값이 -100%씩 이동하도록 설정하면 슬라이드 완성이다.

   <section2> 부분   

• 제목에 해당하는 부분을 보면 분홍색의 <hr> 같은 구분선이 보인다. <hr>은 수평선으로 굵기와 너비를 지정하면 끝인 것 같아 보여도 엄연한 블럭 요소기 때문에 border속성이 아닌 너비와 높이를 따지니까 번거롭게 <hr>이 아니라 <div>태그를 사용하게 되었다.
• 구분선이 될 <div>항목에 position : absolute를 지정해 제목의 큰 박스가 부모가 될 수 있도록 바꾸고 left값과 transform 속성을 이용해 한 가운데로 위치시킨다. 선은 border-bottom 또는 border-top을 이용해 한 군데만 지정하고 색상과 굵기 및 너비를 알맞게 조절해주면 끝이다.
• <div>로 이루어진 박스 세개를 display : flex 속성으로 나열시키고 예제 사이트와 동일하게 꾸밈 요소를 주면 된다.

   <section3> 부분   

• <section> 자체에 background-color를 주어 균일한 바탕색이 되도록 한다. 컨테이너를 주면 안된다.
• 이미지가 들어갈 <div>와 텍스트가 들어갈 <div>를 나누어 묶은 다음 display : flex 속성으로 나열시킨다.
• 텍스트 박스 자체에 패딩값을 주어 위치를 조정한다. 텍스트 박스들은 display값을 주지 않았기 때문에 따로 정렬할 방법이 없어 패딩 혹은 마진으로 자신의 위치를 조절해야 한다.

   <section4>부분   

• 각 상품이 들어갈 <div>에 탭에 따라 제품들이 나눠질 수 있도록 공통된 값을 부여해야 한다. women, men, shirt, dress가 주로 이루어져 있으니 4개로 분류하여 클래스 값을 지정해주고, ALL 탭에는 모든 제품이 보여야 하니 모든 제품이 똑같은 클래스 하나를 주면 탭으로 분류할 준비는 끝난다.
• position : absolute / relative를 적절히 이용해 예제 사이트의 구성과 비슷한 형태로 꾸밈을 해준다.
• flex로 가로 정렬을 한 뒤, flex-wrap 속성을 사용하여 부모 요소를 벗어날 경우에 아래로 쌓일 수 있도록 추가 속성을 넣어둔다. 이 때 justify-content를 이용하여 균일한 마진값을 부여하되, 아래쪽으로 너무 붙어 있다면 그냥 바닥 마진값을 주어 떨어뜨리자.

• 제품의 이미지에 hover했을 시 튀어나오는 화면을 미리 만들어 제품 이미지 바로 아래에 위치시키도록 하자. none/block값을 주게 되면 block했을 시 자리를 차지하는 성향 때문에 위치가 들쭉날쭉 해지니 슬라이드 페이지를 숨길 때처럼 overflow : hidden으로 감춰주는 것이 바람직하다.
• 제품 버튼에 hover했을 시 background-color가 투명해지도록 바꾸려면 none값이 아니라 transparent 값을 사용하여 투명하게 만들어 주어야 한다. 관련 transform이 부드럽게 동작하기 위해 바뀌는 태그 값에 transition값을 주는 것을 잊지 말자.
• 각 탭에는 관련 <input> radio 태그를 연결하여 관련 제품만 모아질 수 있도록 기능값을 작성한다.

   <section5> 부분   

• <section>에 background-color 값을 주고 자식으로 포함될 <div> 박스는 컨테이너를 설정한다.

   <section6> 부분   

• <section1>에서 사용된 슬라이드 방식과 비슷하게 구상하되, 이번엔 고정된 버튼이 필요하다. 슬라이드 페이지 수에 맞는 버튼 그룹을 만든 뒤, 해당 <input>값에 check가 될 때마다 none/block을 할 수 있는 기능값을 작성해 각 따로 기능을 수행할 수 있게 만든다.

   <section7> 부분   

• 해당 페이지의 꼬리 부분이라 <footer>와 묶어도 상관 없는 구역이지만 서로 배경색이 다르기 때문에 따로 지정하였다. <form>태그를 사용하여 <input>태그를 나란히 둘 경우 <form>의 font-size를 0으로 지정하면 사이의 빈틈이 사라져 공간이 없어지게 되니 참고하자.

   <footer> 부분   

• <footer>부분에 배경색을 지정하고 내용이 될 부분은 컨테이너를 넣어 중앙에 오도록 맞추면 끝이다.