HTML & CSS6 <template> 태그 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용 페이지가 로드될 때 렌더링 되지 않으며, 사용자에게 보이지 않음 나중에 자바스크립트를 통해 해당 콘텐츠를 복제한 후 렌더링함 특정 HTML요소들을 다시 사용할 수 있게 함 태그 없이 해당 작업을 하려면 브라우저가 해당 HTML 요소들을 렌더링 하지 않도록 HTML코드를 작성해야함 추가 테스트 이미지 2024. 3. 28. <hr> hr태그 색상 및 속성 hr 태그는 다른 그냥 div처럼 background-color 속성을 사용하니 먹히지 않아 알아보았다. .eventInfoHr { background: #f0f0f0; height: 2px; border: 0; } 찾아보니 background 라는 속성으로 색상을 넣고 height로 길이 조절하는것은 동일하고 border를 0으로 해주면 되었다. 2024. 3. 18. 절대경로 & 상대경로 예를들어 favicon을 넣는다고 가정하면 해당 경로로 넣으면 절대경로로 서버의 루트에서 부터 경로를 찾기 시작하고 앞에 "/"를 빼고 경로를 넣으면 현재 파일의 경로에서 부터 찾기 시작함 2024. 3. 15. form 태그 속성 정리 name 폼 요소의 이름, 서버로 전송될 때 해당 필드의 식별자로 사용됨 id html 문서 내에서 고유식별자 onsubmit 폼이 서버로 제출되기 전에 실행할 JavaScript 함수, 주로 유효성 검사나 사용자 정의 동작 수행 method 폼 데이터를 서버로 전송할 때 사용할 http 메서드를 지정 주로 GET, POST가 사용되며 GET은 URL에 데이터를 추가하고 POST는 본문에 데이터를 담아 전송 action 폼 데이터가 서버로 전송될 때 어떤 URL로 전송할지를 지정 서버측 스크립트가 위치한 경로를 가르킴 2024. 3. 14. CSS 메모 내부 아이템들을 세로로, 중앙정렬 해서 하나씩 쌓기 display: flex; flex-direction: column; align-items: center; CSS로 이미지 넣기 background-image: url(../img/spr_bi.png); 중앙 정렬(가로 세로) justify-content: center; align-items: center; justify-content: center는 가로축 기준 정렬 설명하자면 위아래로 거리가 같게 정렬 align-items: center는 세로축 기준 정렬 좌우로 거리가 같게 정렬 2024. 3. 5. 웹 애니메이션 구현방법 by HTML & CSS CSS3 transition & CSS3 transformHTML Without transition With transition SCSS.wrap { margin: 50px;}.container { display: inline-block; width: 300px;}h1 { color: lightgray; font-family: lato; font-size: 20px; font-weight: 200; padding: 20px; text-align: center; text-transform: uppercase;}.box { border-radius: 5px; height: 40px; margin: 50px auto; width: 80px; .. 2024. 2. 28. 이전 1 다음
