Front-end 개발

"a" 태그는 하이퍼링크를 생성하는 데 사용되며 여러 속성을 포함할 수 있습니다. 1. href: 링크의 대상 URL을 지정합니다. 이 속성은 필수입니다. (＊href 옵션) Visit Example.com 2. target: 링크를 어떻게 열지를 지정합니다. 주로 사용되는 값은 "_blank"로, 새 창이나 탭에서 링크를 엽니다. Visit Example.com 3. title: 링크에 대한 추가 정보를 제공합니다. 이 정보는 사용자가 마우스를 링크 위에 올릴 때 툴팁으로 표시됩니다. Visit Example.com 4. download: 링크를 클릭했을 때 리소스를 다운로드하도록 지정합니다. 이 속성은 태그가 다운로드 링크로 사용될 때 유용합니다. Download PDF 5. rel: 링크의 관계를 ..

1. 뷰포트(viewport) 란? 사용자가 웹 페이지를 볼 때 화면에 표시되는 영역을 의미합니다. 모바일 기기에서는 특히 중요하며, 반응형 디자인 및 모바일 친화적인 경험을 구현하는 데 사용됩니다. 위의 코드는 반응형 페이지 제작시 설정하는 예제입니다. width=device-width : 이 설정은 기기의 화면 너비를 웹 페이지의 너비로 사용하도록 지정합니다. initial-scale=1.0 : 이 설정은 페이지가 처음 로드될 때 초기 배율을 1.0으로 설정합니다. 이는 사용자가 페이지를 처음 열었을 때 기본 배율로 표시되도록 합니다. maximum-scale : 사용자가 확대할 수 있는 최대 배율을 제어합니다. minimum-scale : 사용자가 축소할 수 있는 최소 배율을 제어합니다. user-..

@import 타입: (장점) 1. 스타일시트를 다른 스타일시트에 포함시키기 쉽습니다. 2. HTML 문서가 로드된 후에 실행되므로 일부 스타일을 지연하여 로드할 수 있습니다. (단점) 1. 순차적으로 로드되므로, 한 파일이 로딩되기 전까지 다음 파일의 로딩이 시작되지 않습니다. 이로 인해 페이지 로딩 시간이 더 걸릴 수 있습니다.(병렬 로딩 제한) 2. 브라우저가 캐싱하기 어렵습니다. 브라우저는 각각의 @import 문을 별개로 처리하기 때문에 전체 스타일시트를 캐시하기 어려울 수 있습니다. /* @import 사용법 */ @import url('reset.css'); @import url('layout.css'); @import url('typography.css'); /* 나머지 스타일 규칙들 */..

1. accept 속성 서버로 업로드하는 파일의 type을 명시 합니다.( ex: .jpg) 하나 이상의 확장자를 사용할 경우 콤마로 구분 합니다. ( ex: .jpg,.png,.svg) accept을 사용하지하지 않으면 모든 파일을 입력 받습니다. 확장자을 지정 하여도 사용자가 모든파일(*.*) 선택하여 올릴수 있습니다. (주의) 특정 확장자만 입력 받고 싶다면 별도 작업 필요합니다. 2. capture 속성 모바일에서 이미지 업로드 할때 사용합니다. capture 속성 값으로 전/후면 카메라를 우선 작동시킬수 있습니다. //전면카메라 //후면카메라 3. required 속성 파일이 선택 되어 있는지 확인 할 때 사용합니다. 파일 미선택 시 '파일을 선택하세요'라고 메시지가 보입니다. 4. multip..