block 요소 특징 자동 줄개행이 된다. (수직정렬) (float나 flex를 이용하지 않는한 자동 개행된다.) width를 지정하지 않아도 부모의 width 100% 채운다. (block요소에 width100%는 바보같은 짓) block 태그 안에는 inline요소와 block요소를 모두 가질 수 있다. inline 요소의 특징 줄개행이 되지 않는다. 옆으로 쭉 붙어 올 수 있다. (수평정렬) width와 height를 지정할 수 없다. inline요소의 크기는 글자의 크기가 된다. inline 태그 안에는 inline요소는 포함할 수 있지만 block요소는 포함할 수 없다. inline block 요소의 특징 block요소..

플렉스는 내가 수평정렬하려고 하는 부모요소에 display: flex 값을 추가해서 일반적으로 수평정렬하는 개념을 손쉽게 만들 수 있다. 이렇게 플렉스 값을 주면 부모요소는 (flex comtainer) 가 되고, 자식요소는 (flex items) 가 된다. 이게 왜 중요하냐면 컨테이너와 아이템부분에 지정할수있는 속성들이 다르기 때문이다. 컨테이너에 부여하는 속성들 display - flex ; container의 화면 출력(수평정렬)특성 쉽게 풀어서 설명하면? 플렉스를 사용하려면 플렉스 컨테이너(부모요소)를 만들어야하고 컨테이너를만들려면 display: flex 값이 들어있어야 한다는 것이다. 디스플레이에는 두가지 속성을 사용할 수 있는데 일반적인 플렉스 개념과 인라인요소처럼 옆으로 정렬되는 인라인플렉..

position속성에 대해 알아보자. - position은 요소를 배치할때는 어떠한 기준을 말한다. position은 요소의 위치를 직접적으로 배치해주는것이 아니고, 배치를 위해 기준을 작성해주는 속성이다. (기준->위치설정) 그 기준에는 기본값으로 static이있다. 스테틱은 기본적으로 배치를 할 수 없는 상태를 말한다. 그럼 배치를 할 수 있는 속성들에는 1. relative - 요소 자신을 기준 2. absolute - 위치 상 부모 요소를 기준 3. fixed -뷰 포트(브라우저)를 기준 position 값을 사용하여 기준이 마련되면 실제로 위치를 설정해줘야하는데 그때 사용하는 속성은 top bottom left right z-index가 있다. 기본값은 auto이고 top: { 10px; } 이..

글자와 상자의 개념을 살펴보자. - 요소가 화면에 출력되는 특성, 크게 2가지로 구분. 인라인(inline)요소 : 글자를 만들기 위한 요소들. 블록(block)요소 : 상자(레이아웃)를 만들기 위한 요소들. 1. 인라인 요소 대표적인 인라인요소로는 태그가 있다. 은 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 인라인요소는 기본적으로 왼쪽에서 오른쪽으로 수평으로 쌓이는 특성을 가지고 있다. 자세히보면 가운데 띄어쓰기가 있는것을 볼 수 있다. 인라인 요소는 글자 요소이기때문에 코드를 줄바꿈처리하면 하나의 띄어쓰기로 작동된다. 인라인 요소 인라인요소는 가로, 세로사이즈가 자신이 포함하고 있는 콘텐츠 크기만큼 자동으로 줄어든다. 이번엔 인라인요소에 css스타일을 적용해보자. 인라인 요소 ..

간단히 코드를 보며 부모와 자식 관계를 이해해보자. div태그를 만들고 그 안으로 들어가 새로운 div태그로 감싸주었다. 그랬을때 나중에 만든 div태그에는 처음에 만든 div태그와 어떠한 관계를 가지게 되는데 바로 부모와 자식간의 관계가 되는 것이다. 자식 이번에는 자식요소의 div태그 안으로 들어가 또 다른 div태그를 만들었다. 그랬을때 자식의 부모요소는 태그를 감싸고 있는 div고 그 상위(조상)요소는 그밖에 div태그를 감싸고 있는 또 다른 div태그인 것이다. 즉 상위(조상)요소는 나를 기준으로 나를 감싸고 있는 모든 요소를 지칭하는 것이다. (당연하게 부모요소도 포함시킴) 그럼 기준을 바꿔 이번에는 부모가 기준이 되면 자식의 자식요소니까 하위(후손)요소 라고 말한다.