kono

1. 개요 [CSS 기초-1] Block Vs inline에서 block과 inline의 element를 각각 변경할 수 있다는 설명에서 float에 대한 설명은 없었습니다. 이 포스트에서 이어 진행하겠습니다. word나 한글 문서를 작성할 때, 그림을 텍스트로 인식과 같은 설정을 보셨을 겁니다. 마치 그림이 글을 감싸는 듯한 형상입니다. 이런 역할을 하는 것이 float 입니다. 바로 간단한 예제를 확인해보겠습니다. 2. float 예시 다음과 같은 형태로 웹이 있다고 해보겠습니다.(색은 못 넣었습니다 ㅠ) Banner Side Bar Main Contents /* Side Bar */ .main-page aside { width: 200px; background-color: green; float: ..

1. 개요 대부분의 html의 요소는 block 입니다. , , , , , , 등이 그러한 element(요소) 입니다. block이라는 단어대로 한 라인에 옆에 다른 요소가 올 수 없는 형태입니다. 반면, inline(' 같은 줄')이라는 뜻과 같이 같은 줄에 inline의 element가 함께 위치할 수 있습니다. 예시를 보면 다음과 같습니다. 1-4 라인은 block element인 paragraph로 작성 되었습니다. 4번 라인은 오른쪽 정렬을 해도 왼쪽의 공간이 남습니다. 한 라인을 다 차지하기 때문이죠. 반면, inline element인 span은 오른쪽 정렬을 해도 공간이 남게 되었습니다. (텍스트의 양만큼만 공간을 차지하네요.) 2. inline과 block 한 번 정하면 못 바꾸는건가요..

1. 개요 html 태그나 element 등을 사용하면 순서대로 작성됩니다. 그러나 CSS position이라는 property를 사용하면 코드 순서와 상관 없이 원하는 곳에 그려낼 수 있습니다. 예를 들어, 상단의 메뉴바는 스크롤을 내려도 항상 떠다니는 기능이 이를 활용한 것입니다. 또한, text 박스 안에 겹쳐서 다른 이미지나 박스가 들어간 것도요! 가장 많이 사용하는 postion은 - relative - absolute - fixed 세 가지가 있습니다. 각각이 어떤 역할을 하는지 살펴보겠습니다. 2. relative relative(사전적 의미로 '상대적인')은 자체의 특별한 역할은 하지 않습니다. 다만, position의 위치를 조정하기 위해서는 이 position property 선언이 반..