Study with Melody

Position CSS의 `position` 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있습니다. 예를 들어, html상 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있습니다. 아래는 posion의 값으로 오는 것들 입니다. 아래와 같이 4가지가 있으며, 자주 사용하는 것은 relative와 absolute입니다. position: static;-거의 사용하지 않음 position: relative; position: absolute; position: fixed; 1. relative position: relative; 자체로는 특별한 의미가 없으며, 딱히 어느 위치로 이동 하지는 않습니다. 위치를 이동시켜주는 top, right,..

이전 사전 스터디때 공부했던 내용으로, 새롭게 알게된 내용만 파악하고 넘어가자! Margin과 Padding 👉 273px이라는 가로 값은 border와 padding이 합쳐진 가로 길이 👉 margin까지 합쳐진 가로의 길이는 373px 👉 순수내용(파란색영역)의 길이는 273px에서 border(-10)와 padding(-100)을 제외한 163px p.example { width: 273px; height: 90px; margin: 50px; border: 5px solid black; padding: 50px; } Margin (주황영역) p.example { margin: 50px; } margin에 50px값을 주면 테두리 사방으로 여백이 생긴다. 즉, 위 코드를 풀어쓰면 아래와 같다. p.e..

1. Text-align 텍스트 정렬 왼쪽 정렬 : left, 모든 요소의 기본 정렬은 왼쪽 정렬이므로, 아무 text-align을 주지 않은 태그는 왼쪽 정렬이됨. 오른쪽 정렬 : right 가운데 정렬 : center .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } 예외. 은 inline-element이므로, text만큼의 영역을 차지하고 있으므로, 정렬이 되지 않는다! 2. text-indent 띄어쓰기로 들여쓰기 안되는 것도 text-indent 을 이용하면 들여쓰기 가능! ✋ text-indent : 10px 는 스페이스바 두번( )과 동일하다! .js-description { tex..

1. font family 폰트 스타일을 지정하는 속성 #title { font-family: Georgia, "Times New Roman", Times, serif; } Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면, 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용 Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용, 이것도 지원되지 않으면 Times을 적용 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻. [font family에 여러 폰트를 나열하는 이유] 사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열. 가장 뒤에 ..