CSS311 CSS Float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. mozilla에서 float을 위와 같이 정의한다. 보통, 단어 뜻 그대로 '떠다닌다' 하면 뭘 어떻게 떠다닌다는 것인가? 라는 의문이 들기 마련이다. float은 인라인 요소가 float속성이 적용된 요소를 감싸는 효과라고 생각하면 된다. left - 부모요소의 left side부터 차례대로 위치된다. right- 부모요소의 right side부터 차례대로 위치된다. none- float형태로 적용되나 다음에 오는 element의 좌우 크기가 남은 공간보다 크면 다음 줄에.. 2020. 5. 6. html <img> vs css {background-image}(img태그와 백그라운드 이미지 비교) 두 가지 방법을 활용하여 이미지를 원하는 위치에 구성하면 결과적으로 똑같은 효과를 얻어낼 수 있다. 그러면 둘을 결정하는 기준은 무엇일까? 답은 html과 css의 기본에 있다. html 태그들은 웹 페이지를 구성하는 작은 부분들이다. 따라서, 사용할 이미지가 컨텐츠로 의미를 갖는다면 img태그를 사용하면 된다. 그것이 아니라 디자인적인 필요에 의해 background-image로 사용하면 될 것이다. 프론트엔드 개발 중에 위와 같은 대체 기능이 보이고 고르는 것이 헷갈릴 수 있다. html은 컨텐츠를 구성하는 부분이고 css는 디자인적인 요소임을 인지하면 쉽게 구분해서 사용할 수 있을 것이다. 2020. 5. 5. css3 박스 모델의 통찰(css3 box model insight) 이전까지 태그는 box element 이거나 inline element임을 공부하였다. 두 종류의 css 속성 값에 대한 정리를 하면 다음과 같다. block element: width, height, padding, margin, border를 가질 수 있다. inline element: width, height을 적어도 적용되지 않음. padding, margin은 적어도 좌우만 적용됨. border는 가질 수 있음. 실제로 inline element에다가 5가지 속성 값을 변경해가면서 적용해보고 인접 박스와 어떻게 배치가 되는지 보면 쉽게 이해할 수 있다. a태그와 같은 경우 클릭을 할 수 있는 공간을 크게 하기 위해 상하 패딩이나, 마진을 주고 싶은 경우가 생긴다. 이 때는 inline-block.. 2020. 5. 4. css 셀렉터 기본설명(css3 selector basic) selector {(property : value;)+ }에서 selector 부분을 살펴보도록 한다. 우리는 앞으로 ".class > #id + p ~ div" 와 같은 selector를 보고 어떤 것을 의미하는지 이해하면 되는 것이다. .class, #id, p, div가 들어가는 부분은 uni_selector라 지칭하고 >, +, ~ 와 같은 것을 op라고 지칭하도록 하겠다. 앞으로 css 문법을 보고 이해가 안 된다면 uni_selector를 모르거나 op를 모르는 것이라 보면 될 것이다. 추가 문법 등은 이 구조 하에서 추가하면 될 것이다. manual을 보지 않고 임의로 정한 방식이니 우선 이 글을 통해 이해하고 매뉴얼을 통해 정리하는 것을 추천한다. 개인적으로 간단히 정리해보면 selecto.. 2020. 5. 3. 이전 1 2 3 다음
