본문 바로가기

분류 전체보기229

네이버에서 사용하는 시각 장애인을 위한 웹접근성 네이버에서 아이콘을 사용할 때 한글 표시는 display none을 사용하는 것이 아니라 별도 css를 사용합니다. display none을 사용하면 스크린리더기와 같은 기기에서 인식하지 못하기 때문입니다. 확장 영역 확장 영역이라는 것을 알려줄때 blind라는 css를 사용하고 있어요. .blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 네이버에서는 display none 대신 화면에 보이지 않도록 조치하고 있어요. 2023. 6. 16.
css position static relative absolute z-index css position에서 기본 값 이름이 static입니다. relative 설정은 현재 위치에서 얼마나 이동할지 변경할 수 있습니다. absolute는 현재 위치가 기준이 아니라 전체 화면을 기준으로 위치를 결정합니다. 단 가까운 부모 중에서 position이 기본값 static이 아닌 다른 값으로 되어 있는 경우 거기부터 기준이 됩니다. position fixed를 사용하면 항상 그 위치에 있어서 둥둥 떠 있게 할 수 있어요. 또한 sticky를 사용하면 처음에는 static이다가 화면이 이동하면 fixed로 동작하는 것을 만들 수 있어요. #header { text-align: left; position: relative; } #header-hamburger { position: absolute;.. 2023. 6. 16.
이미지 스프라이트으로 웹사이트 성능 올리기 패딩과 마진 차이 http1.0 사용하는 경우 웹사이트 하고 서버로 요청하는 제한이 있어요. 이미지가 많거나 API를 동시에 여러 개 호출하는 경우 느리게 보일 수 있습니다. 요즘에는 ssl 적용하여 http 2를 적용하는 곳이 많아지고 있지만 그래도 여러 환경을 지원하기 위해서 이미지를 따로 만드는 것이 아니라 스프라이트를 사용할 수 있습니다. 이미지를 하나만 작성하고 클라이언트에서 잘라서 사용하는 방식입니다. 가장 먼저 background-image 속성으로 이미지 경로를 설정하고요. background-position 속성을 사용하여 이미지를 찾아갑니다. 숫자 두개를 넣는데 첫 번째는 좌우이고, 두 번째는 위아래 값입니다. 이미지 영역을 벗어 자면 기본 설정이 반대편 이미지를 보여주는데 이것을 방지하기 위해서 반복 .. 2023. 6. 16.
display block inline-block inline div 태그에서 display 기본 속성이 block입니다. 특징이 width를 100% 모두 차지합니다. 설정된 크기만큼만 공간 차지하게 하는 것이 inline-block입니다. 가운데 정렬하거나 하는 위치 조정할 때 사용 할 수 있어요. inline은 콘텐츠가 있어야 공간을 차지합니다. width나 height 가 영향을 미치지 않는다는 의미입니다. 가운데 표시하기 위해서 display inline-block 설정으로 div가 가진 크기만큼만 차지하도록 변경합니다. 2023. 6. 16.
html head 파비콘 넣기 브라이주에서 왼쪽 위에 작은 아이콘으로 보이는 부분을 파비콘이라고 합니다. 즐겨찾기 같은 기능 이용할 때 보이는 것도 파비콘이 보여요. 여기서 사용하는 파일 확장자가 ico 파일입니다. 보통 png 파일을 많이 사용하고 있어서 변환해줘야 합니다. 1:1 사이즈를 사용하는 것이 좋고요. 작아도 명확하게 잘 보이는 이미지를 사용해야겠죠. 여러 사이트를 이용할 수 있는데요. https://convertico.com 또는 https://www.hipdf.com/kr/png-to-ico 이용해서 변환 할 수 있어요. head 부분에 link 태그를 추가하면 됩니다. 2023. 6. 16.
vscode 에서 웹문서 시작하기 vscode로 개발하면서 쉽게 html 파일 형식 잡는 방법으로 doc 입력하고 나서 tab 키를 입력하면 바로 기본 틀이 나와요. 우리는 한글을 사용하니까 가장 첫 줄에 있는 lang 부분을 ko로 수정합니다. 그리고 수정하면서 중요한 것은 ctrl s 눌러서 저장하는 것을 잊지 마세요. charset 부분은 요즘 보통 UTF-8로 사용합니다. 예전에 만들어진 경우에는 euc-kr로 있을 텐데 요즘 새로 만드는 경우에는 utf-8을 사용해요. vs code 하단에 있는 UTF-8로 참고해서 맞게 해야 합니다. 다르면 한글이 깨져 보일 수 있어요. viewport 설정은 처음 한다면 일단 스마트폰에서 보는 것과 PC에서 보는 화면 비율을 맞게 조정해준다고 알고 있으면 됩니다. 이 부분이 없으면 PC 모드.. 2023. 6. 16.
HTML HEAD 태그 제거해서 데이터 확인하는 방법 HTML 또는 CSS 공부하는 과정에서 디자인을 제외하고 어떻게 구성되어 있는지 확인하고 싶은 경우 사용할 수 있는 자바스크립트입니다. 보통 자바스크립트 선언이나 CSS는 head에 선언되어 있는 경우가 많은데요. 그래서 head 태그를 제거해서 확인해 볼 수 있어요. document.head.parentNode.removeChild(document.head) 이 스크립트는 구글 크롬 개발자 도구를 열어서 콜솔에서 입력 해 볼 수 있어요. 개발자 도구는 F12를 누르거나 단축크 ctrl + shift + i를 입력해서 열어 볼 수 있습니다. 2023. 6. 3.
크롬 플러그인 소스 코드 구하는 방법 크롬 플러그인은 대부분 자바스크립트로 구성되어 있을 텐데요. 가끔 어떻게 만들었는지 궁금할 때가 있어요. 이제는 관리되지 않지만 좋은 플러그인이라서 조금만 수정해서 사용하고 싶은 경우도 있고요. 소스를 볼 수 있고 다운로드 받을 수 있는 사이트가 있더라고요. chrome stats 라는 사이트입니다. https://chrome-stats.com/ 소스 보기를 원하는 것을 검색해서 다운로드 받아 볼 수 있어요. 수정한 내용을 적용해보려면 주소창에 chrome://extensions 입력하고 들어가서 압축해제된 확장 프로그램을 로드합니다를 누르고 압출 풀려있는 폴더를 지정해서 사용할 수 있어요. 남의 코드를 보는 것은 정말 많은 도움이 됩니다. 2023. 5. 26.
반응형

티스토리툴바