내일배움캠프 React트랙 12일차 회고 (2022.11.15)

오늘은 프로젝트를 위해 git&Github강의와 html, CSS공부를 했다.

git&Github

오늘은 2주차 수업 - 협업을 위해 팀원이 모여 작업할때의 상황을 대비한 공부를 했는데, branch와 merge다.

branch는 issue를 통해 변경사항을 만드는 작업이다. 이때 중요한 것이 체크아웃이다. 체크아웃을 하냐 안하냐에 따라 finder에서

보이는 파일목록이 다르다. 브랜치를 완성해 커밋하고나면 꼭 브렌치 삭제해주기!(나중에 브랜치 설정꼬이는거 방지)

merge conflict는 하나의 브랜치에 대해 두명이상의 팀원이 함께 변경사항을 만들어냄에 따라 발생하는데, 최종안 수동으로 제출해 해결해줄 수 있다.

 

CSS공부

CSS-position태그, 좌표 레이아웃

.box {
  position : static; /* 기준이 엄서요 (좌표적용 불가) */
  position : relative; /* 기준이 내 원래 위치요 */
  position : absolute; /* 기준이 내 부모요 */
  position : fixed; /* 기준이 브라우저 창이요 (viewport) -> 화면을 스크롤해도 움직이지않는 요소 구현*/
}

.box {
  position : relative; /* 기준이 내 원래 위치요 */
  top: 100px; 
  /*위로부터 100px만큼 내려온다.*/
}

position : absolute는 부모 박스를 기준으로 찰싹 달라붙은 뒤에 좌표값을 적용하게 되는데,

정확히 말하면 부모가 아니라 부모 중에 position : relative를 가지고 있는 부모가 기준이다.

position태그를 적용하면 공중에 뜬다. (한글 '맨앞으로'기능과 동일한 기능-겹친 부분이 숨겨지지않음)

 

position : absolute 를 적용한 요소 가운데 정렬 

.button {
  position : absolute; 
  left : 0;
  right : 0; 
  margin: auto;
  width : 적절히
}

• 적어도 5개의 속성이 있어야 가운데 정렬이 가능하다.
• margin: auto;를 입력하면 left,light,top,bottom 모든 부분에 대해 auto가 주어진다.

text-align: center; -> 텍스트가 가운데로 정렬됨

---

CSS-반응형 width & box-sizing

z-index

앞서 "position태그를 적용하면 공중에 뜬다."고 했다. 이때 position태그를 여러개 작성하면, 어떠한 값이 공중에 뜰까?

이때 z-index: 5;와 같이 정수의 값을 부여하면된다. 정수의 값이 높을수록 공중에 뜨는 효과에 우선순위를 가진다. 

 

px vs %[max-width, min-width]

width: 80%과 같이 픽셀값이 아닌 퍼센트로도 폭을 지정할 수 있다. 이 경우 부모가 기준으로 잡히며, 부모가 없다면 bdoy태그가 기준으로 잡히게 된다. 이는 다른 기준과 피기준을 가진 CSS태그도 마찬가지로 부모가 없다면 body태그가 기준으로 잡힌다.

이때 %로 폭을 설정하게 되면, 모바일과 PC브라우저의 화면차이로 인해 최대와 최소사이즈가 너무 크거나 너무 작게 설정될 수 있다. 

그때 쓸 수 있는 태그가 max-width: 600px;, min-width: 300px;태그이다. 이렇게 태그를 입력하면 최대크기와 최소크기의 한계를 지정해줄 수 있다.

 

box-sizing : border-box;

원래 div 박스의 width를 주게되면 padding, border를 고려하지 않는다. 

padding 안쪽 부분 - 글자가 들어갈 수 있는 content영역 만 실제 width로 설정한다. 

즉, 파란색부분만이 실제 content영역인 width라는 것.

그래서 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만큼 늘어날 수 있다. 

웹사이트를 전문적으로 다루면 다룰수록 이러한 세심한 디테일은 필수적으로 가져가야 한다.

 

이때 박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성을 사용하면 된다.

 

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}

box-sizing이라는 속성을 주게되면 border까지를 실제 박스의 폭으로 설정해준다. 

 

 

CSS 파일 작성시 기본으로 쓰면 좋을 속성들

일단 CSS파일에 작성하고 시작하면 되는 태그들이다.

div {
  box-sizing : border-box; /*박스테두리사이즈를 content영역이 아닌 border값으로 설정함*/
}

body {
  margin : 0; /*기본적으로 설정된 여백을 없애줌*/
}

html {
  line-height : 1.15; /*기본 행간 높이*/
}

여기에 더해서 모든 h, p 태그의 margin을 균일하게 설정하거나 li, a 태그에 text-decoration : none 을 주거나

나중에 배울 table 태그에 border-collapse: collapse 를 주거나 이런 것들이 가능하다. 이런거 미리 적고 시작하면 항상 편리하게 CSS 코드를 짤 수 있다. CSS Reset 라고 부르기도 하는 것들이다.

 

CSS normalize

브라우저간 통일된 스타일을 주기 위해 특정 스타일을 맨 위에 적고 CSS 코드짜기 시작하는 경우이다.

왜냐면 브라우저마다 <button>의 스타일이 다르고, 가끔 line-height 이런 줄간격같은 것도 다르고 다음 시간에 배울 <input> 사이즈도 다르기 때문이다. 그래서 같은 코드를 입력해도 브라우저마다 상이하게 보일 수 있다.

 

CSS Normalize 링크 :  https://github.com/necolas/normalize.css/blob/master/normalize.css 

여기있는 스타일을 입력하면 브라우저마다 다르게 보이는 문제들을 미리 해결할 수 있다.

적용하는 방법은 CSS 파일에 복붙하거나, 다운받아서 <link> 태그로 첨부하면 된다.

---

form & input

form

<form>
  <input>
</form>

form은 form 태그로 만들어낸다. 이때 input태그는 닫지 않는다. 

 

input의 type

<input type="text">
<input type="email">
<input type="password">
<input type="radio">
<input type="file">
<input type="checkbox">
<input type="submit">
<select>
  <option>옵션1</option>
</select>
<textarea></textarea>

그나마 자주쓰는 것들이다. 10개는 더있으니, 외우지말고 필요할때마다 구글링해서 넣자.

VCS에서 type까지만 입력하고 스페이스바 누르면 자동추천되니까 거기서 봐도 되겠다.

 

input에 넣는 속성들

<input placeholder="어쩌구" value="어쩌구" name="age">

placeholder는 배경 글자(글자 입력하면 지워지는..),value는 미리 입력된 값, name은 서버 기능개발에 필요한 인풋의 이름을 설정 가능

 

HTML의 속성으로 CSS셀렉터를 사용하기

input[type=textarea] {
  color : grey
}

input의 type속성이 textarea인 요소만 찾아서 스타일을 줄 수 있다. 폼에서 특히 유용하게 사용한다. 

 

 

전송버튼

<button type="submit">전송</button>
<input type="submit">

 

버튼은 <form> 태그 안에 있어야 잘 작동한다.

 

박스만들기 실습

시작하기전에 CSS reset

div, input, .email-box {
box-sizing: border-box;
}

 

기타 잡다

• float을 통해 두개의 박스를 양옆으로 나란히 배치했다. float를 사용한 뒤  항상 <div style="clear: both"></div>를 붙여주자.
  (float는 공중에 떠있기때문에)
• <input type="textarea" class="message-box email-box">와 같이 클래스를 동시에 한 엘리먼트안에 작성할 수 있다.
  
  

label 태그와 for 속성

<input type="checkbox" id="subscribe">
<label for="subscribe">누르기</label>

label과 for 속성을 적절히 활용하면, input대신 label을 눌러도 input을 선택할 수 있다.

(input의 id, label의 for 속성을 똑같이 맞춰주면 됨)

 

혹은 그냥 <input> 에 제목이 필요할 때도 h, p 태그 이런거 말고 <label> 태그를 가끔 이용한다.

---

Table 레이아웃, vertical-align 속성

기본적인 table HTML 구성 

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

 

table태그 내에 tr(행)은 row(가로), td(열)는 column(세로)을 의미한다.

이때 tr먼저 작성 후,  td를 작성해준다.

tbody, thead는 그냥 헤드부분 영역구분을 위해 사용하며 td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리된다.

 

테이블간의 간격을 없애고 싶다면, border-cpllapse: collapse; 를 이용하면 된다.

 

vertical-align 

td, th {
  vertical-align : middle;
}

vertical-align 속성을 이용해 테이블 내에서의 상하정렬을 할 수 있다. top, bottom, middle 사용가능

 

inline 요소 간 상하정렬할 땐 vertical-align 

<p>
  <span style="font-size : 50px">Greetings</span>   <span style="font-size : 20px">안녕</span>
</p>

display : inline 혹은 inline-block 요소들을 나란히 배치하면 상하정렬이 이상한 경우가 있다.

특히 큰 이미지와 글, 또는 큰 글씨옆에 있는 작은 글씨 이런걸 나란히 배치했을 때 서로 높이가 맞지 않는 경우가 많은데

이럴 때 margin-top 이런거 대신 쓰는 속성이다. 

top, middle, bottom 말고도 super(위첨자 - 제곱같은거), sub(아래첨자, px 단위로 사용가능하다. 

(table 안에선 top, middle, bottom만 사용가능함)

 

display : table 

.box {
  display : table;
  display : table-row;
  display : table-cell;
}

가끔 div로 이루어진 요소들을 테이블화 시키고 싶을 때가 있습니다

그럴 땐 table태그로 변하길 원하는 요소에 display : table을 적어주신 뒤에

tr로 변하길 원하는 요소엔 display : table-row,

td로 변하길 원하는 요소엔 display : table-cell 을 넣어주면 됩니다. 

하지만 그럴 일은 거의 없기 때문에 참고로만 알아두자.