kasumil의 코딩 공작소

float 기반 레이아웃 float 속성에는 left, right, none의 값을 가지며 이중 하나를 값으로 줄 수 있다. but, float 속성을 가진 요소는 부모가 높이를 인지 할 수 없기에 부모인자를 무시하고 벗어나는 경우가 있다. 그렇기에 float를 다루기 어렵거나 귀찮은 요소라고 생각하는 개발자가 많이 있다고 한다. 그렇다면 이런 망아지같이 말을 안듣는 float 속성을 제어하려면 어떻게 해야할까? 그래서 clear라는 속성을 통해 제어해야한다. 이때 나타난 속성은 또 무엇인가? float의 동작방식을 제어하는데 중요한 요소. 부모속성을 무시하고 넘치는 부분을 해결하기 위해선 해결방법이 3가지 있다. 해결방법1. 바깥 div(.wecode-box) 마지막에 아무태그나 넣고 clear 속성을..

inline 속성값을 가진 태그로 a, span 태그 등이 있다. 인터넷주소링크, 요소(엘리먼트) block 속성값을 가진 태그로 div, p, h1 등이 있다. 정해진 것 없음 내용 제목 코드의 차이점은 html에서 표시될때 영역할당에 따른 구분이다. block은 한 줄을 차지하고, 그 옆에 아무런 속성, 요소등이 올 수가 없지만, inline 속성은 딱 감싸진 글자들만 표시되기때문이다. inline-block 블록 자체의 성질은 block이지만, inline-의 문구가 붙으므로 inline의 성질이 생겨서 block속성을 동시에 가진 것. 이해하기 쉽도록 한번 예제를 만들어 보았다. 맨 마지막은 inline-block을 블록성질이 inline으로 바뀐것을 볼 수 있도록 확인하기 위해서 작성하였다. d..

Position 속성 relative absolute fixed static(앞서 코딩학습 2일차에서 잘 안쓴다는 속성이 static이다.) static static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다. 그대로 설명을 가지고 왔다. 이보다 좋은 설명은 없는 것 같기때문이다. 말 그대로 static 속성은 지정되지 아니다. 그렇기에 다른 지정된 속성을 쓰기위해서 지정된 속성인 relative, absolute, fixed를 사용한다. + Position 속성을 부여하지 ..