블록체인 TIL-1Week-6Day(토요일)

2023.03.18 <오전>

오늘은 블록체인스쿨 강의가 정식으로 시작하고 처음 맡는 주말이다. 일주일간 강의를 듣느라 허리가 너무 아팠는데 근육을 풀기 위해서 아침 일찍 기상해 근육을 풀러 수영을 하러갔다. 수영을 다녀오니 기분전환도 되고 근육도 풀리고 너무 좋았다. 오전에는 밀려서 작성하지 못했던 자료들도 정리하고 이번에 구매한 노트북으로 앞으로 강의를 듣기위해 세팅을 하느라 오후까지 시간을 보낸것 같다. GirHub도 동시에 업데이트 할수있도록 세팅하느라 이것저것 손보고 오늘 못했던 HTML/CSS 실습을 좀 해보려고 했는데 왜이렇게 할일이 많은지..

2023.03.18 <오후>

점심을 먹고 노트북에 강의들을때 필요할 자료들과 프로그램을 깔고 여러가지 연동도 시켜놓고 확인작업도 하느라 시간을 보냈다. 밥먹을때는 짬짬히 예능도 보고 오랜만에 뭔가 휴식을 주는 느낌이였다. 물론 그럼에도 머릿속에선 HTML과 CSS에 대한 압박이 느껴졌지만 차분히 마음을 먹고 해야 한다고 생각했다. 성급히 진행하려고 하면 어차피 집중도 잘 안될테고 말이다. 그래서 지금 자리에 앉아 어제 성현강사님이랑 진행하다 다하지 못한 부분에 대해서 성현강사님 GitHub을 보며 모르는 부분부터 차근차근 공부하고있다. 다른사람들은 Flex나 Grid를 어떻게 사용할지 여러가지 시도를 해보는것 같은데 나는 아직 그정도 수준을 따라가기엔 부족하다는 생각이 든다. 그래서 일단 차근차근 하나씩 내가 사용하는 언어들이 어떤 의미를 갖고 어떻게 사용이 되는지를 살펴보는게 중요하다고 생각했다.
그래서 오늘은 많이는 못하겠지만 내가 알아본 것들에 대해서 정리를 해보고자 한다.

font-weight: bold; /*폰트굵기 - 굵은굴기(700px과 같다)

position: absolute; 
/*position - 속성을 통해 문서 상에 요소를 배치하는 방법을 지정
/*top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다.
/*사용법 - 기준을 잡는다(ex:position: relative;)
이동시킨다(ex:top: 50px;)
/*absolute - 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.

• CSS에서 position은 중요한부분이다.
• position에서 relative(부모) / absolite(자식) 이다.
• absolite(자식)는 relative(부모)가 있어야만 의미가 있다.
• relative(부모)는 내가 부모라고 선언하는 기능이 전부다.
• 디폴트로 relative를 갖는 태그는 body뿐이다. 다른 태그는 모두 속성을 적어줘야 relative속성이 적용된다.
• 이런 이유로 인해 relative없이 absolute를 사용하게 되면 body태그의 기준으로 움직이게 된다.
• 현재 내가 하고있는 테킷베너제작실습을 기준으로 이야기하자면 배너가 부모이고 그 안에 "채널추가Text"가 자식이다. 그래서 text는 배너 안에서만 움직일 수 있다.
  
  

<div class="bannerTitle">TECHIT 카카오톡 채널 추가 이벤트</div>

.bannerTitle {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 12px;
  }
  

• 여기서 margin-bottom은 "bannerTitle"의 아래여백을 의미한다. 공간을 벌리기 위해선 margin이 가장 바깥이기 때문에 적합하다.
  
  

transform: translateY(-50%);

transform ()함수는 기본적으로 X축과 Y축을 따라 지정된 거리만큼 요소를 이동시킬때 사용한다.

• transform:translate() : translate (x, y) 함수는 요소를 왼쪽에서부터 x거리(距離), 위에서부터 x 거리만큼 상대적으로 위치를 정하거나, 이동 및 재배치를 지정한ㄷ. Y 방향의 거리는 생략할 수 있지만, 이 경우의 Y방향의 거리는 "0"이 된다.
• transform:translateX() : translateX(거리) 함수는 좌우(수평 방향)의 이동 거리 값을 지정한다.
• transform:translateY() : translateY(거리) 함수는 상하(수직 방향)의 이동 거리 값을 지정한다.
• transform:translateZ() : translateZ(거리) 함수는 Z 방향의 거리로 이동을 지정한다. 이 함수는 백분율 값으로 지정할 수 없다. 백분율로 값을 지정해도 "0"이 된다.
  
  

object-fit: cover;

object-fit은 요소의 크기에 맞게 img태그와 video태그의 크기를 조정하는 방법으로 사용되는 속성이다.

• fill :기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러진다.
• contain :요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태이다. 딱 맞추기 때문에 남는 공간이 발생할 수 있다.
• cover :요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대된다.
• none :크기가 조정되지 않고 원본사이즈로 처리된다. 크면 잘리고, 작으면 남는다.
• scale-down : 크기를 아무것도 지정되지 않거나 혹은 contain이 지정되어 있는 것처럼 변경된다. 이는 원본 크기보다 작아지는 결과를 보여준다.
  
  

display: none;

display는 요소를 어떤 형태로 나타나게 할 것인지를 말하는 속성으로, 기본적으로 네가지가 있다.

display : block
display : inline-block
display : inline
display : none

• block : 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지. width 또는 height 지정을 통해 가로 세로폭을 조절할 수 있다. display : block을 주면 해당 영역이 텍스트 영역을 넘어서 부모 박스의 너비만큼 가로폭을 차지한다.
• inline-block : inline-block을 주면 겉보기에는 display:inline과 아무 차이 없이 다른 요소와 한 줄로 배치된다. 그러나 inline-block에 width와 height값을 주면 그 영역 만큼을 차지하게 할 수 있다. (inline은 width 및 height 값을 줄 수 없습니다.)
• none : 화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 한다. 비슷한 속성으로 visibility : hidden이 있는데 해당 요소가 보이지 않을 뿐 요소가 존재하는 영역은 확실히 보이게 하는 속성을 가지고 있어서 다르다고 말할 수 있다.
  
  

@media (min-width: 1024px)

미디어 쿼리(Media Query)는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념.

<미디어 쿼리 기본 구성>

@media (조건) {
  스타일
}

❗스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시됩니다.

핸드폰처럼 좁은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최대 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있다.

예를 들어, 800px 이하의 좁은 화면에서 특정요소의 배경색을 토마토 색으로 바꾸고 싶다면, 다음과 같이 max-width 속성을 이용하여 미디어 쿼리를 작성해주면 된다.

@media (max-width: 800px) {
  .small-tomato {
    background-color: tomato;
  }
}

반대로 TV처럼 넓은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최소 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있습니다.

예를 들어, 800px 이상의 넓은 화면에서 특정요소의 글자색을 토마토 색으로 바꾸고 싶다면, 다음과 같이 min-width 속성을 이용하여 미디어 쿼리를 작성해주면 된다.

@media (min-width: 800px) {
  .large-tomato {
    color: tomato;
  }
}

border-radius: 9999px;

border-radius는 테두리를 둥글게 만드는 속성이다.

border: 1px solid rgb(232, 232, 232);

border 속성은 태그의 테두리를 설정하는 속성으로, background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성이다. width - style - color의 순서로 사용할수있다.

순차적으로 1px(size) solid(style) rgb(color)이다.

• border-width : 테두리의 두께로, 주로 px 단위를 사용한다.
• border-style : 테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재한다.
• border-color : 테두리의 색상으로, 값은 color 속성의 포맷을 사용한다.
• border-top,bottom,left,right : 테두리의 특정 방향만 따로 설정할 수도 있다.
  
  

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

flex : flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식이다.

• flex에서 사용하는 속성은 부모 요소인 컨테이너(Container)와 자식 요소인 아이템(Item)으로 구성된다.
• 플렉스 컨테이너에는 flex-direction, flex-wrap, justify-content, align-items, align-content가 있다.
• 플렉스 아이템에는 flex, flex-grow, flex-shrink, flex-basis, align-self, order가 있다.

Flex와 관련된 속성

• align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정한다.
• align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정한다.
• align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정한다.
• flex 속성은 콘텐츠의 성질을 flex로 설정한다.
• flex-basis 속성은 콘텐츠 아이템의 기본 값을 설정한다.
• flex-direction 속성은 콘텐츠 아이템의 정렬 방향을 설정한다.
• flex-flow 속성은 콘텐츠 아이템의 정렬 방향과 줄 속성을 설정한다.
• flex-grow 속성은 콘텐츠 아이템의 크기를 숫자를 통해 확대 설정한다.
• flex-shrink 속성은 콘텐츠 아이템의 크기를 숫자를 통해 축소 설정한다.
• flex-wrap 속성은 콘텐츠 아이템의 줄 속성을 설정한다.
• justify-content 속성은 콘텐츠 아이템의 좌우 관계 정렬 상태를 설정한다.
• order 속성은 콘텐츠 아이템의 순서를 설정한다.

• align-items : align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정한다.
• align-content 속성은 컨테이너의 높이 값을 기준으로 정렬하고 align-items 속성은 아이템의 높이 값을 기준으로 정렬합니다.

문법

• align-items : stretch
• align-items : center
• align-items : flex-start
• align-items : flex-end
• align-items : baseline

속성값

• stretch : 요소의 정렬 상태를 기본 값으로 설정한다.
• center : 요소의 정렬 상태를 가운데로 설정한다.
• flex-start : 요소의 정렬 상태를 위쪽으로 설정한다.
• flex-end : 요소의 정렬 상태를 아래쪽으로 설정한다.
• baseline : 요소의 정렬 상태를 폰트를 기준으로 설정한다.
  
  

.menu button:nth-child(2)

nth-child(N) : 부모안에 모든 요소 중 N번째 요소

• A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소
• :first-child= 부모안에 모든 요소 중 첫번째 요소
• :last-child= 부모안에 모든 요소 중 마지막 요소
• A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소
• A:last-of-type= 부모안에 A라는 요소 중 마지막 요소
  
  
  

justify-content: space-between;

justify-content : 메인축 방향으로 아이템을들 정렬하는 속성

• space-between : 아이템들의 “사이(between)”에 균일한 간격을 만들어 준다.

• flex-start (기본값) : 아이템들을 시작점으로 정렬한다. flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위.
• flex-end : 아이템들을 끝점으로 정렬한다.
  flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래.
• center : 아이템들을 가운데로 정렬한다.
• space-around : 아이템들의 “둘레(around)”에 균일한 간격을 만들어 준다.
• space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.

flex관련자료 브로그

🌜하루를 마치며..

이렇게 또 하루를 마치게 되었다. 일단 오늘은 내가 강의를 들으면 작성했던 코드들이 어떤 기능을 하고 어떻게 사용되는지에 찾아보고 정리해보았다. 정리하며 기능에 대해서 많이 알게되었지만 실제로 사용하는게 자연스럽게 될지는 아직 잘 모르겠다. 코드를 찾아보며 바꿔보기도 하고 지워보기도 하면서 변화를 줘봤지만 변화가 없는 코드들도 있었어서 사실 그런 코드들은 왜 적혀있는지를 모르겠다. 당연히 필요에 의해 작성되어 있는것일텐데 말이다. 일단 오늘은 이정도 알게된것에 만족하고 오늘 정리한 내용이라도 충분히 숙지할 수 있도록 해야겠다. 그리고 내일은 내가 오늘 정리한것을 토대로 하나씩 다른 부분을 적용해보는 연습을 해야겠다.