2023.03.19 <오전>
오늘도 아침 일찍 일어나 수영을 다녀왔다. 체력관리와 허리근력을 위해서는 아무래도 블체스3기 수강내내 수영은 꼭 해야겠다는 생각을 했다. 12시가 되기전 점심까지 든든하게 먹고 오후에는 어제 정리하였던 내용들을 토대로 하나씩 코드를 만들어가는 과정을 실습해보는 시간을 가졌다.
2023.03.19 <오후>
이전 클래스 작업물을 복사하여 다음 진행 과정을 미리 예습하며 코드를 익히기로 했다.
기존에 배너까지 만들었기 때문에 하단에 Text를 만들고 변경하는 과정을 진행해보았다.
-
div를 사용하여 html에 4개의 Contents를 만들었고, 그중 하단의 두개는 같은 class로 묶어주었다.
-
css로 넘어가서 각각의 Contents를 하나씩 만들어 주었다.
-
먼저 하단에 class로 묶은 부분에 flex를 먹여 두 text를 한줄로 정렬시켰고, space-between을 사용하여 좌우관계정렬을 해주었다. 그리고 위 text와의 간격을 벌리기 위해서 margin-top을 사용하였다.
-
class로 묶은 부분에 첫번째 text가 회색글씨였기 때문에 그 class에 div:nth-child(1)을 따로 만들어 색상을 입혔다.
-
총 4개의 text중 2번째 text css로 넘어가서 font-size와 font-weight를 변경해주었고, 위에 있는 첫번째 text와의 간격을 벌리기 위해 margin-top을 사용하였다.
-
다음으로 가장 첫번째 text에는 색상이 입혀져있어 color를 사용하여 색을 주었고, font-weight를 사용해 두껍게 만들어주었다.
-
전체 클래스를 묶은 contents에는 margin-top을 주어 위 배너와의 간격을 만들었고, max-width와 margin: auto를 사용하였다. 아직 max-width와 margin: auto를 왜 사용한건지는 정확하게 모르겠다.
-
bannerMessage에 위치를 맞추기 위해 transform: translateY(-50%);를 사용하였고, 맞지 않는 부분은 margin-left를 사용하여 조절하였다.
-
전체 폰트의 디자인을 변경하기 위해서 body에 font-family를 사용하여 폰트디자인을 입혔고, 최상단에 @import를 사용하여 폰트디자인 사이트 링크를 연결하였다.
오후 첫타임에서 부족 또는 모르는 부분.
margin: auto;
margin: auto; : 브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있다.
-
margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정한다.
-
margin-top, margin-right, margin-bottom, margin-left의 단축 속성이다.
-
margin 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있다. 각 값은 length, percentage 또는 키워드 auto 중 하나다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 한다.
-
❗max-width를 적용해본 결과 앞으로 넣을 이미지를 중앙정렬 시키고 브라우저가 적절한 여백 크기를 선택하도록 설정하기 위해 넣은게 아닌가 싶다.
max-width
-
max-width : 어떤 요소의 최대 넓이를 지정. 반응형 웹디자인에서 화면에 따라 다르게 스타일을 적용할 때 사용.
-
❗지금 적용을 변경해보니 max-width에 넓이값을 지정하면 그 이상으로 커지지 않도록 방지하는 역할인 것 같다.
.loginBox { display: flex; align-items: center; }
-
❗오늘 몰랐던 부분에 대해서 어느정도 이해하고 나니 어제 막혔던 부분에 대해서 조금 이해할 수 있을것 같아 정리해보겠다.
-
display: flex;의 경우, login과 ellipsis를 같은 선상에 정렬하기 위해 사용하였고, align-items: center;의 경우, loginBox의 내부상하관계를 정렬하여 center에 맞추기 위한게 아닌가 생각한다.
.login { border: 0px; padding: 0px; }
- ❗또한, border: 0px;와 padding: 0px;이 이해가 가지 않았는데 login의 border와 padding의 여백을 지우기 위해서 사용한게 아닌가 생각한다.
.banner { position: relative; /*부모*/ } .bannerMessage { position: absolute; /*자식*/
- ❗banner의 경우, position: relative를 통해 부모의 자격을 갖고, bannerMessage는 position: absolute를 적용해 자식의 자격을 얻는다. 그렇기에 bannerMessage는 banner의 테두리 안에서만 이동이 가능한거라고 생각한다.
🌜하루를 마치며..
저녁을 먹고 이것저것 만져보다보니 벌써 일요일도 다 지났다. 내일부터는 다시 새로운 한주가 시작된다. 다행히 주말에 부족했던 부분에 대해서 공부할 시간도 있었고, 운동도 할 수 있었어서 다시 한주를 시작하는데 에너지를 얻은것같아 힘차게 시작할 수 있을것같다. 내일부터 또 집중해서 수업에 임하고 열심히 또 한주를 보내야겠다.
