개발 공부 일지/HTML_CSS14 HTML - a 태그와 button 태그 뒤로가기 버튼을 어떻게 작성할 지 1. a 태그2. button 태그 링크를 이동하기 위한 목적이라면 a 태그를 사용하는 것이 권장되는 듯 하다그 외의 클릭 이벤트를 적용하기 위함이라면 버튼 태그를 쓴다 a태그를 버튼처럼 사용하는것이 가능하지만 스페이스바로 접근이 어렵기때문에 접근성 면에서는 버튼을 쓰는것이 좋다 빈 버튼 보다는 blind 텍스트를 넣어주자 넹. button 태그에는 div를 사용할 수 없다 인라인 레벨 요소로 불리던 것들 button, input, i, 등등의 요소에는 블록 요소를 집어넣어서는 안된다 https://velog.io/@tjdgus0528/Button%EB%A5%BC-%EB%A7%8C%EB%93%A4-%EB%95%8C-%EC%82%AC%EC%9A%A9%ED%95%A0-%E.. 2024. 8. 27. CSS 선택자 https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors 특성 선택자 - CSS: Cascading Style Sheets | MDNCSS 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.developer.mozilla.org https://www.codeit.kr/community/questions/UXVlc3Rpb246NjRkYjQ2MGY5ZTU4ZmMwN2MwZmM5MzRm 자식 결합자와 자손 결합자는 무슨 차이인가요?.www.codeit.krhttps://developer.mozilla.org/ko/docs/Web/CSS/Next-sibling_combinator 인접 형제 결합자 - CSS: Cascading .. 2024. 8. 5. <button> 비활성화, 하이퍼링크 버튼 비활성화 하기 disable 속성 추가버튼 default값은 false이다버튼에 하이퍼링크 달기onclick 속성 값으로 "location.href=`url`"버튼이건 단지 버튼을 눌렀을때 다른 페이지로 이동하는 기능을 하며폼을 작성해서 제출하는건 action 속성과 관련이 있다 2024. 7. 26. <img> 이미지가 들어갈 크기를 미리 지정해주기 /srcset 이란? img 에 직접 width, height 속성을 넣어주거나, div 등의 wrap 을 사용해서 크기를 미리 지정하는 것이 좋다 렌더링 시 브라우저가 이미지가 들어갈 자리를 미리 계산할 수 있기 도와준다layout shifting 으로 인한 사용자 경험이 나빠지는 것을 방지한다 https://junglast.com/blog/img-width-height-attribute의 width/height 속성과 페이지 렌더링의 상관관계" data-og-description="이미지에 의한 레이아웃 reflow를 막는 방법" data-og-host="junglast.com" data-og-source-url="https://junglast.com/blog/img-width-height-attribute" data-.. 2024. 7. 16. <a> 태그 사용 시 주의사항 https://velog.io/@neori/HTML-a%EC%97%90-targetblank%EC%99%80-relnoreferrer-noopener%EB%A5%BC-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0에 target="_blank"와 rel="noreferrer noopener"를 함께 사용해야 하는 이유" data-og-description="🛠🛡보안과 성능 문제를 방지하자" data-og-host="velog.io" data-og-source-url="https://velog.io/@neori/HTML-a%EC%97%90-targetblank%EC%99%80-reln.. 2024. 7. 16. 프레임워크 사용하기 : Bootstrap 코드잇 강의를 통해 반응형 웹사이트를 빠르게 만들수 있는 프레임워크 부트스트랩을 알게 되었다 버튼같이 작은 요소부터 nav bar 나 grid 같이 웹사이트의 구조를 이루는 (아마도) 모든 것들의 정형화된 코드를 제공한다.빠르게 적용해서 쓸 수 있지만 커스터마이징 하는게 쉽지는 않다고 한다. 실습하면서 써보니까 어느정도 익힐 수는 있었다. navbar, carousel(캐러셀), alert, grid, card (이미지 + 설명글) 등을 손쉽게 만들 수 있었다. 특히 반응형 웹사이트를 만들기 위해 그리드 구조를 사용하는 것이 유용했다. div class="container"> div class="row"> div class="col-sm-12 col-md-6 col-lg-4 col-xl.. 2024. 7. 15. 이전 1 2 3 다음
