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 한 번 정하면 못 바꾸는건가요..