1. 시작 전 잡담
SCSS 설치의 늪을 드디어 벗어나고....😂 드디어 웹사이트 디자인 클론 코딩 시작했다. 휴.. 비교적 간단한 디자인 구성이라 쉽게 생각했는데 의외의 복병들이 좀 있었다. 모든 코딩이 그렇겠지만 CSS는 한번 꼬이기 시작하면 속수무책으로 머리가 아파져서 중간에 울고싶은 순간이 있었다.😧 그래도 어쨌든 했으니 됐고! 좋았던건 처음으로 SCSS를 써봤는데 엄청 엄청 편하다는거다. 물론 아직 이게 어떤 구조로 움직이는건지 gulp에 대한 정확한 이해가 없어서 파일 하나 잘못 건드릴까 전전긍긍하긴하지만.. ㅠ 그래도 nesting 하는거나 변수 설정하는게 꽤 유용하다. SCSS 활용하는거 처음에 보고 오랜만에 눈이 휘둥그레해졌었다. 잘써봐야겠음..
작업하면서 새로 알게된 부분을 까먹기전에 정리해놔야겠다.
2. 클론한 사이트
링크
구성은 굉장히 심플하다. 왼쪽에 헤더와 네비게이션바가 고정되어있고 메인컨텐츠인 영화 목록이 나열되어 있어서 스크롤하면서 보는 구조다.
3. html 구조
크게 header와 main으로 나누고 header안에 제목, 설명, 네비게이션바를 넣었다. main안에는 div class = "movie"가 하나의 영화를 구성하는 전체 태그. 그 안에 영화제목과 감독, 사진을 넣었고 플렉스로 정렬했다.
<body>
<header>
<h1>Best Horror Scenes</h1>
<h3>
An ever growing collection featuring some of the best scenes in
horror.
</h3>
<p>
“Best Horror Scenes” is a collection of scenes I feel are some of the most affecting in horror.
</p>
<nav>
<ul>
<li>Watch on YouTube</li>
<li>Suggest a Scene</li>
<li>Get Episode Notices</li>
<li>Contact</li>
<li>RSS</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="movie">
<div class="wrapper">
<div class="movie__header">
<h4>38.Herditary (2018)</h4>
<h5>Directed by Ari Aster</h5>
</div>
<img src="poster1.png"/>
</div>
</div>
</main>
</body>4. 주요하게 사용한 개념
position:fixed 로 헤더 고정시키기
Position: fixed
말 그대로 화면에 고정 시키는 의미.
이를 활용해서 웹 페이지 상단에 고정된 네비게이션 바를 만들 수 있다.
position을 설정할때는 기본적으로 offset(떨어진정도)도 함께 설정을 해줘야한다. (top, left 등)
box-sizing: border-box를 html 전체에 적용하기
box-sizing
박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
content-box : 컨텐츠 영역을 기준으로 크기를 정한다
border-box : 테두리를 기준으로 크기를 정한다
initial : 기본값으로 설정합한다
inherit : 부모 요소의 속성값을 상속받는다content-box는 컨텐츠의 크기를 지정하면 테두리에 패딩, 마진값에 따라 전체 크기가 달라진다.
반면 border-box는 컨텐츠의 크기를 지정한 뒤 패딩,마진값을 설정하면 컨텐츠의 크기가 이를 반영하여 줄어들어서 컨텐츠가 짤리는 현상을 막을 수 있다.
스타일을 줄때마다 자꾸 요소들이 화면밖을 벗어나서 멘붕에 빠졌는데, 알고보니 이 박스사이징 속성값을 보더박스로 주면 해결할 수 있는거였다. css 박스모델 공부할때 배웠던 기억이 나는데 의외로 꽤 중요한 녀석이었다니....
* {
box-sizing: border-box;
}header 사이즈만큼 메인에 margin-left값 주기
헤더를 꾸민 뒤 메인으로 넘어갔는데 배경색을 지정하자 헤더까지 침범하여 빨간색으로 덮어져버렸다. 이걸 막기 위해서 header 사이즈만큼 margin-left값을 줘서 옆으로 밀어냈다.
화면 구성할때는 width값을 퍼센트로 주기
태그 하나 하나마다 위아래 패딩,마진값을 주면서 화면 구성을 하는 건 상당히 비효율적이다. 내가 이것 때문에 속터져서 css를 별로 안좋아한것도 있었는데, 전체 width를 지정하고 그에 대한 퍼센트로 조절을 하면 훨씬 편리하다는걸 새로 알았다! 그리고 height값은 일단 플렉스로 전체적인 큰그림을 잡고 이후 디테일은 margin-top이나 bottom으로 주는 스킬을 새로 배웠다. 앞으로 웹사이트 코딩 몇개 더 하면서 숲 -> 나무를 그려가는 연습을 더 해야겠다.
5.부족한 부분
-
html 전체 틀 잡기를 혼자 하는게 아직 쉽지 않다. 패턴은 대충 익숙해졌지만 막상 새로운 페이지를 보면 어떻게 할지 멘붕이 오는것....
응용 능력은 무수한 연습을 통해 얻게 되는것 같다. 하핫 -
position: fixed 외에 absolute나 relative를 어떻게 쓰는지 완죠니 까먹었넴... 하지만 이걸 쓰게 되는 시점의 미래의 내가 새로 공부할거라 믿는다. 셀프 똥투척 ㅎㅎㅎㅎㅎ
