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축 순서로 작성한다.