웹시의 코딩기록

HTML에서 사용자에게 정보를 입력 받기 위해 사용하는 다양한 입력 양식 태그들에 대해 알아보겠습니다.  태그 태그는 사용자에게 정보를 입력 받는 기능을 수행하는 태그입니다. type 속성을 사용하여 다양한 유형의 입력 양식을 만들 수 있습니다. input 태그의 type 속성값button : 버튼 생성password : 비밀번호 입력 양식 생성reset : 초기화 버튼 생성text : 글자 입력 양식 생성number : 숫자 입력 양식 생성date : 날짜 입력 양식 생성time : 시간 입력 양식 생성 이름: 주소: 이메일: 색상: 나이: 생년월일: 시간:  이렇게 코드를 구성할 수 있습니다.  태그 태그는 폼 양식에 이름을 붙이는 태그입니다. 사용자가 입력 필드와 쉽게 상호작..

HTML 2024. 6. 10. 19:44

HTML에서 표를 만들 때 사용하는 태그와 속성에 대해 알아보겠습니다. 표는 데이터를 구조화하여 보여줄 때 매우 유용합니다. 기본 표 태그 : 표를 생성하는 태그 : 표 내부의 행을 정의하는 태그   : 행 내부의 제목 셀을 정의하는 태그 (열 제목에 사용됨)  : 행 내부의 일반 셀을 정의하는 태그기본 표 만들기 제목1 제목2 데이터1 데이터2 데이터3 데이터4  이 코드는 아래와 같은 표를 생성합니다. 셀 병합rowspan : 셀의 높이 지정, 행을 병합할 때 사용colspan : 셀의 너비 지정, 열을 병합할 때 사용 111 222 333 444 555 666 777  이 코드..

HTML 2024. 6. 10. 18:45

유튜브 영상을 화면에서 바로 볼 수 있도록 하겠습니다. 가져오고 싶은 유튜브 영상에서 "공유" 버튼을 누른 후 "퍼가기"를 선택합니다.  "퍼가기"를 누르면 이러한 창이 뜨는데 이 내용을 모두 복사합니다.   복사한 내용을 HTML 문서의 'body' 태그 아래에 붙여넣기 합니다. 그럼 이렇게 화면에서 바로 유튜브 영상을 실행할 수 있게 됩니다.

HTML 2024. 6. 9. 21:53

이미지를 삽입하는 방법에는 두 가지가 있습니다.첫 번째는 사진을 다운로드하여 파일에서 불러오는 방법, 두 번째는 이미지 주소를 복사해서 삽입하는 방법입니다.  첫 번째 방법 : 이미지 파일에서 불러오기먼저, 원하는 이미지를 다운로드 한 후 쉽게 찾을 수 있도록 파일 이름을 변경합니다. (굳이 안 해도 상관은 없습니다) 그리고 코드를 다음과 같이 작성하면 이미지가 보이게 됩니다.'alt'속성은 파일 이름에 오타가 있거나 다른 이유로 이미지가 보이지 않을 때 대신 표시될 문구입니다.'alt'는 생략 가능합니다. 두 번째 방법 : 이미지 주소 사용원하는 이미지의 주소를 복사합니다. 저는 핑구를 좋아해서 핑구 사진을 가져올 겁니다. 복사한 이미지 주소를 사용해서 이렇게 코드를 넣어주면 이미지가 나타납니다. 이제..

HTML 2024. 6. 9. 21:50

모달창과 팝업창이 좀 헷갈렸는데 이 둘의 차이 먼저 알아보도록 하겠습니다.모달창 : 현재 페이지에서 떠오르는 창, 경고 메시지, 추가적인 정보를 제공할 때 사용팝업창 : 브라우저의 새로운 창 또는 탭으로 열림, 광고나 다른 웹사이트로 연결할 때 사용일단 저는 1일차에 만들었던 앨범 소개 부분에 수록곡을 볼 수 있는 모달창을 만들어보려고 합니다. Spicy 2023.05.08 발매 수록곡 01. Welcome To MY World (Feat. nævis) 02. Spicy 03. Salty & Sweet 04. Thirsty 05. I'm Unhappy 06. 'Til We Meet Again..

웹사이트 2024. 6. 2. 14:35

최근 HTML과 CSS를 배우고 있는데, 연습 겸 간단한 웹사이트를 직접 제작해 보기로 했습니다. 에스파를 소개하는 공식 홈페이지 같은 사이트를 만들어볼 겁니다! 우선 홈페이지를 열었을 때 제일 위에 보일 로고부터 넣어줍니다.                    #aespa {text-align: center}#aespa #logo img{  width: 100px;    height: 100px;  } 저는 로고를 한 중간에 넣을 거니까 center로 해줍니다. 멤버들 이름으로 메뉴를 만들 겁니다. 이름을 누르면 멤버들 인스타로 연결됩니다.       KARINA      WINTER      GISELLE      NINGNING    #member {  margin-left: auto;    marg..

웹사이트 2024. 6. 2. 11:22

: 강조 : 진하게 : 글자 밑줄 : 이탤릭체 : 윗첨자 : 아래첨자 : 링크로 이동 : 줄 바꿈 : 수평선 : 행 : 열 : 컬럼명colspan : 컬럼 합치기,  rowspan : 행 합치기 : 블록 형태로 영역 설정 : 줄 단위로 영역 설정 : 다중 선택 가능 체크박스 : 하나만 선택 가능 : 순서가 중요하지 않은 항목 나열 : 순서 있는 항목 나열 : 목록 항목 레이아웃 header : 웹 페이지 상단navigation : 웹 페이지 메뉴aside : 웹 페이지 주요 컨텐츠와 관련된 보조 정보section : 본문 내용footer : 웹 페이지의 맨 아래 부분

HTML 2024. 6. 1. 22:58