결과 예시

👉 완성물
https://github.com/coastby/Gallery-Project

⭐️ 어려웠지만 해결한 것

○ font-size는 rem으로

절대값으로 하니 화면을 줄이거나 하니 튀어나와서 안이쁘다.

○ div안에서 텍스트 가운데 정렬

• 가로

text-align : center; text-align 속성은 가로정렬을 설정할 수 있는 속성이다.여기서는, 가운데 정렬을 하기 위해 속성값을 'center'로 설정한다.
justify-content : center; display 속성이 flex로 설정되어 있으면,text-align 속성을 지정해도 가운데 정렬이 되지 않는다.이 때는, 위 예제와 같이justify-content 속성을 설정해 주어야 한다.

• 세로

padding : 100px 0; 여기서는 div의 padding을 지정하여,문자열을 div의 가운데(세로)에 오도록 한다.padding 속성에 2개의 값이 입력되었는데,첫번째 값은 위, 아래의 padding을 설정한다.두번째 값은 왼쪽, 오른쪽의 padding을 설정한다.

line-height : 200px;여기서는 line-height의 값을 div의 height 값과 똑같이 지정하여 문자열을 가운데(세로) 정렬하였다.

align-items : center;가로 정렬과 마찬가지로display 속성이 flex로 지정되면,앞에서 소개한 방법으로는 세로 정렬이 어렵다.따라서, 이 때는 위 예제처럼align-items 속성을 center로 지정하여 세로 가운데 정렬을 해야한다.

○ div안에 div 세로 가운데 정렬

1. margin
   child div 태그를 inline-block 속성으로 변경하고 margin을 주면된다. 포지션을 직접 조정할때와 마찬가지로 (parent의 height - child의 height)/2 값을 margin-top으로 설정한다.

.child {
	display : inline-block;
    margin-top : 50px;
}

2. flex
   parent div 태그에 flex 속성을 주면 엘리먼트 크기나 위치를 잡아줄 수 있다.
   align-items : center;로 수직 정렬할 수 있다.

.parent {
	display: flex;
	align-items: center;
}

○ 링크 밑줄, 색상 없애기

#login-form a {
  text-align: center;
  text-decoration: none; /* 링크의 밑줄 제거 */
  color: inherit; /* 링크의 색상 제거 */
}
출처: https://hyunjungchoi.tistory.com/44 [행뽁🐥:티스토리]

○ 메뉴 옆으로 정렬하기

.menu-wrap { width:1200px; margin:0 auto;  }
.menu { float:left; text-align:center; }
.menu li { display:inline-block; text-align:center; }

div { overflow:hidden; }
div p{ float:left; }

적용

<header id="toolbar">
      <div id="home-logo" onclick="location.reload();">
        Gallery Portfolio
      </div>
    <nav>
      <ul>
          <li class="gallery on" onclick="setNew('gallery')">사진들 보기</li>
          <li class="upload" onclick="setNew('upload')">사진 올리기</li>
          <li class="myinfo" onclick="setNew('myinfo')">내 정보</li>
          <li>팔로우 보기</li>
          <li>팔로워 보기</li>
      </ul>
    </nav>
    <a href="#">
      <div class="sign">Logout</div>
    </a>
  </header>

nav ul{
  overflow: hidden;
  height: 50px;
  padding-left: 30px;
}

nav li {
  float: left;
  width: 100px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}

○ header에서 top, left, right 설정을 안하니까 main에서 여백을 주니까 같이 내려옴

아래에서 나오겠지만 header에는 grid 적용이 안되어서 'toolbar'라는 아이디를 주고 css 선택자로 사용하였다.

#toolbar {
  display: grid;
  grid-template-columns: 350px 1fr 70px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #2962FF;
  color: #EEEEEE;  
  height: 50px;
  line-height: 50px;
  width: 100%;
  box-shadow: 2px 0 5px #0D47A1 ;
  z-index: 2;
}

○ header, sidebar, main contents, footer 설정

header {
	position : fixed;
    top : 0;
    left : 0;
    right : o;
    z-index : 2;
}

.sidebar {
	position : fixed;
    width : 160px;
    z-index : 1;
}

main {
	/*header : 50px, footer : 60px, sidebar : 160px*/
	min-height : calc(100vh - 110px);
    margin-left : 160px;
    padding-bottom : 60px;
}

footer {
	position : absolute;
    bottom : 0;
    left: 0;
    width : 100%;
    height : 60px;
    z-index : 2;
    
}

○ flex

https://d2.naver.com/helloworld/8540176
https://studiomeal.com/archives/197

○ div에 img 꽉차게 넣기

img {
	object-fit : cover;
}

○ 줄글이 넘칠 때 한줄로 넣고 뒤에는 말줄임표로 들어가게

.word {
		/*
        margin:100px;
        outline: 1px solid black;
        display: block;
        color: black;
        width: 630px;
        font-size: 20px;
        font-weight: bolder !important;
        */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

○ div안에 이미지 가로, 세로 가운데 정렬

<div style="align-items:center; display: flex; justify-content:center;">

○ footer 아래에 고정

/* footer 하단 고정 [S] */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#body-wrapper {
    min-height: 100%;
    position: relative;
}

#body-content {
    margin-top: 100px;
    padding-bottom: 99999px; /* footer의 높이 */
}

footer {
    width: 100%;
    height: 99999px; /* footer의 높이 */
    position: absolute;  
    bottom: 0;
    left: 0;
}
/* footer 하단 고정 [E] */

⭐️ 해결하지 못한 것

○ grid의 css selector

css selector로 header를 하면 다른 스타일은 적용이 되는데, gird 관련된 것은 적용이 안 되는 듯하다. display : grid를 적용할 때는 선택자가 id 또는 class 여야하는지 찾아봤는데 레퍼런스를 찾지 못했다.