Language/CSS

[CSS] reset.css / css 리셋

웹을 개발하다보면 설정한 css가 제대로 적용되지 않는 경우가 있다. 이는 각 웹브라우저(크롬, 파폭, 엣지 등)가 기본으로 설정된 css위에 자신의 css가 덧씌워지기 때문에 그렇다. 이를 위해 기본적으로 css는 리셋해주는 것이 좋고, 이는 다음과 같은 방법으로 해결할 수 있다. 의 사이에 태그를 넣어준다. 이를 이용하면 설정한 css가 정상적으로 적용됨을 확인할 수 있다. 다만, 자신의 css보다 무조건 윗줄에 두어야 자신의 css가 씹히는 것을 방지할 수 있다.

[CSS] 박스 원형으로 만들기

박스 요소를 원형으로 만들고 싶을때가 있다. paint 앱을 만드는 과정에서 다음과 같은 상황이 나타났다. 이걸 원형으로 만들고 싶다면, 공식은 간단하다. width/2의 값으로 border-radius 값을 지정해주면 된다.

[CSS] 글자 / 텍스트 속성

텍스트를 다루는데 있어 속성들은 여러가지이다. 1. font-family: 폰트 자체를 지정. 고딕체, 명조체 등등 2. font-weight: 폰트의 두께를 지정한다. 1~1000의 숫자를 지정할 수도 있지만, 일반적으로 normal, bold, lighter, bolder 로 사용한다. 만약 두꺼운 글자나 얇은 글자를 지원하지 않는 폰트의 경우 적용되지 않을 수 있다. 3. line-height: 줄 높이(행간)을 지정할 때 사용한다. normal 또는 숫자로 지정할 수 있다. 단위 없는 숫자의 경우 폰트 크기를 기반으로 설정하고, 단위를 두면 px, %, rem 등 모두 사용할 수 있다. 보통 1.5~1.9 정도로 사용한다. 4. text-align: 텍스트의 맞춤을 지정한다. left, right..

[CSS] css의 단위 (px, %, rem, em, vw, vh)

1. "px": 화면 위의 1픽셀을 기준으로 하는 단위 1. "%": 부모 요소 크기를 기준으로 비율로 지정하는 단위 2. "rem": 루트 요소(html 요소)에 지정된 크기를 기준으로 배수곱 하는 단위 3. "em": 부모 요소의 크기를 기준으로 배수곱 하는 단위 4. "vw": "viewport width"의 약자로 브라우저를 볼 때의 출력 너비를 기준으로 퍼센트 곱 하는 단위 5. "vh": "viewport height"의 약자로 브라우저를 볼 때의 출력 높이를 기준으로 퍼센트 곱 하는 단위