기술 창고/CSS(22)
-
[CSS] 글자 크기, 두께, 글꼴, 정렬
글꼴 크기 - font-size #fontsize{ font-size: 1px; } #fontsize{ font-size: 1pt; } #fontsize{ font-size: 2em; } #fontsize{ font-size: 2rem; } [px] 1px은 1/96 inch의 크기를 나타냅니다. - 0.26mm 정도입니다. [pt] 1pt는 1/72 inch의 크기를 나타냅니다. - 0.35mm 정도입니다. [em] 1em은 부모 태그 글자 크기의 100프로(1em)라고 볼 수 있습니다. 예를 들어, body 태그 안에 h1 태그가 존재하고 body 태그 내의 글자 크기를 20px 로 지정했다면, h1 태그의 1em은 부모 태그인 body 태그와 동일하게 20px 입니다. 만약 h1 태그에 2em 이라..
2023.06.21 -
[CSS] Color 설정
스타일을 적용하는 것 중에 가장 대표적인 것 중 하나가 바로 색상을 적용시키는 것입니다. CSS에서 볼 수 있는 대표적인 Color CSS 는 color, background-color 이 두가지가 있습니다. Hello World Internal CSS 방법을 채택하였고, 각 태그에 색상 설정을 만들어주었습니다. - background-color : 바탕화면 색상을 설정 - color : 적용하고자 하는 부분의 내용 색상을 설정 색상을 설정할 때 값을 우리가 흔히 볼 수 있는 red, blue 와 같이 특정 색상 영단어를 사용할 수도 있지만 #C58940 과 같이 16진수를 넣어 적용할 수도 있습니다. [결과]
2023.06.20 -
[CSS] CSS Selectors
CSS 스타일을 지정해줄 때 어떤 CSS 를 어떤 태그에 적용시킬 것인지 지정을 해주어야 원하는 스타일을 입힐 수 있습니다. 바로 Selectors 가 그러한 지정해주는 역할을 합니다. Selectors 에 대해 알아보겠습니다. index.html CSS Selectors Applying CSS to Different Parts of HTML 1. The element selector targets elements based on their HTML tag name. Class selectors target elements based on the value of the class attribute. ID selectors target elements based on the value of the id a..
2023.06.20 -
[CSS] CSS 추가하는 3가지 방법
CSS는 HTML 구조에 스타일을 입히는 기능이라고 볼 수 있습니다. 웹 개발을 하게되면 반드시 알아야하는 내용이라고 볼 수 있죠. 특히 프론트 구현을 하려면 반드시! 필수 내용으로 공부해야 합니다. 오늘은 CSS 를 입히게끔 추가하는 3가지 방법에 대해서 정리하겠습니다. (1) Inline 스타일 CSS 추가 같은 HTML 태그에 스타일 CSS 를 같이 적용시킨 방법입니다. Inline 방법은 단순한 스타일을 적용해야할 때, 단 하나의 간단한 스타일만 적용하고자할 때 사용하는 방법입니다. 하지만 스타일을 적용할 때 보통 많은 CSS를 적용하기 때문에 Inline 방식은 비교적 잘 사용하지 않습니다. (2) Internal(내부) 스타일 CSS 추가 style 태그를 따로 만들어 CSS를 따로 관리하고 ..
2023.06.20