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

   슬라이드를 넘길 때마다 화살표 버튼이 화면 밖에서 안으로 나타나는 효과와 글자가 조금씩 움직이는 효과를 추가해보았다. 기존에 radio를 응용하여 슬라이드를 만드는 것이 익숙해졌다면 추가적인 움직임을 주는 것은 크게 어렵지 않았지만 아직 미숙한 탓인지 조금 헤맸던 부분이 있어 남기고자 한다.

   일단 이번에는 버튼이 고정된 위치가 아닌, 각 <li> 항목 아래에 화면과 같이 움직이는 label을 삽입해서 진행했다. 처음에 한 생각은 버튼이 좌우로 벌어져 뷰포인트를 벗어 나 있다가 checked 항목을 주면 안쪽으로 모이는 것을 하고자 했는데 버튼을 묶음으로 해둔 박스에게 position 값을 주다보니 원하는 방향대로 움직이기가 힘들어 생각대로 나와주지 않았다.

   그래서 다시 처음으로 돌아와 각 버튼에 relative값을 주어 원하는 방향으로 움직이기로 했다.

   처음부터 버튼을 나눴다면 더 빨리 해냈을텐데... 왼쪽과 오른쪽을 나눈 상태에서 opacity값을 준 이유는 아무리 ul화면 밖을 나갔다 한들 다른 페이지에서 넘어오는 버튼까지는 감춰줄 수 없기 때문에 불투명도 값을 주었다. 그러면 다른 페이지로 버튼이 넘어와도 해당 페이지에 checked가 되지 않는 이상 보이지 않게 된다.

   단일 슬라이드라 따로 버튼에 none 값을 주거나 했던 건 없던 대신, opacity 항목을 추가하여 해당 페이지의 radio에 체크가 될 때마다 반투명한 버튼이 선명하게 보이도록 값을 지정했다. 어제와 같은 방식에서 더 쉬워졌기 때문에 따로 덧붙일 설명은 없다. 다만 position값을 줄 때 부모와 자식의 관계를 신경쓰며 부여하자.

   페이지 그대로 구현하는데 성공은 했지만 구조적으로 뜯어보면 난해해서 추후에 다시 수정하기 위해 기록을 해두려고 한다. CSS로 탭기능을 쓸 때, 한 페이지마다 나타나는 박스를 만들어 none/block 값을 줄 수도 있지만 그러면 중복되는 값이 많아지고 전체적으로 난잡해져 추후 유지보수가 들어갈 경우 수정이 힘들 수 있기 때문에 다음부터는 our_box라는 클래스에 각 탭 별로 고유한 클래스 값을 따로 부여하여 그 값만 켜고 끌 수 있도록 하면 간단하다고 배웠다.

   생각해보니 그게 맞는데 역시 머리가 모자라면 몸이 고생(...)을 하니까 다음부턴 꼭 참고하도록 하자...

   (각 테이블에 display값이 이미 있는데 추가로 탭효과를 주니 중복이 되어버려 block값을 먹이지 못해 flex값으로 준 이유도 그래서였다, 다음부터는 클래스 값으로 none/block값을 주도록 하자!)

   제자리에 고정된 버튼을 만들기 위해서는 같은 자리에 각 탭마다 이동값을 줄 수 있게 모든 버튼에 none값을 준 뒤, check가 넘어갈 때마다 나타나는 버튼을 다르게 만들어 마치 고정된 듯한 효과를 주면 된다. 다만 X값을 -100%만큼 이동시키는게 원래라면 맞는데 li값이 화면에 보여지는 부분의 100%를 차지하는게 아니다보니 그 부분에서 줄이고 마진값을 주다보니 조금 틀어진 것 같다...

   자바 스크립트 기능을 이용하지 않고 오로지 CSS 속성으로 슬라이드 형식의 웹페이지를 제작해보았다.

   input태그의 radio속성을 이용하는건데, radio속성은 우리가 흔히 볼 수 있는 단일 선택 기능으로, 이 기능을 어떻게 슬라이드 방식으로 바꿀 수 있는가 했더니 label이라는 추가 태그를 통해 다양한 시도를 해볼 수 있었다.  여기서 label 태그는 해당 항목을 클릭할 시 radio 항목의 체크를 대신 해주는 기능을 가지고 있다.

   먼저 input 태그를 작성한다. 그 중에서 단일 선택이 될 수 있도록 같은 name을 사용하여 같은 그룹임을 알려주고 radio속성의 기능만 사용하기 때문에 웹페이지에서는 모습을 감출 수 있도록 display : none 값을 먹인다. 단, 여기서 항상 첫번째 이미지는 배너로 보이게 설정해야 하기에 checked 속성을 잊으면 안된다.

   그 다음 ul부분, 세 개의 배너 이미지를 가로로 길게 나열하기 위해 white-space 속성을 주어야 하는데 이 때 자식 요소가 블럭 요소면 nowrap을 하더라도 기능이 동작하지 않으니 꼭 자식 요소에 인라인(하지만 인라인은 속성값을 지정하는 데 한계가 있으므로 하지는 말자...), 혹은 인라인 블럭을 설정해두어야 한다. 여기서 <li> 태그들이 부모영역을 벗어날 정도로 X축을 기준으로 길게 나열되는데 미세한 틈이 생길 것이다. <ul>태그 자체에 포함되어 있는 font-size를 0으로 맞추면 <li>태그 사이에 생긴 작은 틈을 없앨 수 있으니 참고하자. 단, nowrap으로 인해 텍스트 박스의 글자들도 줄바꿈이 일어나지 않게 될 것이다. 그럴땐 다시 <li>태그에 wrap속성을 부여하면 그 안의 자식 요소는 다시 원래 입력한 대로 표기가 되니 유의할 것.

   이제 <ul>태그에 overflow : hidden값을 주어 한 화면에 하나의 <li>태그만 보이도록 수정한다. 그 전에 <li>태그가 부모 요소의 전체 영역을 담당할 수 있도록 모든 값에 너비를 100% 지정해두면 벗어나는 이미지 하나 없이 첫 배너 장식 완성이다. 이제 가로로 길게 늘어진 하나의 <li> 태그들을 radio checked가 바뀔 때마다 한 장씩 넘어갈 수 있도록 버튼을 만들어보자. 슬라이드와 버튼이 함께 넘어가는 것과, 한 자리에 고정되어 넘어가는 것이 있는데 여기서 나는 고정된 버튼을 만들어 보겠다. 작성된 HTML과 같이 label for 항목에 해당 라벨을 클릭할 시 체크될 라디오 항목의 아이디를 넣어 총 세 묶음의 버튼을 만든다. 세 개의 버튼이 화면 양 옆에 고정될 수 있도록 모든 버튼에 position : absolute를 지정해 원하는 위치에 고정을 시킨 다음, 모든 버튼의 display를 none값을 주어 화면에서 사라지게 한다. 그런 다음 기능으로 배너 이미지 첫번째 화면이 checked인 상태면 첫 번째 버튼의 묶음, 두 번째 화면이면 두 번째 버튼의 묶음이, 세 번째 화면이면 세 번째 버튼의 묶음이 보일 수 있도록 block값을 지정하면 그 자리에 고정된 버튼을 만들 수 있다.

   이제 마지막으로 체크가 될 때마다 <li>태그에 있는 화면이 움직이기만 하면 첫 슬라이드 화면 완성이다. 위와 같이 체크가 될 항목을 지정한 뒤 <li>태그가 보여질 화면을 이동시킨다. X축을 기준으로 움직이기 때문에 translateX값을 각 -100%씩 주면 <li>태그가 차지한 100%의 값만큼 옮겨가 마치 한 장, 한 장이 넘어가는 효과를 주게 된다. 여기서 부드럽게 넘어갈 수 있도록 <li>태그에 transition값을 주면 끝이다.

   이제 배너 하단에 작은 바를 살펴보자. 하나 하나 누를 때마다 화면이 해당 페이지로 넘어가는 식이라 넘길 때마다 다음 페이지의 주소를 바꿔줘야 하는 경우와 다르게 탭처럼 누르면 되니 훨씬 만들기 쉽다. <label>은 인라인 요소라 크기 지정을 할 수 없으므로 display를 사용해 블럭요소값을 가지게 한 후 알맞게 디자인만 하면 끝.

   이번에는 카테고리를 만들어 각 탭마다 보여지는 항목을 다르게 표현하는 기능을 만들어 보았다. 마찬가지로 input 태그의 radio 속성을 이용하여 하면 되는데, 나는 슬라이드 페이지에서 언더바 형식을 그대로 채용해 각 탭마다 보여지는 테이블을 따로 만들어 동시에  none값을 준 뒤 하나하나 나타나도록 만들어 보았다.

   하지만 한가지 에로사항이 생겼는데, 원래 display : none / block으로 보이게 한 것 까지는 좋으나 그렇게 했을 경우 본래 가지고 있던 display속성값과 충돌이 생겨 CSS가 풀려버리는 현상이 생겼다. 해당 현상은 일단 내가 코딩을 잘못 설계한 게 맞기 때문에 추후에 이 부분을 다시 수정해볼 생각이다. 일단은 바뀌는 것을 방지하기 위해 display를 flex로 지정했더니 위 GIF이미지 처럼 정상적으로 작동하기는 했다...

   참고로 탭을 누를 때마다 색이 바뀌는 설정을 했는데 부드럽게 바뀌는 효과를 주기 위한 transition을 기능값에다 주게 되면 누를때만 해당 효과가 들어가고 다른 탭으로 넘어갈 때는 transition효과가 먹히지 않으니 이 부분을 유의하자.

   모달창이란 것을 새로 배우게 됐다. 평소 웹페이지에서 흔히 광고 팝업이라고 묶어 부르는 종류 중 하나인데, 모달은 팝업과는 다르다는 것도 처음 알게 되었다. 팝업은 새로운 페이지가 화면에 나타남으로써 창을 무시해도 웹 문서를 조작하는 데 문제가 없지만, 모달은 사용자 화면 전체에 새로운 레이어를 씌워버리면서 닫기 버튼을 누를 때까지 웹문서를 조작할 수 없다는게 가장 큰 차이점이었다. 그렇다면 화면 전체를 덮어버리면서 사용자가 반응했을때만 튀어나오게 할 수 있는 방법은 무엇일까...

   일명 책갈피 기능을 쓰면 가능했다. a태그는 웹문서간의 경로도 될 수 있지만 웹문서 내의 아이디 값을 통해 이동하는 것이 가능한데 이걸 책갈피 기능이라고 부르는 듯 했다. 일단 사용자가 누를 수 있는 a태그를 먼저 나열한 뒤, 모달창이 될 div가 가진 아이디 값을 경로로 지정해준다. 모달창으로 만들 div는 추가적인 CSS를 통해 화면 전체를 어둡게 만들어주는 효과와 더불어 사용자에게 전달하고자 하는 공간에 배경과 내용을 넣은 뒤 모달창을 벗어나기 위한 a태그를 추가적으로 달아주면 준비는 끝난다.

   먼저 전체 화면을 어둡게 덮은 화면을 설계하기 위해 너비와 높이를 뷰포인트에 맞춰주고 완전히 덮으면서도 뒤에 배치된 구조는 보일 수 있도록 투명도 값을 조절해준다. 그런 다음 모달의 내용이 될 text_box에 position을 absolute로 지정하고 위치가 화면의 정중앙에 올 수 있도록 transform값을 준다. 그런다음 이 모든 것이 사용자가 해당 아이디 주소로 넘어왔을 때 보일 수 있도록 none/block값을 지정하면 GIF의 예시처럼 모달창이 완성된다 :)

   책갈피 기능과 더불어 : target 속성을 처음 썼는데 웹문서 간의 절대경로 값만 입력해와서 책갈피 기능으로도 다양한 효과를 줄 수 있는게 신기하고 유익한 시간이었다.

해당 위치에 마우스 커서를 오버 했을 시 목록이 나타나게 만드는 HTML 코드를 작성해보았다.

아직 기능을 배우기 전이라 완벽하진 않아도 목록 자체가 나타나게끔 하면 된다고 하셨는데...

처음에 div 박스를 따로 만들어 리스트를 작성하고 해당 위치로 옮긴 다음 :hover를 이용하여 display:none과 block을 쓰려고 했으나 div 박스 자체에 none을 걸어버리면 hover될 위치도 사라져 해당 기능을 쓸 수 없었다! 그렇다면 선택자를 이용해 Pages 라는 단어에 hover 했을 시 형제 리스트가 나타나게끔 다시 코드를 작성해야 한다는 조언과 함께 새로 작성했다.

.pages:hover ~ #list_box

pages태그에 마우스가 올라왔을 때 형제 속성 중 list_box를 보이게 하라, 라고 입력하자 정상적으로 작동이 되었다...

(원래 쓰던거 그대로 복사 붙여넣기 해서 불필요한 박스가 많이 있지만 지금와서 보니 #list_nav에 display:none 값을 입력하고 #list_box:hover > #list_nav 를 했다면 아마 되지 않았을까 싶다)

https://hcl-yeon.tistory.com/8

어제는 헤더 부분만 해결했지만 오늘은 사이트 전체를 박싱하고 돔트리를 작성한 후 HTML작업을 진행했다.

마찬가지로 기능 부분은 모두 제외하고 배치와 스타일 부분만 했는데도 오래걸렸다...^-T

https://themewagon.com/themes/free-bootstrap-4-html5-restaurant-website-template-feane/

HTML문서로 옮길 때 블럭 요소를 예상해서 박싱처리를 해주었다.

nav부분이 background-image와 한 몸처럼 이루어져 있으니 두 요소를 함께 묶어서 해야하지 싶다…

그 외에는 크게 장식이 있는 게 아니라서 nav 부분이라도 완벽하게 재현하는데 힘써보자.

블럭 요소로 묶어낸 것 위주로 태그를 작성하고 스타일을 적용할 때 필요한 ID와 Class를 미리 써두었다.

(사실 먼저 작성한 트리는 실제 적용하면서 많이 달라져서 다시 작성했다, 다음에는 이런 일이 없어야 할텐데)

기능 부분은 아직 배우지 않아서 최대한 사이트의 외관 부분을 비슷하게 작성하는데 집중했다.

블로그에 이미지를 삽입하다보니 작아져서 잘 티가 안나지만 최대한 비슷... 한 사이트 완성.

처음에 작성했던 문서는 왕창 망했는데 그 부분을 써보면서 정리해보려고 한다.

같은 위치 값을 줬는데 맞지 않았던 건...

• 텍스트 부분을 따로 움직이고 싶어 relative 값을 입력했던 건 좋았으나 문서 자체 내의 위치 값과 무언가 어긋났던 모양이다. 수 차례 시도를 해도 미묘한 차이를 줄일 수 없어 어디서부터 손대면 좋을지 막막한 상태에 이르렀기에 다시 작성하기로 했다.
• HTML과 CSS를 한 곳에서 작성하다보니 혼란이 일어난 것 같아 파일을 분리해서 작성했다. background-image는 전체 화면에 나타나야 하니 이미지만 제외한 나머지 속성들에게 같은 클래스 값을 부여한 뒤 margin: 0 auto; 값과 최대 너비 값을 따로 지정하여 사이트 중앙에 배치 될 수 있도록 조절했다.
• 이후 다시 메인 텍스트 부분(div)만 relative 값을 주고 top 위치를 조절했더니 완성본과 같은 상태가 되었다.

매우 번거로운 꼼수란...

• 주먹구구식으로 공백 특수문자를 사용하여 억지로 위치를 조절했다. 그러면 안되는 걸 알지만 정렬에 관한 속성이 하나도 먹히지 않아서 flex 값을 줬다 뺏다 많은 일이 있었다.
• 한 객체의 값에 최대 너비를 지정하며 보더와 패딩 값을 이용해 적절한 위치를 맞추었다. nav 메뉴들에 속성 값이 듣지 않았던 건 <a>태그만을 이용해 구성했었는데 아마 인라인으로 작성됐기에 너비를 지정할 수 없었기 때문이었던 것 같아 <ul>과 <li>를 이용하여 블럭요소를 준 뒤에 조절하니 손쉽게 되었다.