#1. 수강 과목 : Notion, HTML, CSS
#2. 수강 콘텐츠 : 노션 사용법 및 노션 편집, 자기소개 홈페이지 만들기 2일차
어제는 전체적인 설계도였다면 오늘은 새로 알게 된 내용과 수정한 내용 중심으로 순서대로 적으려고 한다.
- 미션 중 네비게이션바가 상단에 추가된 상태에서 고정된 효과는 position을 fixed 시켜서 완성했다. 하지만 어제는 다 된 줄 알았던 것이 다시 읽어보니 아닌 것이 있었으니 그것은 마우스를 클릭할 때 네비게이션 바의 색상이 변하는 것. 여기서 3가지 개념을 알았는데
- a:hover - 포인터를 올렸을 때 반응한다.
- a:active - 포인터를 클릭했을 때 반응한다.
- a:visited - 포인터를 누른 이후에 반응한다.
여기서 나는 hover를 썼었는데 다시 보니 active를 했어야 했던 것이다.
.navi li a:active{
background-color: forestgreen;
color: white;- 그 외 자잘한 css를 손 보고 두 basic페이지 이미지 바꾸기, 버튼 손보기, 폰트 바꾸기를 했다. 폰트 바꾸기는 구글 웹폰트를 이용했고 공통 코드는 다음과 같다. 먼저 head에 링크를 걸고
<link rel="preconnect" href="https://fonts.gstatic.com">
```
```
html{
font-family: 'Nanum Pen Script', cursive;
}home.css 상단에 Html 전체에 웹폰트가 걸리게 했다. navi도 글씨체를 바꾸기 위해 기존에 설정된 글자체를 지웠다.
-
그냥 block하고 inline-block 개념 헷갈렸는데 화면을 전체 다 쓰면 block, 일부만 쓰면 inline-block이다.(생활코딩 참고) 그래서 navi css에서 li 내용들이 전체 블럭 시에는 가로 정렬이 아니라 세로 정렬로 전체를 먹는 것이고 inline 처리 되어야 각각이 줄을 먹으므로 긴 것이 되는 것이다.(이 개념이 맞는지 모르겠다만 그렇게 이해 했음. 실제로 반대로 해봤더니 원하는 모양이 안 됨)
-
박스모델
padding : 블록 내에 여백
margin : 블록과 블록의 여백
강의 보고 나서 padding으로 여백 주려던 것 다 마진으로 바꿨다. 훨씬 보기 좋아졌다.
표 같은 경우도 padding값을 너무 많이 줘서 쓸데 없는 공백이 생겼다 한게 이거였다. -
relative vs static
상대적으로 위치를 바꿀 수 있는게 relative, 원래 정해진 위치가 있는 것이 static, relative 이용해서 홈페이지 사진이랑 표를 옮겨봤는데 아래 버튼까지 옮기니 버튼이 안 먹혀서 그냥 다시 다 돌렸다... 버튼도 relative 상태에서 작동하는 방법은 없는 것인가... -
그리고 결국 답을 찾았다. 어제와 같은 방법으로 vertical-align 을 이용하여 이미지와 테이블을 가운데 나란히 둘 수 있었다.
.in_total{
display: inline-block;
vertical-align: middle;
border : 1px solid gray;
margin: 30px;
}
table{
background-color: aliceblue;
display: inline-block;
vertical-align:middle;
font-size: 2rem;
font-weight: bold;
text-align: center;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
.total{
text-align: center;
}먼저 두 클래스 이름을 동등하게 해주고 이를 total이라는 클래스로 묶는다 이후 어제 했던 것처럼 작업해주면 사진이 나란히 오듯 이미지와 테이블도 자연스럽게 옆으로 오게 된다.
- 사실 이제 뭘 더 추가해야할지 모르겠다. 나의 미적감각의 달림인지 뭘 더 넣어야할지 경험 부족인지 모르겠으나.. 마무리로 모서리 둥글게 css 처리를 했다.
border-radius: 20px;- 일단 여기까지 작업을 깃허브에 업로드했다. 아직 발행까진 안 하고 그건 나중에 좀 더 방법을 찾고 배운 다음에 해야 할 거 같다.
추후 해야할 것 : 생활코딩 등 HTML, CSS 관련해서 잘 모르겠는 것 좀 들어보고 정리하기.+거기서 알게된 것 중 홈페이지에 적용할 게 있음 적용하기
이후 깃허브 릴리즈에 대해서 배운 다음 올리고 조모임 전후로 과제 제출
