20/03/23 TIL

HTML / CSS 기본

• margin 순서 : 위 오른쪽 아래 왼쪽;

  • margin: 20px auto; -> 2개의 값이 있을때 첫번째는 위, 아래고 두번째는 오른쪽, 왼쪽의 margin값이다.

• border 순서 : 두께 선스타일 선색깔;

  • border 순서는 안지켜도 되지만 맞춰주면 좋다.

• text-decoration: underline; 은 밑줄을 쳐주는 스타일이다. 그러나 밑줄 두께 및 색을 커스터마이징 하기 어려우므로 border-bottom으로 원하는 스타일의 밑줄을 줄 수 있다. css 문법적으로는 밑줄이 아니라 아래 테두리이지만 원하는대로 디자인 가능하므로 자주 사용된다.

• box-sizing : 원래 width값을 정해놔도 padding과 margin값을 주면 width 값이 더 늘어날 수 있다. 그렇다고 하나하나 다 계산하기도 어렵다. 하지만 box-sizing 프로퍼티의 border-box; 를 사용하면 편해진다.
  거의 모든 태그들에 사용되는 경우가 많으므로 아래 코드를 해놔도 좋다.

  *{
  box-sizing: border-box;
  }

• div태그는 자식태그나 div태그 내부에 있는 내용의 세로크기가 div태그의 세로가 된다. 또한 가로크기는 div태그의 내부에 뭔가가 있기만 하면 화면 전체 너비가 곧 자기의 가로크기가 된다.
  
  
  
  

Postion의 속성

relative

• position: relative; 자체로는 특별한 의미가 없다.
• 위치를 이동시켜주는 top, right, bottom, left라는 프로퍼티가 있어야 위치에서 이동할 수 있다.
• 위치는 기본 속성인 static일 때를 기준으로 움직인다.

absolute

• 이름 그대로 절대적인 위치에 둘 수 있는데, 특정 부모에 대해서 절대적으로 움직인다.
• 가장 가까운 위치가 지정된 부모 엘리먼트에 따라 상대적으로 움직이는데, 만약 그 대상이 없다면 문서 본문(document body)를 기준으로 삼고 페이지 스크롤에 따라 움직인다.
• 여기서 위치가 지정되었다는 의미는 position이 static이 아닌 엘리먼트를 가리킨다.

fixed

• 말 그대로 고정되었다는 의미이다. absolute가 부모가 필요한 반면 fixed는 필요하지 않다.
• 눈에 보이는 브라우저 화면 크기만큼 화면 내에서 움직인다.
• relative와 마찬가지로 top, right, bottom, left 프로퍼티를 사용한다.
• fixed는 공백을 페이지에 남기지 않는다. 즉, 다른 엘리먼트가 위치할 자리를 내주지 않는다는 의미이다.

display 속성 : inline, inline-block, block

inline

• 대표적으로 span 태그가 있다.
• 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
• width와 height 값을 지정해도 무시된다. 컨텐츠의 크기만큼만 공간을 차지하도록 되어있기 때문이다.

inline-block

• inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, width와 height 속성 및 margin, padding 속성의 상하 간격 지정이 가능해졌다.
• 대표적으로 button이나 select 태그 등이 있다.

block

• 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
• 대표적으로 div나 p, h1 태그 등이 있다.
• width, height, margin, padding 속성 모두 반영 가능하다.

float에 대해

• 원래는 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함게 배치할 것인가에 대한 프로퍼티인데, 요즘에는 레이아웃을 잡는데 사용되는 대표적인 CSS 프로퍼티이다.
• 속성값으로는 left, right, none 등이 있다.
• floating된 요소는 종류에 상관없이 블럭박스가 된다. 자신의 영역을 가지고 있는 인라인 블럭 박스처럼 렌더링되는게 특이한 점이다.
• float을 사용하다보면 레이아웃이 무너지는 경우가 잦은데, clear 프로퍼티로 float의 영향을 받지 않게함으로 레이아웃을 고칠 수 있다.

float에 대해서 그림과 함께 참고하기 좋은 블로그가 있기에 공유해본다.
https://webclub.tistory.com/606
https://techbug.tistory.com/181