IT 배움터

본격적으로 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> 태그