[HTML/CSS] 자바 개발자 양성과정 19일차 - pre, font, rm, rem, display요소들,align-items

18일차와 19일차는 html/css수업이라 알고 있는 내용이 많아서 따로 모르는 내용만 작성했다.

---

HTML           

💚 <pre> 태그를 사용하면 텍스트 서식을 그대로 표현할 수 있다.

---

font            

💗 body의 폰트크기는 기본 16px이다.

 

💗 rem 은 html을 기준으로 작동한다.

html의 font-size가 16px이고,

요소의 font-size가 2rem이면

요소의 폰트크기는 32px이다.

 

💗 em은 부모요소를 기준으로 작동한다.div>p 일때,

div의 font-size가 16px이고,

요소p의 font-size가 2rem이면

요소의 폰트크기는 32px이다.

 

💗 font : font-style font-weight font-size font-family

#text4{font : italic bold 20px serif;}

 

---

display            

💗 block

블록으로 배치되다.  div나 p의 경우가 있다.

 

💗 inline

인라인으로 배치되다. span의 경우가 있다.

단, 너비 높이 마진이 적용되지 않는다.

 

💗 inline-block

inline으로 지정하면 한줄로 배치할수는 있지만, 너비나 높이 마진 같은 박스모델 값이 정확히 적용되지 않는다.

요소에는 인라인 레벨로 배치하면서 내용에는 블록레벨 속성을 지정하고 싶을때 사용

-> 개별 영역만 가진 다음 마진, 패딩, 높이, 너비를 주고 싶을때 사용

 

 

💗 flex

이건 어려워서 따로 공부해야할거 같다

이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)

이번에야말로 CSS Flex를 익혀보자

 

💗 grid

이것도..

이번에야말로 CSS Grid를 익혀보자 – 1분코딩 (studiomeal.com)

이번에야말로 CSS Grid를 익혀보자

 

💗 contents

부모요소의 css힘이 없어지고 자식의 css만 적용된다.

edge에서는 지원하나 IE에서 지원안함😈 

See the Pen display: contents by hoyashu (@hoyashu) on CodePen.

 

 

💗 list-item

목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만든다. (<li>태그를 써서 만든것과 동일함)

See the Pen display : list-item by hoyashu (@hoyashu) on CodePen.

 

 

💗 flow-root

clearfix하는데 유용하다. 그게 먼지 모르면 클릭

edge에서는 지원하나 IE에서 지원안함😈 

부모 {
  display: flow-root;
  /* overflow: hidden과 관련되어 있음 */
  /* 실무에서는 부모요소에 clearfix를 주는 방법을 많이 사용 */
}

자식 {
  float: left;
}

 

💗 revert

부모 속성으로 돌아가거나 부모가 없을 때는 최초의 상태로 돌아가는 것

 

💗 unset

unset 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용합니다. 

다르게 표현하자면, 전자일 땐 inherit 키워드처럼, 후자일 땐 initial 키워드처럼 동작합니다.

 

💗inherit

상위요소의 성질을 상속받음

 

💗initial

초기설정의 성질을 상속받음(reset개념)

---

💗 table

블록레벨의 표를 만든다.

 

💗 inline-table

인라인 레벨의 표를 만든다 (<table>태그를 써서 만든것과 동일함)

 

💗 table-row

표의 행을 만든다 (<tr>태그를 써서 만든것과 동일함)

 

💗 table-row-group

표의 행 그룹으로 만든다 (<tbody>태그를 써서 만든것과 동일함)

 

💗 table-header-group

표의 제목영역 그룹으로 만든다 (<thead>태그를 써서 만든것과 동일함)

 

💗 table-footer-group

표의 요약영역 그룹으로 만든다 (<tfoot>태그를 써서 만든것과 동일함)

 

💗 table-columm

표의 열로 만든다 (<col>태그를 써서 만든것과 동일함)

 

💗 table-columm-group

표의 열 그룹으로 만든다 (<colgroup>태그를 써서 만든것과 동일함)

 

💗 table-cell

표에서 하나의 셀로 만든다. (<td>,<th>태그를 써서 만든것과 동일)

 

💗 table-caption

표의 캡션을 만든다. (<caption>태그를 써서 만든것과 동일)

 

See the Pen display : table by hoyashu (@hoyashu) on CodePen.

---

align-items      

align-items는 flex나 gird 요소에서만 작동한다.

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

요소의 종류는 위와 같다.

더 자세한 설명은 아래 링크로 ㄱㄱ

align-items