분류 전체보기
-
스킵 메뉴 스킵 네비게이션 skip menu skip nav 란?이것저것 2023. 7. 5. 14:15
회사에서 처음으로 받은 과제가 html 마크업을 하는 과제였다. 나름대로 지금까지 배운 것들 내가 알고있는 것들을 총동원해서 열심히 마크업 해서 보여드렸다. 하지만 피드백을 들으면 들을수록 총체적 난국;;;;; 정말 내가 혼자 공부하며 배우는 것과 실무는 너무 달랐고 실질적으로 알아야하고 필요한 정보들을 내가 하나도 모르고 있구나라고 느끼며 약간의 충격을 받은 피드백 시간이었다. 그리고 피드백을 받으며 skip menu skip nav라는 것을 처음으로 알게되었다. skip menu도 몰랐어!!!!!! 나란 사람 그동안 뭘 배운걸까 생각했다^^ skip menu skip nav란? : 콘텐츠가 많은 홈페이지에서 tab키로 원하는 부분까지 도달하기 어려운데, 이러한 불편함을 스킵 메뉴를 통해 해결함 : 즉..
-
css로 화살표, 삼각형 기호 만들기css 2023. 7. 4. 17:29
화살표 만들기 이전 화살표 다음 화살표 .arrow-prev { position: relative; } .arrow-prev:before { position: absolute; left: 0; top: 0; content: ''; width: 50px; //화살표 크기 height: 50px; //화살표 크기 border-top: 5px solid #000; //화살표 선 border-right: 5px solid #000; //화살표 선 } 방법 화살표를 넣을 태그에 가상선택자를 사용하여 만듬 width height로 화살표의 크기를 정해줌 border로 화살표 선을 만들어줌 원하는 모양으로 방향을 돌려줌 여기서 이런 모양의 화살표를 만들어주려면 화살표를 돌려주면 된다 ! 즉, transform..
-
details 태그html 2023. 7. 4. 16:04
차장님이 작성하신 html 파일을 보면서 어떤 태그를 사용하고 어떻게 마크업 하는지 공부하고 있었는데 처음보는 태그를 발견했다. 바로 details 태그이다. 아코디언 구현을 details과 summary태그를 사용하여 만든 부분이었다. 클릭하면 안에 내용이 나오면서 보여지며 아코디언 기능을 했다. 근데 개발자 도구로 보면 어떠한 기능도 붙어있지 않아서 이건 뭐지 생각했다. 검색해보니 html5부터 새로 생긴 기능으로 스크립트를 붙이지 않고 html 태그만으로 더보기 닫기 기능을 할 수 있는 태그였다. 이렇게 편리한 태그가 있었다니 충격이었다;;;; details 태그란? : html5에 추가 된 태그로 하위 요소로 태그를 가짐 : 태그는 더보기 접기 기능의 모든 영역을 감싸주는 태그 : 태그는 더보기 ..
-
hosts 파일이란?이것저것 2023. 6. 28. 16:56
우리가 인터넷을 사용할 떄 주소창에 http://사이트 주소를 입력합니다. 이 주소는 컴퓨터가 이해할 수 없는 언어라서 컴퓨터가 이해할 수 있는 언어로 변경되어 전달됩니다. 예를 들어, 네이버 사이트 https://www.naver.com/의 ip주소를 dns에서 검색하여 네이버 사이트의 ip주소를 확인하고 네이버창 ip주소에 대한 네이버창을 보여주게 됩니다. 이것이 일반적인 방법입니다. 하지만 윈도우 hosts 파일은 호스트 이름에 대응하는 ip주소를 저장하여 dns서버에서 ip주소 정보를 제공받지 않고 빠르게 서버 위치를 찾을 수 있게 지정해 줄 수 있습니다. hosts란? hosts 파일의 역할? : hosts 이름에 대응하는 ip주소가 저장되어 있어 dns(도메인 이름 시스템)에서 주소 정보를 제..
-
웹 접근성에 준수하며 table 만들기css 2023. 6. 27. 17:29
마크업의 기본 구조 태그 : 표 : 행 : 열의 제목 : 내용 셀 : 표의 머리 부분 : 표의 본문 부분 표의 꼬리 부분 : 표 제목 : 행의 그룹화, 보통 셀의 width 값을 줄 때 사용 속성 colspan : 열 합칠 때 사용하는 속성 rowspan : 행 합칠 때 사용하는 속성 scope : th에 들어가는 속성으로 th가 적용되는 범위를 나타내줌 : 웹 접근성을 위해 th 태그에 scope 속성을 넣어야 함 : col, row, colgroup, rowgroup 웹 접근성 준수를 위해 필요한 조건 1. cpation 필수(display: none;을 사용하지 않고 숨기기) 2. th에 scope 작성 3. thead 있으면 작성하기 없으면 넣지 않기 4. tbody 넣기 5. thead 영역에는..