TIL - [DAY 4]

4일짼데 공부하는 법이 잘못된걸까 이해를 못하고 기억을 못한다.

나만 뒤쳐지는 기분...

---

오늘의 과제는 지난 시간에 만들었던 회원가입화면을 조금더 꾸미는 것

 

아직 잘 모르겠어서 강사님이 사전에 보여주신 방식을 보고 하나하나 확인하면서 변경해 만들었다.

그렇게 또 아 그렇구나~ 이거구나~ 시간... 언제쯤 익숙해져서 바로 알 수 있을까?  많이 사용해봐야 기억하겠지ㅜ

 

그리고 오늘 배운 플랙스, 그리드를 사용해 아이템을 나눠 컨테이너를 설정해 창이 어떤 크기가 되던 웹내의 크기는 바뀌지 않게 되는 법도 알게되었다.

 

포폴을 만들려면 빨리 익숙해져야 할텐데 수업도 빠듯하고 저녁 식사 시간도 빠듯하다.

자습시간을 아무리 가져도 모자라.. 내용이 너무 많아 ㅋㅋ

 

요리하는 것처럼 무엇을 만들지 구상하고 디자인하고 재료준비하고,,, 등 비슷한 것 같아서 재미는 있다.

그런데 재료를 너무 몰라 수급이 안될 뿐...

 

복습하는 걸 아예 따로 빼서 정리하는데 수업시간에 들은 걸 필기하며 보고 다시 블로그에 입력하려니 복습시간이 두배로 더 잡아 먹고 여기엔 일기를 적게 되는 것 같아 한번에 블로그에 적어보아야 겠다.

---

article로 단락을 나눠 배경의 크기를 정하게 되면서 안의 내용이 창의 크기에 따라 커졌다 작아지는 것이 아닌 고정되어 있는 것이 되었다.

 

무엇인지 모르겠는 코드

display: flex;

   flex-contaiter에 display: flex;를 적용하며 시작

 

  .container { display: flex; /* display: inline-flex; */ }

 

display: inline-block;

   display 속성이 inline-block으로 지정된 엘리먼트는 하이브리드처럼 동작

 

   기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, 

   block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능

 

   다시 말해,

   내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따른다.

   대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등

 

display: block;

   전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄 차지

   대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등

 

   예를 들어,

   여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보인다.

 

align-items: center;

    세로축을 기준으로 정렬

    flex-start : 컨테이너의 최상단으로 정렬

    flex-end : 컨테이너의 최하단으로 정 렬

    center : 컨테이너의 세로 축의 중앙으로 정렬

    baseline : 컨테이너의 시작위치에 정렬

    stretch(default) : 컨테이너에 맞게 늘린다.

 

box-sizing: border-box

    box model

     - margin : 요소 외부의 여백, border 밖의 여백

     - boder : 요소를 감싸는 테두리: 값이 커질수록 테두리의 굵기는 두꺼워짐

     - ppading : 요소 내부의 여백, 콘텐츠와 border 사이의 여백

 

    box-sizing을 따로 지정해주지 않는다면 알아서 content-box 방식으로 요소의 너비와 높이를 계산

    box-sizing : 요소의 너비와 높이를 계산하는 방법을 지정하는 속성

 

    contnt-box : 설정한 width와 height 값이 곧 요소 내부의 콘텐트 크기

    border-box : 설정한 width와 height 값이 안쪽 여백과 테두리까지 포함

 

border: none;

    육안으로는 확연한 차이가 없을 수 있지만, 코드 동작상으로는 큰 차이가 있을 수 있다.

     border : 0 은 border-wdith가 0으로 설정되지만 , border: none은 border-width가 medium으로 설정

 

     1. 모든 input 요소에 border: 2px solid #333 선언 (solid - 테두리)

     2. border: none을 선언한 input에 border-style: dashed를 선언 -> 통

     3. border-style은 border: none보다 우선순위가 높아서 이런 현상이 발생
     4. border-style 다음에 border: none을 선언하면 캐스케이딩 원칙에 따라 후자가 적용됨

 

border-radius: n%/px

      border 박스 테두리를 둥글게 만들어 준다.

      https://hianna.tistory.com/500

[HTML/CSS] div 테두리 모서리 둥글게 만들기 (border-radius)

 

border-soild: 보더의 테두리

https://developer.mozilla.org/ko/docs/Web/CSS/border

border - CSS: Cascading Style Sheets | MDN

 

cursor: pointer;

      해당 태그 위에 위치하는 마우스 커서의 모양 변경

      auto: 자동
      default: 기본값 (화살표)
      pointer: 손가락 모양 (클릭 가능한 버튼)
      wait: 로딩

---

한 번 쫙 훑긴 해야겠다...