Wecode가 드디어 시작되었다.
'시작이 반이다'라는 유명한 문구처럼 중요한 이 시작을 정말 간결하고 깔끔하게 만들어 주니어 개발자를 넘어 시니어 개발자가 되었을 때도 잘 활용하고 있는 내가 되었음 좋겠다.
그러므로 'WeCode 사전스터디 시리즈' 게시물에는
- 자기소개 페이지 만드는 모든 과정, 수정되는 부분수정되는 부분
- 주마다 주어진 Assingment
- 그리고 그 과정을 겪는 나의 감정을 적을 예정이다.
1week goal
💻 HTML&CSS 개념익히며 자신만의 개성있는 자기소개 페이지 만들기
예전에 취성패로 웹퍼블리셔 과정을 들었었는데 그 때 만들던 포트폴리오를 떠올리며 이번에는 복잡하지 않고 심플하면서 나에게 익숙한 JQuery가 아닌 JS로 만들어야하는 부담감이 있지만 도전과 배움은 재밌으닌깐 또 새롭게 시작해본다.
1. Photoshop으로 페이지 설계하기
간단하고 복잡하고를 떠나 기본적인 Web Standard를 잘지키는게 중요하고 그 첫 걸음은 잘 짜여진 레이아웃에서 시작된다고 생각하다.
그러니 FE도 웹디자인의 기본적인 구성 하는 방법을 알아야한다.
2. HTML로 기본구조 구축하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>about_me</title>
</head>
<body>
<header>
<div id = 'logo'></div>
<nav>
<ul>
<li>main</li>
<li>likes</li>
<li>coding</li>
<li>contact me</li>
</ul>
</nav>
</header>
<main>
<div class="tulip"></div>
<wrap>
<div class="Wbox">
<div class="MainMemoji"></div>
<div class="MainContent"></div>
</div>
<div class="Wbox">
<div class="LikesMemoji"></div>
<div class="LikesContent"></div>
</div>
<div class="Wbox">
<div class="CodingMemoji"></div>
<div class="CodingContent"></div>
</div>
<div class="Wbox">
<div class="CMMemoji"></div>
<div class="CMContent"></div>
</div>
</wrap>
</main>
</body>
</html>내용을 넣지 않은채 큰 틀을 짜서 구축해 보았다.
일반 페이지가 아닌 자기소개 페이지나 포트폴리오 레이아웃 짜는게 다양성이 있기에 개성이 있으나 정해져있는 방법이 없어 힘들다😂
최대한 복잡하지 않으면서 시멘틱 구조를 지키고 싶어
header,main만 쓴 뒤
header에는 logo와nav를 써서 menu를 넣었고
main에는class = "wrap"을 넣어 디자인할 때 썼던 비율을 전체적으로 맞추기 위해 사용하였다.
3. 디자인보고 각 부분을 세세하게 HTML짜기
웹퍼블리싱을 배웠을 때 좋은 점은 포토샵으로 각 페이지나 메뉴 부분을 짠 뒤 layer을 숨겼다 보였다하면서 시간이 지나거나 버튼을 눌렀을 때 다른 내용이 보여지는걸 디자인하고 코딩을 어떻게할지 전체적인 틀을 짤 수 있었어서 좋았다.
(하지만 스케치라는 프로그램은 수동이 아닌 진짜 페이지가 동적으로 구연하는 것처럼 보여주는 기능이 있어 시간 날 때 배우고 싶기도하다.)
나의 자기소개 페이지는 스크롤 없이 심플하게 만들 생각이라 나중에 쓸 JS 기능을 생각하여 main, likes, coding, contact me 메뉴를 만들어 그 content는 똑같은 레이아웃을 설정해논 class를 사용하여 메뉴를 누르면 거기에 맞는 content는 나오고 나머지는 없어지게하는 틀을 생각하며 세세하게 짜게 되었다.
4. CSS로 꾸며주기
학원에서 들었을 때는 간단한 페이지는 정말 쉽게 만들었었는데 건 5-6개월 손을 놓으니 예전에 만들어 놨던 페이지를 보면서 다시 복습하고 만든다고 정말 많은 시간이 들였다.
그리고 하고싶은 CSS요소들이 너무 많아 또 처음에 생각했던 심플한 느낌과 다르게 가는 것 같아 고민을 많이하게 되었다.
중요하게 생각한
CSS포인트는
- main, menu 글자
hover했을 때 뒤 배경이 스스륵 나타나는 것- main 글자
hover했을 때 글자가 다르게 나타나는 것main 글자click했을 때 작은 pop up 페이지가 나타나는 것
(css로 할 수 있을 것 같지만 JS로 나중에 간단하게 하는 것이 낫다고 생각)- likes 글자
hover했을 때 숨겨져있던 content들을 보여주는 것
hover 했을 때 뒤 배경이 나타나는 것
기본적인 틀은 뒷 배경이 width: 0px이였다가 hover하면 widht: 100%로 바꿔 사용자게에 보여지게 되는 것이다. (뒷 배경은 가상태그 ::after을 이용하여 만들었다.)
<div>안녕하세요</div>div { font-size: 15px; position: relative; } div::after{ content: ''; font-size: 0px; width: 0%; background-color: blue; position: absolute; top: 0; left: 0; } div:hover::after { width: 100%; transition: 0.2s; }이렇게 하고
hover을 하면 뒷 배경이 왼쪽에서 부터 나타나는 것을 볼 수 있다.
여기서 포인트는 본 객체에relative를 넣어야만 가상태그의 부모가 되어absolute를 넣는다고해서 body를 부모로 생각하지 않는다. (기본적으로 body태그를 부모로 인식)
그리고 가상태그에 내용을 넣은 생각이 없다면content속성에 ''을넣고font-size속성에는 기본 브라우저가 설정되어있는font-size값에margin,padding이 있을 수도 있으니 0px로 잡아놓고 하고 싶은 속성을 넣는다.
그리고 배경색이 생기는 기준을 왼쪽에서 잡고싶다면left를 0으로 반대의 경우면right를 0으로하여 기준점을 잡으면 된다.
hover 했을 때 글자가 다른 글자로 바뀌는 것
JS로 객체의 글자 내용을 바꿀 수 있지만 CSS로도 충분히 쉽게 바꿀 수 있다. hover했을 때 본 글자 사이즈를 0px로, 이번에도 가상태그를 만들어서 그 글자는 사이즈 0px에서 up을하여 transition: 0;을 하면 글자가 바뀐 것처럼 보여진다.
<div>글자가 바뀌는 구간</div>div {font-size: 15px;} div { content: '글씨가 바뀌었습니다.'; font-size: 0px; } div:hover {font-size: 0px;} div:hover::after{font-size: 15px;}이걸 만들기 전에는
transform이용하여 만들어야 고민하고 시도해봤지만 그렇게 되면 위와 같이postion을 각각 줘야하고 작동을 하지않는데 꼬여만가서 검색하고 해본 방법인데 간단하면서 작동이 잘되었다. 여기서 포인트는transition값을 주면 안된다는 것이다.
만약 주게되면 본 글자는 커지는게 가상태그 글자는 줄어드는게 눈에 보이며 시각적으로 딱히 이뻐보이지도 않는다.
hover했을 때 숨겨져있던 content들을 보여주는 것
글자 밑으로 내려오게할 content를 묶어 하나의 그룹처럼 div를 구성한 뒤 Title을 hover하고 있을 때 content들의 height와 opacity를 변경하여 나타나게끔 해준다.
<div class="LikesTitle">Hobbies <div class="box"> <span class="list h1"></span> <span class="list h2"></span> <span class="list h3"></span> </div> </div>.LikesTitle:hover .box { height: 126px; opacity: 1; transition: 1s; cursor: pointer; } .LikesContent .box { height: 0px; opacity: 0; }여기서 단점은
height의 정확한 수치를 지정해줘야 contents부분이 잘리지 않고 낭비하는 공간이 없어서 반응형에는 맞지않는 방법이다.
(메인 page 완성🤗)
다음 계획
JS를 공부하여 기존에 했던 JS를 클린하게 만들고 event적인 요소를 적절하게 넣어 더욱 효과적으로 보이게 만들고 싶으며, 시간에 쫒겨서 하지 못했던 css적인 요소를 UI/UX를 고려해서 첨가하고 싶은 마음이다.
