div span p Block-level Inline-level 상대길이단위 사진크기조절회전

div와 p span 

---

span;

텍스트 inline style을 부여하기 위해 사용된다

줄 안바뀜

 

div;

레이아웃 구조 layer 구분 등 컨테이너 역할

가로 줄 너비 100%차지함!

줄바뀜

 

p; paragraph(문단) 텍스트

줄바뀜

 

 

div : 세션 나누기!!

p: 글자 표현!!

 

줄바뀜 안바뀜을 이렇게 부름

---

Block-level 요소

해당 요소를 블럭처럼 사용하여,

각각의 요소는 새로운 라인에서 시작됨!!

예)
<div> <p> <h1>-<h6> <hr> 
<header> <footer> <form> <article> <aside> <main> <nav> <section>
<ol><li><ul>
<dd> <dl> <dt><table><tfoot>  
<address> <blockquote> <canvas> <fieldset> <figcaption> <figure><noscript> <pre> <video>

 

Inline-level 요소

고유 영역 없이, HTML 요소의 내용만큼만 차지함!!

예)
<span> <img> <input> <br> <button> <label> <textarea>
<a> <abbr> <acronym> <b> <dbo> <big> <cite> <code> <dfn> <em> <i>
<kdb>  <map> <object> <output> <q> <samp> <script> <select> <small> 
<strong> <sub> <sup>  <time> <tt> <var>

 

 

 

inline 요소는 block 요소를 감히 품을 수 없다

빠갈나게되

 

 

근디

p태그의 하위태그로

문자정보를 입력하는 요소만 포함되어야함

<p>

  <span>
  <a>
  <strong>  등

</p>

 

다른 blocklevel 요소가 오면 안대요 <div>이런거 품지마센

<p><div>   </div></p>

말고

<div><p>  </p></div>

가 정답

 

 

출처: https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-p-div-span-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

---

동적으로 사이즈 조절 해보아요

---

length의 단위는 두 종류가 있다

 

절대 길이 단위

어떤 화면에서도 고정된 길이값을 가지는 단위

px(pixel), inch, pt(point)

 

상대 길이 단위

특성 요소 상대적인 크기를 나타내는 단위

em,rem,lh,vw,vh

 

상대 길이 단위에 대해 알아보자

---

vw; viewport width

 

 

em

부모요소의 폰트 크기를 기준으로 하는 거임!!!

width:100em; 은 부모폰트크기 * 100배 사이즈라는거임,,히엑

max-width:100%가 부모요소의 100퍼 사이즈라는거임 !!!

완저니 잘못알고있었다..

 

https://dev-ellachoi.tistory.com/97

 

 

 

 

 

---

사진 크기조절 좌우반전

---

scale()은 보통 크기조절을 하는 속성이다

 

근데 상하반전도 할 수 있는 것임!!

음수 값을 주면 된다~

상하좌우모두반전편하게휘뚤마뚤

// 상하좌우 모두 반전
transform: scaleY(-1);

transform: scale(좌우X값,상하Y값)

// 좌우반전
transform: scale(-1,1)
// 상하반전
transform: scale(1,-1)


// 좌우반전 하면서 크기조절 (좌우 2배 상하 0.5배 상하반전)
transform: scale(2,-0.5)

 

상하반전 : -scaleY 

transform: scaleY(-1);

 

좌우반전: -scaleX 

transform: scaleY(-1);

출처 : https://bluepebble25.tistory.com/44

 

 

 

 

 

수업

 

---

flex 문법쓰면 block 뽀사지고 이런거 기억해야댐

table

max-width:100%;

부모요소의 크기의 100%에 맞게 크기를 조절한다는 뜻

부모요소의 width나 max-width가 설정되어있으면 가능!!

근데 안되는 경우가 있음

display:flex;

flex의 자식들은 기본적으로 너비가 flexable(내용물만큼)이라 유동적인데

부모가 display:flex;면 고정값이 없으니 자식도 flexable 할 수 있음

해결방법

자식에게 flex: 1 또는 width: 100%를 추가해보세요.

또는 부모에 flex-direction: column/row,

자식에 min-width, max-width, align-items, justify-content 등 조정이 필요할 수 있음