👨💻현재 자기소개 웹사이트 상황
현재 틀만 만들어 놓고 이어나갈려고 하나씩 만들어 놓고 있다.
#achivement 페이지에서 내 업적(?)들은 이 사이트를 참조해서 css effect를 넣었다.
그리고 밑의 두 사이트를 참조해서 만들고 있다.
👨💻 To do list
- contact section 만들기
- about페이지의 사진을 position: absolute로 배치하기
- js 적용해서 contact에 효과 넣기
- section마다 색깔 다르게 적용하기(파스텔 계열)
- 위에 nav에서 Home으로 누르면 깔끔하게 이동하게 하기(top이 nav바로 밑인 위치로 이동된다;;)
👨💻 개발 중 의문
- em과 rem 차이가 뭐였더라 기억이 잘..
- 왜 다들 css에서 position: absolute를 사용하는거지?! absolute를 하면 바로 위로 올라가서 불편하기만 하고 그냥 넣어서 다른 요소 밑에 자연스럽게 배치되게 하는 것이 나을 것 같은데?!
👨💻 개발 중 의문 solution
1. em과 rem의 차이
em과 rem은 둘 다 font-size에 의존한다. 하지만 차이는 em은 현재 요소의 font-size에 의존한다. 하지만 rem은 root+em으로서 html의 font-size에 의존을 한다.
html{ font-size: 16px; } div{ font-size: 20px; width: 0.5em; height: 0.5rem; }
이런 경우에 div의 width는 10px이고 height는 8px이 되는 것이다.
2. position:absolute를 사용하는 이유
오버플로우의 글을 보니 오히려 position:absolute를 다른 요소들을 신경 안쓰고 절대적인 위치에 놓을 수 있으니 난이도가 더 낮아진다고 생각하는 것 같다.
그리고 아무래도 절대적인 위치이다보니 겹쳐서 사용할 수도 있는 것도 사람들이 많이 쓰는 이유라고 한다.
물룬 다른 이유들도 있었지만 이것들이 내가 가장 납득이 되는 이유들이고 나는 absolute가 고급 기술인 줄 알았는데 오히려 반대여서 좀 놀랍다 ㅎ.
👨💻 개발 중 습득 지식
1. animation과 @keyframes 사용법
animation과 @keyframes는 같이 css에서 사용되는데 우선 적용할 태그에
#contact .category h2{ font-size: 3rem; animation-name: grow; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-direction:normal; }
이런 식으로 animation의 이름부터 시간, 방향 등을 지정해준다. 그리고 밑에
@keyframes grow{ from {font-size: 1rem} to {font-size: 0.1rem}} }
이런 식으로 마치 함수 써주듯이 써주면 된다.
2. transform:translate 뜻
transform: translate(x축, y축)으로서 transform: translate(-50%, 0)같은 경우는 x축 음의 방향으로 요소의 50%만큼 이동시키라는 뜻이다.
이것으로 position:absolute 속성을 부여한 요소를 간편하게 이동시킬 수 있으며 이동을 위한 패딩을 주지 않고(나는 이때까지 그랬다...ㅎ) transform:translate로 원하는 곳으로 이동시킬 수 있다.
3. html 줄 사이 빈칸 넣기
line-height : 2em;
4 html에 빈칸 넣기
&emsp를 사용하면 빈칸 4칸을 넣을 수 있다.(연속으로 사용할 때는 ; 꼭 넣기)
👨💻 오늘 한 것
1. contact section 만들기
html 코드
<section id = "contact"> <div class="category"> <h2>contact</h2> </div> <div class="link"> <ul> <li><a href="https://velog.io/@otteru/posts">Velog</a></li> <li><a href="https://github.com/otteru">Github</a></li> </ul> </div> </section>
css 코드
#contact { display: flex; align-items: center; justify-content: center; color: whitesmoke; background-color: #81829f; flex-direction: column; } #contact .category{ padding: 30px; height: 1.3em; overflow-y: hidden; margin-bottom: 30px; } #contact .category h2{ font-size: 3rem; animation-name: grow; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-direction:normal; } #contact .link{ height: 1.5em; overflow-y: hidden; } #contact ul li{ padding-right: 50px; } #contact ul li:hover{ text-decoration: underline; } #contact ul li:last-child{ padding-right: 0; } @keyframes grow{ from {font-size: 1rem} to {font-size: 1.5rem}} }
여기서 @keyframe을 제대로 이해하고 응용했던게 좋은 학습이었다. 그리고 위에서 언급한 @remon님의 자기소개 사이트를 참고해서 만들었는데, 그러다가 페이지 색도 좋아서 따라 사용하게 되었다. 다음에 페이지 색들 파스텔톤으로 다 다르게 만들자.
2. about section에서 img position:absolute로 배치하기 & 본문 내용 추가 및 배치
css 코드
#about{ padding-top: 70px; } #about img{ position: absolute; height: 700px; transform: translate(-150%, 0); } #about p{ position: absolute; text-align: left; font-size: 20px; transform: translate(200%, 35%); line-height : 2em; } #about .index{ font-weight: bold; }
다른 사이트들을 참고할 때면 항상 position: absolute를 사용한다. 그런데 내가 사용하면 이미지가 막 첫페이지로 올라가고 해서 너무 애먹어서 외면하고 있다가 오늘 극복할겸 연습으로 img 배치를 position:absolute로 했다. (하다보니 옆에 있는 p도 absolute로 배치함).
항상 올라갔던 이유는 다들 top:0를 같이 써서 항상 내가 absolute를 적용한 요소가 위로 올라간 것이었다 ㅎ.
그리고 오히려 절대적이니까 다른 요소를 신경쓰지 않고 막 배치할 수 있어서 오히려 위에서 언급한 오버플로우 내용처럼 상대적 배치보다 절대적 배치가 쉽다고 느껴졌다.
이 과정을 통해서 position:absolute에 대해 확실히 알고 transform:translate도 알게 되서 좋은 연습이었다고 생각한다.
또한 본문에도 motto를 추가하고 글 위치랑 줄 간격을 띄우면서 line-height와 &emsp를 알 수 있었다.
3. achive section에 소제목 추가
위치는 조정해야겠네:)
👨💻 소감 및 계획
처음 velog로 정리하면서 코딩해보았는데, 정리가 되면서 개발을 하니 야생의 개발(?)이 아니라 그래도 어느정도 정돈된 개발을 한 것 같다.
그리고 그냥 넘어갈 내용도 정리를 해야 하니 지식을 좀 더 찾아보게 되고 좀 더 밀도있는 코딩을 한 것도 긍정적인 요소 중 하나라고 생각한다.
다음에는 오늘 못한
- js 적용해서 contact에 효과 넣기
- section마다 색깔 다르게 적용하기(파스텔 계열)
- 위에 nav에서 Home으로 누르면 깔끔하게 이동하게 하기(top이 nav바로 밑인 위치로 이동된다;;)
이 3가지 목표들을 해보자.
“Dream as if you will live forever; Live as if you will die today.”
― James Dean ―
