웹시의 코딩기록

모달창과 팝업창이 좀 헷갈렸는데 이 둘의 차이 먼저 알아보도록 하겠습니다.모달창 : 현재 페이지에서 떠오르는 창, 경고 메시지, 추가적인 정보를 제공할 때 사용팝업창 : 브라우저의 새로운 창 또는 탭으로 열림, 광고나 다른 웹사이트로 연결할 때 사용일단 저는 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

width : 폭, 요소의 너비height : 요소의 높이margin : 요소와 요소 간의 간격 설정padding : 요소의 테두리와 내용 사이의 간격 설정overflow : 요소의 내용이 지정된 크기를 벗어날 때의 처리 방법select : 사용자가 텍스트를 선택할 때의 스타일border : 요소의 테두리 설정border-radius : 요소의 테두리 모서리를 둥글게hover : 마우스 커서가 요소 위에 있을 때 적용되는 스타일active : 요소가 클릭될 때 적용되는 스타일focus : 요소를 클릭하면 해당 요소에 스타일 적용first-child : 부모 요소의 첫번째 자식 요소 선택 first-of-type : 부모 요소 내에서 지정된 유형의 첫 번째 요소를 선택nth-child( ) : 부모 요소의..

CSS 2024. 6. 1. 23:29

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

HTML 2024. 6. 1. 22:58