어쨌든 공부하는 블로그

.attr(): HTML의 속성을 다룬다 .prop(): JavaScript의 프로퍼티(속성)를 다룬다 * 자바스크립트에서 프로퍼티란 {키: 값} 을 의미 var $checkbox = $('#agree'); alert($checkbox.attr('checked')); alert($checkbvox.prop('checked')); 출력 결과 attr(): "checked" → HTML에서의 checked의 속성을 표시(checked) prop(): true → JavaScript에서의 checked의 프로퍼티를 표시(checked: true) 코멘트 var $comment = $('#get_comments'); alert($comment.attr('href')); alert($comment.prop('hr..

웹사이트 하단에 위와 같은 구성의 시간 요소 넣는 것을 구현해보았다 HTML 오후 1:25 2023-12-20 Script function timeSetting() { let date = new Date(); let hours = date.getHours(); let minute = String(date.getMinutes()).padStart(2, '0'); if (hours

이런 input 요소에 focus를 했더니 이렇게 바뀌었다 input:focus에 border 스타일을 동일하게 넣어서 해결해보려고 했지만 안 됐는데 1. input의 경우, 클릭하거나 tab으로 선택했을 때 모두 focus-visible 상태가 된다 따라서 :focus에서 아무리 스타일 변경을 시도해도 안 먹히는 것이다... + button의 경우, tab으로 선택했을 때만 focus-visible 상태가 된다 2. 위 경우에는 border가 아니라 outline이 생기는 것! 위 사진에서 보이듯이 border 스타일의 문제가 아니라 outline 스타일의 문제였기 때문에 border 변경을 해도 소용이 없던 것... 따라서 .search-box>input:focus-visible { outline: ..

위와 같은 느낌의 드롭다운 메뉴바를 구현해보았다 드롭다운 메뉴바 자체의 코드가 어려운 것은 아니었지만 1. 각 메뉴별로 submenu 개수가 달라도 밑에 빈 공간이 생기지 않고 2. 위에서 아래로 내려오는 애니메이션 효과 가 되는 드롭다운 메뉴바를 구현하고 싶어서 좀 더 찾아보았다 HTML 코드 소개 행사개요 일정표 오시는길 라인업 MAIN STAGE SUB STAGE 프로그램 MAIN STAGE SUB STAGE 체험 프로그램 갤러리 SMF 2022 SMF 2021 SMF 2020 SMF 2019 커뮤니티 공지사항 문의하기 FAQ HTML 코드는 그냥 보통의 드롭다운 메뉴바 형식으로 작성해주면 된다 CSS 코드 .navigation { background-color: #1e192c; width: 100..

이런 느낌의 이미지 슬라이더를 만들어보았다 HTML Project CSS #project .title { display: inline-block; } .slider { width: 800px; height: 400px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .slider-wrapper { width: 600px; height: 400px; overflow: hidden; } .slider-slide { width: 1800px; display: flex; flex-direction: row; transition: all 0.5s; } .slide..

홈페이지 제작을 연습하던 중, width에 관해 손댄 적이 없는데 가로로 스크롤바가 생겨 있었다 개발자 도구로 들어가서 body 태그를 살펴봐도 묘하게 조금 공간이 더 생겨 있었다 세로 방향 스크롤바가 생기면서 스크롤바 사이즈만큼 가로 사이즈가 늘어난 것이다... body { overflow-x: hidden; } body 태그 내에 overflow-x에 hidden 속성을 넣어서 해결해주었다 참고: https://g1etistory.tistory.com/7

회원가입 폼을 html/css로 구현하는 과제를 진행하며 추가로 공부한 부분들을 정리해두겠다 CSS 단축 속성 table{ "border: 1px solid lightgray;" } table{ "border-width: 1px; border-style: solid; border-color: lightgray;" } width, style, color를 묶어서 나타낼 수 있는데, 이때 style 속성은 필수로 넣어야 하며, 생략할 경우 적용되지 않는다 참고: https://www.w3schools.com/css/css_border_shorthand.asp table border 한 줄만 나오게 하기 border-collapse 속성을 활용하면 표와 셀 사이의 간격을 조정할 수 있다(기본값: separat..

tip. VSCode에서 shift + alt + f 단축키를 사용하면 자동정렬이 된다 HTML , , …, : 제목 태그 : 선 : 엔터 : 한 칸 띄어쓰기 : bold 태그 : italic 태그(기울이기) : paragraph 태그(단락) : 하이퍼링크 태그 href="링크" target="링크 여는 방법" > _self: 현재 페이지(기본값) > _blank: 새 탭: 이미지 태그 list : ordered list 태그(순서가 지정된 리스트) 으로 1, A, a, i, I 등 타입 지정 가능 : unordered list 태그(순서가 지정되지 않은 리스트) 으로 none, circle, square 등 타입 지정 가능 list item 태그: list 태그 내에 사용 table table 태그 b..