IT 배움터

해당 위치에 마우스 커서를 오버 했을 시 목록이 나타나게 만드는 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>를 이용하여 블럭요소를 준 뒤에 조절하니 손쉽게 되었다.

본격적으로 HTML을 사용하여 홈페이지를 제작하는데 있어 필요한 단계를 배우고 연습해보기로 했다.

아래의 사이트는 별도의 회원가입 없이 무료로 풀린 홈페이지 템플릿의 소스를 받아 직접 배치해볼 수 있었다.

테마 웨건(theme wagon) 사이트 바로가기 : https://themewagon.com/

   1. 박싱처리 (블록요소 미리 나누기)   

   먼처 큰 섹션을 나눠서 구분하고 그 안에 배치될 요소가 가질 태그와 속성을 고려해 나눠본다.

개발자마다 다를 순 있겠지만 크게 세로로 쌓아갈지, 가로로 쌓아갈지를 정한다고 한다.

   2. 돔트리 작성   

드로우아이오(draw.io) : https://app.diagrams.net/   

   본격적으로 HTML을 작성하기 전, 나눠둔 섹션을 따라 돔트리(DOM)라는 밑그림 작업을 시작한다.

처음에는 그냥 화면만 보고 따라서 배치하면 되는 것 같았지만 막상 들어가니 생각대로 안되는 경우가 많아 기초가 튼튼해야 한다는 말이 무엇인지 경험으로 알게되었다(...) 특히 이번 돔트리에는 클래스 명과 아이디를 그렇게 세세하게 지정하진 않았는데 엔간하면 각자 지정해 주는 편이 뒤에가서 손이 덜 가는 것 같다.

   3. HTML 작성   

폰트 어썸(font awesome) : https://fontawesome.com/

   이제 돔트리를 바탕으로 HTML을 작성해주면 되는데 여기서 폰트 어썸 이라는 사이트를 통해 사이트에 필요한 아이콘들의 코드를 가져와 문서에 붙여넣을 수 있다. 회원가입을 하면 스크립트 코드가 주어지는데 복사하여 문서 내 헤드 부분에 삽입을 해주면 쉽게 페이지를 꾸밀 수 있다. (단, 이 방법은 사이트가 다운되었을 시 제대로 작동하지 않는다는 단점이 있다)

   4. CSS 작성   

돔트리를 기반으로 HTML작성이 끝났다면 홈페이지의 외관을 작성해줘야 한다. 헤드에 스타일을 넣어 바로 꾸며줄 수도 있지만 홈페이지와 같이 양이 늘어나다 보면 CSS의 내용도 HTML 못지 않은 길이가 되기 때문에 CSS파일을 따로 작성해 서로 연결시켜주는 작업이 필요하다.

<link rel="stylesheet" href="스타일 시트(CSS) 경로 지정">

background

   다중 이미지 삽입의 확인을 위해 기본값으로 설정되어 있는 repeat 반복 값을 없애고 크기가 다른 이미지를 삽입해보면 제일 위에 쌓인 순서대로 깔려 삽입되는 것을 확인할 수 있다.

Transitions

※ CSS속성의 전환 효과를 지정 - CSS 속성의 시작과 끝을 지정하여 중간 값을 애니메이션함

Transfrom

※ 요소의 변환 효과(모양의 변형)를 지정

backface-visibility

    rotate 값이 90도를 넘어갈 경우  요소의 뒷면에서 앞면이 보이게 할 지 설정하는 속성. 기본 값으로 보여지게 설정되어 있으나 만일 숨기고 싶은 경우에는 hidden 값을 주면 된다.

transform: perspective( )

    쉽게 말해 가상의 눈을 만들어 관찰자의 거리를 정하는 요소이다. px단위는 관찰자의 눈이 요소로부터 얼마나 떨어져 있는지의 거리를 나타내며 값이 작을수록 요소가 확대되어 나타난다.

transform-origin

    관찰자의 눈의 위치를 지정하는 속성이다. X축과 Y축 순서로 작성한다.

padding / margin

※ 박스의 안쪽 여백 / 박스의 바깥쪽 여백

display

※ 요소가 지닌 속성을 바꾸거나 재배치 할 때 사용

font

※ 글자와 관련된 속성들을 지정함

하나하나 지정하기엔 속성이 너무 많아 번거롭다면 단축 속성을 활용하자.

font : [style 값]　[weight 값]　[size 값] / [height 값]　[family 값]

※ 빨간 글씨 부분은 반드시 포함되어야 하는 값이며, 이외의 값은 생략해도 문제없다.

position

※ 텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성

속성 선택자

이벤트 가상 선택자

구조적 가상 선택자

기타 가상 선택자

조합 선택자

※ 기존의 여러 선택자를 '복합적' 으로 조합하는 방법

선택자 연습용 미니게임 바로가기(CSS Diner) ▶ https://flukeout.github.io/

   선택자 관련 내용의 공부는 CSS Diner 게임으로 복습하는게 괜찮았던 것 같다.

   아래는 오답노트 겸 전 레벨 정답을 적어두도록 하겠다.

Level1   plate

• 쉽다, <plate> 태그를 선택하는 문제.

Level2   bento

• 접시와 도시락이 나란히 있다, 여기서 도시락을 고르는 문제. 1레벨과 동일하다.

Level3   #fancy

• 접시 두개 중 장식이 된 접시를 고르는 문제. 장식된 접시는 fancy라는 ID값을 가지고 있으니 #으로 해당 ID값을 입력하면 된다.

Level4   plate apple

• 반드시 접시 위에 있는 사과만 선택해야 하기 때문에 후손 선택자를 이용하면 된다.

Level5   plate#fancy pickle 또는 #fancy pickle

• 반드시 꾸며진 접시 위에 있는 피클을 선택해야 하기 때문에 후손 선택자를 이용하면 되는데 '꾸며진 접시' 값을 입력해도 되고, 해당 ID는 고유의 값이기 때문에 '꾸며진' 값만 주어도 문제 없다.

Level6 .small

• 클래스 값을 입력하는 문제, 사과들 중에서도 '작은' 클래스를 가진 사과만 선택하면 되기 때문에 .을 찍고 선택하고자 하는 클래스 명을 입력하면 된다.

Level7 orange.small

• 오렌지들 중에서도 작은 오렌지만 골라야 하는 문제, <orange> 태그와 함께 해당 클래스 명도 공백없이 입력해주면 small 클래스 값을 가진 오렌지만 선택할 수 있다.

Level8 bento orange.small

• 도시락 위에 있는 오렌지들 중에서도 작은 클래스를 가진 오렌지를 고르는 문제, 후손 선택자를 이용하면 간단하다.

Level9 plate, bento

• <plate>와 <bento>만 선택하면 된다. 그룹 선택자를 통해 해결하자.

Level10 *

• 모든 오브젝트가 흔들거리고 있다, *을 써서 모두 선택하면 된다.

Level11 plate *

• 큰 사과, 작은 오렌지, 그리고 피클이 선택해달라 시위하고 있다. 공통점을 찾아 보자면 모두 접시 위에 있으므로 부모인 접시 위에 있는 모든 채소를 선택하면 되겠다. 다만 종류가 다양하니 후손 선택자로 공백에 유의하며 모든 객체 선택인 *을 써주면 된다.

Level12 plate+apple

• 같은 형제인 값이 다른 사과 둘의 공통점을 보아하니 모두 접시 옆에 위치해 있다. 인접 형제 선택자로 옆의 사과만 골라내면 된다.

Level13 bento~pickle

• 많은 피클 중에서 도시락 옆에 위치한 피클 두 개만 골라내야 한다. 해당 태그는 어디에 속한 태그가 아닌 도시락과 같은 형제이니 일반 형제 선택자를 사용하면 된다. 그 뒤로 나열된 피클들은 모두 접시라는 부모를 가지고 있기 때문에 같은 형제가 아니라서 선택되지 않는다.

Level14 plate>apple

• 접시 위에 있는 사과가 한 개 뿐이라고 일반적인 후손 선택자를 쓰면 왼쪽에 위치한 사과도 함께 흔들리게 된다. 후손 선택자는 말 그대로 자손의 후손도 포함되기 때문에 여기서 쓸 수 없고, 자손 선택자를 써서 골라줘야 한다.

Level15 orange:first-child

• 오렌지 세 개가 접시에 나란히 올라 있는데 그 중에서 첫 번째를 골라야 한다. first-child 선택자를 쓰면 되지만 이 방법은 만약 다른 접시에도 오렌지가 있다면 그 아이도 함께 선택되니 유의하자.

Level16 plate *:only-child

• 접시 위에 외동인 사과와 피클이 있다. 하지만 옆 집에 사는 도시락에도 피클이 외동으로 있으니 단순 그룹 선택자로 하나하나 지정하는 방법은 안되고, 후손 선택자를 사용해 포괄적으로 지정하면 된다. 접시 위에 있는 후손이 외동일 경우에 선택해달라는 의미이다.

CSS

• 스타일 시트의 표준안으로 웹 문서에 글꼴, 색상, 정렬과 각 요소의 배치 등 디자인 요소를 적용하는데 사용
• 문서 작성과 디자인을 분리하여 관리함으로써 수정에 용이
• 하나의 요소에 인라인 스타일 시트가 중복 정의된 경우에는 제일 마지막(적용될 태그와 가장 인접한) 값이 적용되며, 이를 무시하고 강제로 적용할 때는 !important 를 표시하여 사용

   HTML에서 기본적으로 지원하는 태그 이외에 사용자가 임의적으로 생성한 태그 또한 쓸 수 있다. 하지만 태그에 속성값을 넣는 것 말고는 주어진 효과가 없어서 구분을 지어 나열했을 시에 한줄로 입력이 되는 것을 확인할 수 있었다.

글로벌 속성의 종류

<a href="URL">

<table> 태그

<img> 태그

<audio>, <video> 태그

<form> 태그