728x90 반응형 코딩36 CSS 기초(5) 배경에 색상 및 이미지 넣기 background 속성 CSS 기초(5) 오늘은 CSS에서 배경에 색상 및 이미지를 넣을 수 있는 속성에 대해서 알아보겠습니다. 관련 속성에 대해 알아보기 전에 먼저 알아두셔야 할 것은 박스 모델인데요! 박스 모델이란 웹페이지를 보면 보이지는 않지만 크롬의 개발자 모드를 실행해서 보면 콘텐츠에 따라 margin, border, padding, content 영역 순으로 이루어져 있다는 것을 알 수 있습니다. 박스 모델을 알아야 하는 이유는 배경에 색상이나 이미지를 지정해 주는 속성을 적용했을 때 padding 영역과 content 영역에 지정되기 때문입니다. 그것을 알 수 있는 이유는 밖에 border 영역을 통해 테두리를 쳐서 보면 이렇게 테두리 안쪽으로 색상이 적용되는 것을 볼 수 있습니다. 이미지 속성도 똑같이 적용됩니다.. 2022. 7. 10. CSS 기초(4) 텍스트 관련속성 font-family, font-weight, line-height, text-align CSS 기초(4) 오늘은 웹페이지를 구성하는데 중요한 역할을 하는 텍스트와 관련된 속성에 대해 알아보겠습니다. 저번 시간에도 텍스트와 관련된 폰트 사이즈에 대해서 배웠었는데 오늘은 더 나아가 텍스트에 적용할 수 있는 디자인과 텍스트 영역에 관련한 CSS 속성에 대해 알아보겠습니다. (1) font-family font-family는 폰트의 글꼴을 지정해 줄 수 있습니다. font-family의 작성 방식은 'font-family: [글꼴], [대체 글꼴], [글꼴 유형];' 이렇게 작성할 수 있습니다. 여기서 대체 글꼴은 제외해도 가능하지만 대체 글꼴이 있다면 만약 글꼴에 작성한 글꼴이 컴퓨터에 없다면 대체 글꼴로 대신 작성될 수 있습니다. 마지막으로 글꼴 유형은 글꼴도 없고 대체 글꼴도 없다면 글꼴 유.. 2022. 7. 9. CSS 기초(3) 폰트 크기 단위, 폰트 크기 확인 방법 CSS 기초(3) 오늘은 폰트 크기에 관련된 내용을 다뤄보겠습니다. 많이 사용되는 폰트 크기 단위에는 대표적으로 px, rem, em, vw, vh가 있습니다. CSS에서 폰트 크기를 다루는 이유는 폰트 크기도 CSS를 활용하여 적용하기 때문에 CSS에서 폰트 크기를 다루게 되었습니다. 이제 본론으로 넘어가도록 하겠습니다 (1) px(pixel) px은 가장 많이 사용되며 웹페이지에서 기본으로 사용되는 단위입니다. px은 데스크탑이나 스마트폰에서 고정적인 크기를 표현할 때 주로 사용합니다. (2) rem(rootem) rem은 HTML 태그에서 최상위에 있는 태그에 영향을 받는 크기 단위입니다. rem은 HTML 최상위 태그의 폰트 크기에 따라 크기를 지정하는 크기 단위로 HTML은 기본적으로 16px의.. 2022. 7. 8. CSS 기초(2) CSS 색상 표기 방식 CSS 기초(2) 오늘은 CSS에서 색상에 관련한 정보를 드리려고 합니다. CSS에서 색상은 총 3가지로 표현할 수 있는데요! 오늘은 CSS에서 색상을 표현하는 3가지 방법에 대해 알려드리겠습니다. (1) 키워드(keyword) 키워드 방식은 색상의 영문 이름으로 속성값을 주는 방식입니다. 예를 들어 red, blue, black 등 영문으로 속성 값을 주는데 CSS 코드에는 '선택자{ color: red;}' 로 작성합니다. (2) RGB RGB 방식은 빛의 3원 색인 Red, Green, Blue를 통해 속성 값을 주는 방식으로 rgb(R, G, B)로 표기하는데 각각에 0~255의 숫자를 사용하여 색상을 표기하는 방식입니다. 여기서 숫자가 0으로 갈수록 색이 약해지고 255로 갈수록 강해집니다. 만.. 2022. 7. 7. 이전 1 ··· 3 4 5 6 7 8 9 다음 728x90 반응형
