본문 바로가기

HTML35

CSS background-image, 웹페이지에 배경화면 이미지를 넣어보자 BACKGROUND-IMAGE란? background-image를 이용하면 HTML 요소에 배경 이미지를 정할 수 있습니다. background-color는 특정한 색을 사용하는 반면, background-image는 이미지 파일을 적용할 수 있습니다. 기본적인 사용법 .element { background-image: url("image.jpg"); } CSS 선택자 안에 background-image 속성을 입력합니다 속성값은 url(이미지가 있는 주소)를 입력합니다 예시 아래는 저작권없는 이미지 하나를 선택해서 배경 이미지로 설정해본 거에요 See the Pen bg-image by 40's Programmer (@40sProgrammer) on CodePen. 함께 사용되는 속성들 backgrou.. 2023. 6. 16.
프리코드캠프 코스 1-1 : Learn HTML by Building a Cat Photo App FreeCodeCamp로 공부를 시작합니다 프리코드캠프로 공부를 시작했습니다. 전체 15개의 코스로 구성되어 있네요. 전 초보자이니 첫번째 코스 Responsive Web Design Certification을 선택했습니다. Responsive Web Design Certification 모든 설명은 영어로 되어 있습니다. 하지만 우리에겐 구글 번역기와 파파고가 있으니 걱정없습니다. 이 반응형 웹 디자인 인증에서는 개발자가 웹 페이지를 작성하는 데 사용하는 언어, 즉 콘텐츠용 HTML(Hypertext Markup Language) 및 디자인용 CSS(Cascading Style Sheet)를 배우게 됩니다. 먼저 HTML과 CSS의 기초를 배울 수 있는 고양이 사진 앱을 구축합니다. 나중에, 여러분은 .. 2023. 6. 12.
웹 폼의 구조화와 접근성을 높이는 HTML legend 태그 LEGEND 태그란? 태그는 HTML 폼 그룹의 제목을 정의하는 태그입니다. 이렇게 얘기하면 어떤 의미인지 감이 잘 안오는데요. 예시 화면을 보면 바로 이해하실 수 있을 겁니다. 사용법 개인정보 .... ... 배송정보 .... ... 태그는 열고 닫아야 하는 태그입니다 class나 id 외에 별다른 속성은 없습니다 폼 내에서 제목이 필요한 곳에 사용합니다 위치는 과 다음입니다 예시 See the Pen legend by 40's Programmer (@40sProgrammer) on CodePen. legend의 역할이 바로 보입니다. 여러개의 폼들을 묶어서 제목을 보여주네요. 2023. 6. 11.
매력적인 이미지 설명을 위한 HTML figcaption 태그 활용 방법 FIGCAPTION 태그란? 태그는 figure caption의 약자입니다. 태그와 함께 HTML5에서 도입되었습니다. 이미지, 동영상 같은 미디어가 어떤 것인지 설명하는 태그입니다. 하위 태그로 활용됩니다. 활용법 이미지 캡션 figcaption 태그는 열고 닫아야 하는 태그입니다 과 사이에 설명하는 텍스트를 입력합니다 예시 See the Pen figcaption by 40's Programmer (@40sProgrammer) on CodePen. 고양이 이미지 하단에 설명하는 캡션이 잘 붙는 것을 확인할 수 있습니다. 2023. 6. 9.

티스토리툴바