본문 바로가기

웹디자인7

CSS background-color 웹페이지, HTML 요소에 배경색을 넣는 속성 BACKGROUND-COLOR 란? background-color 속성은 요소의 배경 색상을 정의하는 데 사용됩니다. 색상 값을 지정하면 웹 페이지의 모양과 느낌을 변형하여 더 매력적이고 시각적으로 매력적으로 만들 수 있습니다. 미묘한 배경색을 원하든 대담하고 생생한 색상을 원하든 '배경색' 선택기가 도움이 됩니다. 기본적인 사용법 .element { background-color: red; } CSS 선택자 안에 background-color 속성을 입력합니다 속성값에는 color를 입력합니다 속성값을 넣는 4가지 방법 위의 예시에서는 red를 바로 입력헀는데요. 색을 넣는 방법은 크게 4가지가 있습니다. 1. 지정된 색 사용 background-color: yellow; 우리가 흔히 생각하는 컬러는 .. 2023. 6. 14.
HTML을 스타일리쉬하게 만드는 CSS CSS란? CSS(Cascading Style Sheets)는 HTML문서를 화려하고 아름답게 만들어주는 언어입니다. HTML 코드만으로는 시각적인 아름다움, 반응형 웹페이지를 만들수가 없기 때문에, CSS를 이용해서 글꼴, 색상, 레이아웃 및 애니메이션 등을 제어합니다. 사용법 CSS를 HTML에 적용하는 방법은 3가지가 있습니다. 인라인 (Inline Style) : HTML 태그에 직접 입력 첫번째 방법은 태그 안에 직접 CSS언어를 입력하는 것입니다. 이 때 CSS가 적용되는 범위는 직접 입력한 태그에만 해당됩니다. Hello, world! 태그 안에 style 속성을 추가합니다 큰 따옴표 안에 스타일을 정의합니다 스타일 내에서 속성과 속성값은 한쌍이고 "속성: 속성값;"으로 적습니다 위의 예시는.. 2023. 6. 13.
이미지 표현을 위한 HTML img 태그 IMG 태그란? 웹페이지에 이미지(image)를 넣을 수 있는 태그입니다. IMG 태그는 self-closing 태그여서 닫는 태그가 필요하지 않습니다. 대부분의 HTML 태그가 쌍으로 존재하지만, 일부 태그는 단독으로 존재합니다. 이미지가 없는 웹사이트를 찾기가 힘들 정도로 HTML에서 이미지 태그는 필수인 것 같아요. 사용법 img는 태그, src,alt는 태그 내 속성입니다 src 속성(source)에는 이미지 파일이 있는 위치를 입력합니다 alt 속성에는 이미지가 보이지 않을 때 나올 텍스트를 입력합니다 alt 속성은 꼭 입력하지 않아도 이미지 파일을 보이는데 문제는 없어요. 하지만 검색엔진이 웹페이지의 완성도, SEO 기준을 볼 때 중요하기 때문에 넣어주면 좋습니다. 코드 작성 저는 wikipe.. 2023. 5. 28.