takeU

CSS float과 clearfix 둘을 함께 알아야 사용할 수 있기 때문에, 하나의 글에 같이 정리해보려 함 CSS float float은 뜨다라는 의미이며, element에 부유 속성을 줘 배치할 수 있는 방법 설명 left, right을 사용할 수 있으며 해당 위치에 떠있게 된다. display 속성과 함께 쓰면 display 속성은 무시된다. width, height 설정이 가능하다 float으로 컨텐츠를 띄울 시 다음 내용은 빈자리를 채우려 올라오게 된다. 이러한 현상은 브라우저의 오류로 생겨난 것이고, 이를 해결하는 clearfix는 위의 오류를 해결하기 위한 일종의 버그 해결 방법이다. CSS clearfix clearfix는 네가지 방법이 있으며, 각 방법에 대해 알아보자. 가상 요소 ::..

CSS 정리 CSS란? Cascading Style Sheets HTML 문서를 꾸밀때 사용하는 스타일 시트 언어 CSS 적용방법 Linking Style Sheet ( 외부 스타일 시트 ) 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법 Internal Style Sheet ( 내부 스타일 시트 ) HTML 문서 안의 style 태그 안에 CSS 코드를 넣는 방법 Inline Style Sheet ( 인라인 스타일 시트 ) HTML 태그의 style 속성에 CSS 코드를 넣는 방법 안녕하세요 일반적으로 1번 이외의 방법은 HTML문서 안에 스타일이 들어가 있는 형태인데, 이는 HTML과 CSS 파일의 분리가 되어있지 않으므로 권장하는 방법이 아님. 만약 1, 2, 3번을 동시에 사용 했다면 ..

CSS 중앙정렬 가이드 수평정렬, 수직정렬에 대해 찾아보다가 잘 설명된 페이지가 있어 포스팅 예제 코드는 정확히 필요한 부분만 가져왔기 때문에 폰트,배경 색 같은 코드는 빠져있음 수평정렬 ( horizontally ) 1. inline 요소를 수평 중앙정렬 시 부모 요소에 text-align: center 적용 One Two Three Four 부모 요소인 nav 태그에 text-algin: center를 적용하면 인라인 태그이면서 자식 태그인 a 태그들은 중앙정렬이 된다. 2. block 요소를 수평 중앙정렬 시 block 요소가 한개일 때, 두개 이상일 때를 나누어 알아보자. 2-1. 1개의 block 요소를 수평 중앙정렬 할 때 block 요소는 width 속성을 따로 설정하지 않으면 자동으로 wi..

CSS 변수(variables) SASS로는 변수를 사용해 본 적이 있는데, CSS에서는 직접적으로 사용해 본 기억이 없어서 찾아보고 포스팅 해보려 함 사용법 자바스크립트에서는 변수를 선언할 때 ES5는 var, ES6는 let, const를 사용하는데 CSS 변수를 자바스크립트와 비교해보면 const와 비슷한 역할을 한다고 보면 된다. 굳이 한번 정한 변수의 값을 바꿀 일이 없기 때문. 예시를 통해 이해해보면, 페이지 전역에서 가져다 쓸 수 있는 #FFC600이란 색상값을 base 라는 이름으로 변수화 하고 싶다면 아래와 같이 작성하면 된다. :root { --base: #FFC600; } :root는 HTML 요소 중 가장 상위 요소에 적용한다는 뜻이고, --base는 base라는 CSS 변수를 생성..

CSS position 각 요소의 배치 방법 CSS에서 까다로운 부분중 하나이며 매우 중요함 position: static(기본값) 기본적인 요소의 배치순서에 따라 배치 top, bottom, left, right 를 사용 할 경우 무시 position: relative(상대위치) 기본 위치(static 기준)으로 top, bottom, left, right 를 사용해 이동 position: absolute(절대위치) 가장 가까이 있는 부모 요소(static 제외)를 기준으로 top, bottom, left, right 만큼 이동한다. 즉 relative, absolute, fixed 속성이 선언되어 있는 부모 요소를 기준으로 위치가 결정된다. 만일 부모 요소가 static인 경우, body를 기준으로 ..

CSS display layout을 설정할 때 자주 사용되는 중요한 속성 기본적으로 HTML 요소는 block 또는 inline 속성을 가짐 block 속성?? inline 속성?? 아래서 자세히 설명하겠지만, 이해를 돕기 위해 먼저 간단히 설명하면 block-level Element 내용이 있는 그 자체로 한 줄을 완전히 차지함 ex) ,, … inline-level Element 내용이 있는 만큼만 영역을 차지 ex) ,,, … 위에서 설명한 block-level Element는 display: block, inline-level Element는 display: inline 속성을 기본으로 가지고 있다. 웹 사이트는 필요한 태그를 용도에 맞게 사용해야 하는데 모든 태그는 위에서 설명한 것 처럼 기본적..

box-model 이란? "CSS Box Model은 요소를 위해 생성되고 비주얼 서식 모델을 따라 배치되는 사각형 박스(패딩 및 마진 포함)를 정의하는 CSS 모듈입니다." 라고 MDN에 친절하게 적혀있고, 크롬 개발자도구에서 흔히 볼 수 있는 그 모양이다. 왜 알아야 하는가? 보통 개발을 하면서 디자인 시안에 맞게 코드를 작성 하는데도, 기대한 모습과는 다른 결과물이 브라우저에 잡히게 된다. 대부분의 이유는 박스모델에 대한 이해가 부족해 생기는 일이다. 예시를 통한 이해 디자이너가 박스의 너비를 800px, border 를 1px solid red로 만들어달라 했다고 하자. 그러면 .box { width: 800px; border: 1px solid red; } 위와 같이 작성을 할 것이고, 새로고침..

Reset CSS란? 브라우저마다 각 태그에 대한 속성들이 약간씩 다르기 마련인데, 이를 초기화 시키고 작업해 모든 브라우저에서 동일하게 작동하도록 만드는 방법 즉, 크로스 브라우징 이슈에 대응하기 위한 방법 중 하나이다. 직접 코드를 작성할 수도 있지만, 다른 사람들이 만들어 놓은 보일러 플레이트 중에 유명한 것을 가져옴 Eric Meyer’s “Reset CSS” 2.0 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,..

http://flexboxfroggy.com/ 개구리를 플렉스 속성으로 배치하면서 쉽게 익혀볼 수 있고 마지막까지 깬다면 익히는데는 충분하지 싶음