CSS 정리- block, position

 

 

1. 위치를 지정하기위해 명심할것

   • 1.content is Everything요소가 전부다.
   • 2.Order Comes From Code요소의 상대적 위치는 코드위치로부터 온다.
   • 3.Children sit on parents하위 요소는 상위 요소 안에들어있다.

2. Display-outside 속성들

   block 다른 요소들과 같은줄에 위치할 수 없다. 윗줄과 아랫줄에 한줄씩 공백을 생성한다. width, height, margin, padding 속성명령어를 통해 크기를 조절할 수 있다. <p>, <h1>, <div> 순서리스트 (<ol>, <ul>, <li>), <form>등등

   Inline 다른 요소과 같은줄에 위치할 수 있다. 박스의 주위에 공백이나 줄바꿈을 생성하지 않는다. 생성시 박스의 크기가 담고있는 내용물 (문장, 이미지)등에따라 자동으로 조절된다. 크기를 임의로 번경하는것은 불가능하다. <span><img><a> 등등

   Inline-block 다른 요소들과 같은줄에 있을 수있다. 줄바꿈을 생성하지 않는다. 박스의 크기가 담고있는 내용물 (문장, 이미지)등에따라 크기가 자동으로 조절되며 width, height, margin, padding 속성명령어를 통해 크기를 조절할 수있다. css문법으로 display: inline; 으로 override해준 요소들이 해당한다

   none 박스를 생성하지 않는다. 요소는 화면에서도 표현되지않는다. 위치가 지정되지않는다. static으로 가졌을 위치에는 코드 흐름에따라 다음 요소가 위치한다. css 문법으로 display: none; 으로 override해준 요소들이 해당한다

위의 표는 하나의 테이블안에 3개의테이블을 넣는 방식으로 작성하였다.

1. position

   static css 없이 html만으로 페이지를 작성 했을때,코드의 순서대로 정해지는위치 default값이다. 코드의 흐름에따라 정해지는 위치.	relative static 위치를 기준으로, 유저가 지정한 상대위치. 선언코드: position:relative;  ex) left: 200px; 입력시 static 위치 기준 왼쪽으로 200px 옆에 요소가 배치된다.
   absolute 부모요소를 기준으로, 유저가 지정한 상대위치. 선언코드: position:absolute; ex) right:200px; 입력시, 이 요소의 부모요소의 오른쪽 끝에서 200px만큼 떨어진 곳으로 이동한다.	fixed 브라우저 창을 기준으로 유저가 지정해준 고정위치.  선언코드: position: fixed; fixed로 위치를 지정할시, 유저가 스크롤을 해도 요소는 브라우저 화면위의 고정위치를 유지한다.

text의 위치를 중앙으로 번경하는 방법

1. 
   text 상위요소의 text-align속성을 이용하는 방법:
   body { text-align: center; } inline-block요소와 block요소에 적용가능하다.



2. margin auto를 이용한다
   h1 { margin: 0 auto 0 auto; } margin에 지정되는 값은 시계방향으로 top, right, bottom, left이다. 즉, 위아래 margin은 0 좌우 margin은 auto로 지정해줄시 h1텍스트가 중앙으로 이동한다.

출처: 유데미 강의 100days with python day43: CSS

이 게시글은처음부터끝까지 html로 작성함