짹뚜 스튜디오

CSS만을 이용해서 삼각형을 만들기 위해서는 Border를 사용하면 된다. 정사각형 모양의 박스에 Border를 추가하게 되면 다음과 같이 생긴다. 이때, Border끼리 만나는 지점을 잘 보면 대각선으로 만나고 있다. 이때, 박스의 width와 height를 0으로 하고 Border의 크기를 늘리면 다음과 같아진다. Border들이 삼각형 모양을 하고 있다. 이 상태에서 원하는 위치의 Border를 제외하고 나머지 Border를 transparent를 하게 되면 삼각형 하나만 남게 된다.

div에 텍스트를 수평/수직 가운데 정렬을 하고 싶을 때 다음과 같이한다. text-align: center를 추가한다. line-height을 div의 height의 동일한 값으로 추가해준다.

Position CSS의 position 속성은 문서 상에서 element를 배치하는 방법을 지정하는 속성이다. static position 속성을 지정해주지 않으면 기본값으로 static이 적용된다. static은 element가 문서 상에서 원래 있어야 하는 위치에 배치된다. 즉, element가 위에서 아래로 순서대로 배치된다. 추가로 static일 때 top, bottom, left, right 속성을 무시한다. relative relative 속성은 element를 원래의 위치에서 상대적인 위치를 가질 수 있도록 한다. 즉, top, bottom, left, right 속성을 부여해서 상대적인 위치를 지정할 수 있다. 여기서 원래 위치라는 것은 static일 때의 위치를 얘기한다. relativ..

CSS Specificity 같은 element에 두 개 이상의 CSS 규칙이 중복으로 적용될 수가 있다. 이러한 경우에는 CSS Specificity 또는 명시도 값이 높은 Selector의 스타일이 적용된다. Specificity 값이 높은 순서대로 정리하면 다음과 같다. Inline Styles: 1000, 예) ID: 100, 예) #h1 Classes, pseudo-classes, attribute selectors: 10, 예) .text, :hover, [href] Elements, pseudo-elements: 1, 예) h1, :before 만약 명시도 값이 동일하다면 나중에 선언된 스타일이 적용된다. 명시도 계산 하나의 Selector에서 명시도 값을 계산하는 방법은 위 리스트에서 각각..

CSS 속성 중 box-sizing은 한 element의 width나 height의 크기를 어떻게 계산할지를 결정한다. box-sizing의 값으로는 content-box와 border-box가 들어갈 수 있고 차이점은 예제를 보면 이해하기 쉽다. #content{ box-sizing: content-box; width: 300px; height: 200px; margin: 20px; padding: 10px; border: 2px solid black; } #border{ box-sizing: border-box; width: 300px; height: 200px; margin: 20px; padding: 10px; border: 2px solid black; } 두 개의 에 동일한 width, mar..

css에서 display 속성은 element (요소)가 웹페이지에서 어떤 식으로 배치되는지를 결정한다. 그중에 3가지에 대해 알아보려고 한다. inline 줄바꿈이 없는 속성으로 한 줄에 다른 element와 같이 배치된다. 대표적으로 과 태그가 있다. 주의사항으로 inline 속성은 width와 height를 따로 지정해줄 수가 없는데 그 이유는 기본적으로 content 크기만큼의 width를 가지기 때문이다. 그리고 margin과 padding도 상, 하로는 지정할 수 없고 좌, 우로만 가능하다. block 줄바꿈이 있는 속성으로 한 줄에 해당 element 하나만 배치되고 기본적으로 width가 100%로 설정되어 있다. 대표적으로 와 태그가 있다. inline과는 다르게 width와 height..

CSS는 Cascading Style Sheets의 약자로 HTML이 웹페이지의 구조를 만든다면 CSS는 스타일링을 담당한다. 셀렉터 { Property: Value; } CSS를 작성할 때는 위와 같은 형식으로 작성한다. 셀렉터: HTML 파일에서 특정 요소를 선택하는 것으로 주로 태그 이름, id, class로 선택한다. /* 태그를 선택할 때 */ body { } /* id로 선택할 때는 id 이름 앞에 # 를 붙인다. */ #id{ } /* class로 선택할 때는 class 이름 앞에 . 을 붙인다. */ .class{ } id와 class의 차이점으로는 id는 같은 이름으로 문서에 하나만 존재하고 class는 이름이 중복될 수 있다. Property: 선택한 요소의 바꾸고 싶은 특성을 뜻한다...