CSS 기본2

2020/03/22 - [HTML5+CSS] - CSS 기본1

 

 

부모 : 나보다 상위, 나를 크게 감싸고 있는 것들

형제 : 나랑 같은 계급

자식 : 나보다 하위, 내 속에 크게 감싸여지고 있는 것들

 

일반적으로 html 요소들은 문서의 위에서 아래 순서로 나열된다.

일반적인 흐름(normal flow) :  block, inline, relative

이러한 위치를 변경하기 위해...

1. display 속성 을 통해 요소가 보여지는 방식 변경하기

  - block, inline, inline-block (박스모델)

  - table, flexible, box, qrid ... 레이아웃 활용

  - flex

2. position 속성 을 통해 위치 자체를 변경하기 좌표 프로퍼티(top, bottom, left, right)

3. float 속성 을 통해 떠 있도록 만들기

---

dispaly : 블락/인라인/인라인블락 ;

display : block:

줄바꿈이 일어나는 요소

화면 크기 전체의 가로폭을 꽉 차지

블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있음

너비를 강제하면 나머지는 margin을 자동으로 준다.

 

display : inline

줄바꿈이 일어나지 않는 행의 일부 요소

content너비(요소) 만큼만 딱 가로폭을 차지

width, height, margin-top, margin-bottom을 지정할 수 없다.

상하여백은 line-height로 지정한다. =>  line-height: 블록크기px; (수직정렬로 예쁘게 블록 가운데로 위치)

인라인 레벨 요소 : span / a / img / input, label / b, em, i, strong 등 텍스트 관련 요소들

 

display : inline-block

Block과 inline레벨 요소의 특징을 모두 갖는다.

lnline 처럼 한 줄에 표시 가능하면서

Block처럼 width,height,margin 속성을 모두 지정할 수 있다.

즉,  한 줄에 다 같이 놓고싶으면서 너비와 높이를 지정하고 싶을 때 사용한다.

 

html에서 띄어쓰기는 의미가 없지만... 인라인 블록끼리 띄어쓰기는 4px간격씩이 생긴다.

 

블록/인라인 속성에 따른 수평 정렬

	블록	블록의 경우 마진이 있다.	인라인(텍스트요소)
맨 왼쪽으로	margin-right: auto;	마진을 오른쪽에 다 주기	text-align: left;
맨 오른쪽으로	margin-left: auto;	마진을 왼쪽에 다 주기	text-align: right;
가운데 정렬	{ margin-right: auto; margin-left: auto; }	마진을 양쪽에 똑같이 주기	text-align: center;
	{ margin: 0 auto; }

 

 

---

 

다단 레이아웃 : position, display, float

 

CSS position

static : 디폴트 값(기준 위치)

        기본적인 요소의 배치 순서에 따른다 (좌측 상단)

        부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 (좌측 상단) 배치된다.

---

position : 상대/절대위치;

1. relative(상대위치) : static 위치를 기준으로 이동, 자기가 차지한 공간은 그대로 유지하고 이동한다.

                             아래 있던 요소들에게 영향을 미치지 않는다.

2. absolute(절대위치) : static이 아닌 가장 가까이 있는 부모 요소를 기준(static이 아닌 것)으로 이동, 겹치기 가능

                             본인의 위치를 지우고 이동한다.(공간을 차지하지 않게 된다.)

                            아래 요소가 그 자리로 땡겨짐, 영향을 받는다. 그래서 사용에 주의!!!

                            부모요소의 포지션이 relative 가 아니라면 기준을 잡기 위해
                            계속 부모부모 올라가서 body영역까지(브라우저기준) 간다.

3. fixed(절대위치) : 부모 요소와 관계없이 보이는 전체 브라우저를 기준으로 이동, 고정 짱 박히기

                         스크롤 시에도 항상 같은 곳에 박혀 위치한다. (항상 위에 있거나 항상 아래 있거나 하는 것에 유용)

 

좌표 프로퍼티(top, bottom, left, right)를 사용하여 그 속에서 이동이 가능하다.(음수 값(-1px)도 가능)

 

---

float : left/right ;

float : Float는 요소를 일반적인 흐름(normal flow)에서 벗어나도록 하는 속성 중 하나

        반드시 clear 속성을 통해 초기화가 필요하며 예상치 못한 상황이 발생할 수 있다.

        float를 사용하는 경우 block 사용을 뜻함, display값이 inline인 경우 block으로 계산.

        middle 속성은 없다.

float가 발생시키는 문제 :

       자식 요소의 float 속성으로 인해 부모 영역의 높이가 사라지는 문제

       - div의 기본 높이는 0이고 자식요소에 따라 높이가 생기는데 자식이 사라짐으로써 높이가 0이 된다.

       clear한 요소의 margin이 제대로 표현이 되지 않는 문제.

      공간을 떠다니고 있기 때문에 비어있는 공간에 예상치 못한..아래에 있어야 할 태그가 낑겨 들어갈 수 있다.

      이것을 해결하기 위해 clear : both를 하게 되면 빈공간으로 들어가지 않게된다.

 

float가 발생시키는 문제 해결 방안 ** 여러 4~5가지 방안이 있으나 ...

       의사(가상)요소 선택자를 활용한 clear : both 방법하자!

/* CSS style영역 해결 방안 */
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

  <!--html body 영역 float 다음에 clearfix 클래스를 추가 -->
  <div class="clearfix"></div>