짹뚜 스튜디오

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