잠깐! 시작하기 전에

이 글은 wecode 사전 스터디에서 실제 공부하고, 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다.

또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다. 따라서 원문의 포스팅들이 틀린 정보이거나, 해당 개념에 대한 작성자의 이해가 부족할 수 있습니다.

설명하듯 적는게 습관이라 권위자 발톱만큼의 향기가 조금은 날 수 있으나, 엄연히 학생입니다. 따라서 하나의 참고자료로 활용하시길 바랍니다.

글의 내용과 다른 정보나 견해의 차이가 있을 수 있습니다.
이럴 때, 해당 부분을 언급하셔서 제가 더 공부할 수 있는 기회를 제공해주시면 감사할 것 같습니다.

HTML-CSS

project - github repo

위 링크에서 파일들을 보실 수 있습니다. 해당 글에서 코드로 보여드리는 것은 코드의 일부임을 명시하고 시작하겠습니다.

HTML 구성

먼저, HTML 문서의 경우 아주 긴 하나의 파일로 구성되어 있습니다.

이번 자기소개 페이지는 SPA, Single Page Application 으로 구성을 해봐야겠다는 생각이 들었기 때문입니다.

이유가 있다면 단지 Javascript를 활용하기 때문인데, 사실 이전 non-Javascript 자기소개 페이지도 단일 페이지에 modal을 추가한 형태였으니 명맥을 이어간다는 느낌도 있겠습니다.

또한, 반응형 웹을 떠올리면 저도 모르게 단일 페이지에서 별다른 움직임 없이 다양한 애니메이션을 경험할 수 있게 하는 것이 우선이 아닐까 생각하고 있기 때문입니다.

이에 HTML 파일 하나에 모든 element들이 들어있어 조금 길어졌습니다.

CSS 구성

CSS 파일같은 경우에는 4가지 파일로 나뉘어져 있습니다.

개인 프로젝트기에 파일의 작명은 제 마음대로 하지만, reset.css와 같은 파일은 관례적으로 내려오는 파일명을 그대로 사용하는 것으로 보시면 됩니다.

reset.css

먼저, 모든 작업 이전에 습관처럼 reset.css 라는 스타일 초기화 문서를 추가하고 시작합니다.

이는 구글에 검색하면 다양한 파일들이 자유롭게 배포되고 있으나, 전부 사전에 브라우저에서 설정한 DOM element들의 initial값을 제거하기 위한 파일입니다.

reset.css 파일을 사용하게 될 경우 개발 당시 의도치 않은 style 속성을 마주하는 경험(ex: margin)을 피할 수 있습니다.

screen.css

screen.css의 경우 Javascript를 사용하지 않을 때, 주로 사용하는 파일입니다.

이 파일은 주로 html, body 등과 같이 부모 element에 해당하는 내용 또는 @media 와 같이 특정 조건을 만족할 경우의 출력 화면 변화 내용을 담고 있습니다.

따라서, 해당 페이지를 제작하는 데 있어 screen.css의 경우 html과 body의 초기값만을 포함하고 있으니 넘어가도록 하겠습니다.

container.css

container.css의 경우 <div class = "container"></div> 에 해당하는 element들의 css style 내용입니다.

대부분의 HTML element들이 container 내부에 있기 때문에 사실상 전체 style을 담당한다고 봐도 무방하겠습니다.

container, main-block(flex box)

제가 주로 사용하는 css 속성은 flex입니다.

아무래도 레이아웃을 구성하는 데 있어 익숙하기도 하고, 아무것도 모르고 입문했던 시절 flexbox로 대부분의 요소들을 다루던 습관이 남았기 때문입니다.

여유가 된다면 차후에는 grid를 활용한 레이아웃을 구성해보고 싶네요.

.container {
  width: 100%;
  display: flex; // flexbox 취급 선언
}

.main-block {
  width: 64%;
  display: flex; // flexbox 취급 선언
  flex-direction: column; // 세로방향으로 요소들을 나열
  justify-content: center; // 세로축 가운데 정렬
  align-items: center; // 가로축 가운데 정렬
}

위 코드에서처럼 container로 한 번 요소들을 둘러쌌습니다.

이후 container 내부에 있는 main-block은 다양한 html 요소를 세로로 나열하게 됩니다.

이번 페이지가 스크롤 이벤트를 활용한 애니메이션을 잔뜩 구현할 예정이기 때문에 flex-direction 의 경우 세로방향인 column을 사용했습니다.

이후 코드에 있는 justify-content, align-items는 정렬에 대한 속성입니다.

해당 포스팅(시리즈)은 개념 설명보다는 이번 페이지의 변화, 이벤트들의 구현방식을 다룰 예정이기 때문에 자세한 개념 내용은 외부 포스팅으로 대체하도록 하겠습니다.

1분코딩 - CSS flex

정말 글로도 설명을 잘 해주시지만, 강의영상으로도 잘 해주시는 분이 아닌가 싶습니다. 더 많은 자료들이 있으니 둘러보시길 추천드립니다.

intro-block(position, z-index)

.intro {
  width: 100%;
  height: 3200px;
  display: flex;
}
.intro__block {
  display: flex;
  width: 64%;
  height: 64%;
  line-height: 1.5rem; // 줄 간격
  position: fixed; // viewport 내 요소 위치 고정
  top: 50%; // 위에서 50% viewport height 만큼 떨어져있음
  left: 50%; // 왼쪽에서 50% viewport width 만큼 떨어져있음
  transform: translate(-50%, -50%);
  // 요소의 width, height 값 기준으로 (x:-50%, y:-50%) 이동
  background-color: white;
  box-shadow: 0 0 10px 10px white; // 경계선 blur 처리
  z-index: 1; // 레이아웃 우선순위 클 수록 위에 가장 위에 올라옴(z축 좌표값으로 이해하셔도 됩니다.)
}

자, 갑자기 이것 저것 많이 추가된 모습을 볼 수 있습니다.

해당 코드는 가장 처음 제공되는 애니메이션의 스타일을 담당하는 블럭입니다.

뭐 기존에 많이 보는 내용들이지만 position과 z-index의 경우 새로운 개념으로 볼 수 있겠습니다.

자세한 내용을 설명하지는 않겠지만, 코드에 개념을 적어두겠습니다.

또한 top, left, transform은 해당 수치들이 통일되어 있는데, 이는 가운데 정렬을 의미하는 코드가 됩니다.

viewport 기준으로 항상 정가운데에 요소가 위치하게 되는 효과가 있습니다.

z-index는 레이아웃을 맨 위로 혹은 맨 아래로 보내는 편리한 기능도 있지만, 보다 세밀하게 작업할 수도 있습니다.

이 정도면 제가 사용하는 css 파일 내에서 특별한 개념은 더 없다고 생각합니다.

이제 Javascript로 넘어가봅시다.