분류 전체보기235 크롬 오픈왁스 openwax - 접근성테스트를 간략하게 할때 사용 - 실무에서 접근성테스트는 자체프로그램을 사용하며 백엔드개발이 붙은후 진행함 - 인증마크심사가 필요없는경우 기본적인것만 넣어줌 - 일반회사는 키보드접근성을 고려하지않으며 관공서, 대기업(삼성,엘지,현대)등은 키보드접근성도 맞춰야함 https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe?hl=ko 2022. 9. 23. html validator 마크업 유효성 검사 html validator - 마크업 유효성검사 - 제목태그안의 img는 alt에 설명넣어야함 - 안의 img는 alt에 설명넣어야함(이미지안의 글자를 써줌) - img태그의 alt는 생략불가 - 태그 안쪽에 제목태그가 하나이상 있어야함 - iframe의 frameborder는 빼야함 알드라이브에 html 올리기 경로복사 뒤에 폴더명 넣기 /test/ http://hyojin7794.dothome.co.kr/test/ 유효성검사 채용공고 포스코건설과 함께할 역량있는 인재를 모십니다 GO hyojin7794.dothome.co.kr 마크업 사이트에 경로넣고 테스트하기 https://validator.w3.org/ 오류가 있으면 검사기가 알려줌 오류가 없을시 2022. 9. 23. css- display: -webkit-box 문단 말줄임 게시판 부분 3줄 이상 넘어가는 글씨는 말줄임표로 표시될 수 있게 셋팅해보자. 태그 속성 display: -webkit-box; 크롬,사파리용, 말줄임 display (익스안됨) 특수 -webkit-box-orient: vertical; 글자의 흐름을 세로방향 -webkit-line-clamp: 3; 말줄임나올 줄수 text-overflow: ellipsis; 현재는 없어도 말줄임 나오지만 예전엔 필요 혹시 모르니 삽입 (IE11대응, 익스는 말줄임 처리가 안되므로) max-height: 108px; 글자가 짦으면 놔두고 글자가 길 경우 최대크기 지정하여 안늘어 나게함 적용코드 p { font-size: 25px; display: -webkit-box; -webkit-box-orient: vertical.. 2022. 9. 22. html, css - 유튜브 동영상 2 /모달팝업창 적용 자 여기 메인화면에 유튜브 버튼을 클릭하면 유튜브가 보이게 하기 위해서 영상을 먼저 넣어보았다. 16:9의 비율에 맞춰, 가로 850 사이즈로 영상을 맞추고 싶을때 세로(높이) 크기를 구해보자. 가로가 850사이즈일때 16:9 비율 구하기 ( 원하는 너비 크기 × 9 ) ÷ 16 ＝ 높이값 (( 850 x 9 ) = 7650 ) ÷ 16 = 478.125 즉 가로(넓이) 850px 세로(높이) 478px 이렇게 높이를 구하고 영상을 넣어봤을때 화면을 옮기거나 축소를하면 ? 자동리사이징 안됨 정가운데가 아닌 이상한데 붙거나 화면이 이동해버린다.. 즉 모바일이나 여러 다른 환경의 브라우저에 노출될 경우 화면 박살★ 가변요소로 높이값을 지정하지않고 퍼센트로 항상 정중앙에 위치하도록 해보잣! 1. 유튜브가 들어.. 2022. 9. 21. html, css - 유튜브 동영상 넣기 여기 재생버튼을 누를시 유튜브 동영상이 팝업으로 뜰수 있도록 적용해보자 1. 유튜브에서 태그 가져오기 framenorder 속성은 비표준이므로 제거 단 이럴경우 자동재생이나 무한 재생이 적용되지않는다. 2. 자동재생 autoplay 유튜브 옵션은 url뒤에 파라메터(매개변수)를 붙인다. url?파라메터=값&파라메터=값 형식 3. 음소거 적용 mute 참고링크 https://stackoverflow.com/questions/35044594/youtube-how-to-present-embed-video-with-sound-muted 2022. 9. 21. CSS -transform: translate(-50%,-50%) 정렬공식 transform: translate(-50%,-50%) 정렬공식 컨텐츠의 요소가 항상 정 가운데로 가도록 지정 translate() 속성 translate (x, y) 함수의 요소를 왼쪽에서 부터 X거리 , 위쪽에서부터 Y 거리만큼 상대적으로 위치를 정하거나 이동 및 재배치 지정 translateX(수평만) 좌우(수평 방향)의 이동 거리 값을 지정 translateY(수직만) 함수는 상하(수직 방향)의 이동 거리 값을 지정 translateZ(z방향만) Z 방향의 거리로 이동을 지정 % 지정 불가 X (%사용해도 0) *주의할점 정렬공식을 사용했을때 이미지가 깨지는 현상이 있다. 모니터는 픽셀로 이루어져 있기때문에 %사용으로 픽셀에 맞지 않을 시 이미지가 깨져보임 기존 정렬공식 사용시 #header ... 2022. 9. 21. 크롬 hover 펼쳐볼때 개발자모드 open 삽입 상단 헤드의 전체메뉴를 펼쳐보고싶은데 마우스를 가져다 대야만 볼 수있다면? 구글 F12 개발자모드에서 ctrl+shift+c 로 해당 태그를 잡고 class 뒤에 open을 넣으면 한번에 펼쳐볼 수 있다. 2022. 9. 19. 크롬 개발자모드 F12 hover 찾을때 2022. 9. 19. CSS :nth-child(n) 가상선택자 nav 설정 nth-child 란? 부모의 n번째 자식 요소 선택을 말한다. 예제 고고 상단 헤더 메인메뉴(드롭박스)를 펼쳤을때 서브 메뉴(depth02) 나오게 하기 자 이렇게 BRAND 안에 하위 메뉴들이 나올 수 있도록 ul 태그안에 li를 셋팅해준다. HTML 삽입 미리보기할 수 없는 소스 BRAND OUTBACK STORY BEEF STORY STEAK ACADEMY OUTBACK CSR PRESS CENTER 그리고 css 로 넘어가서 상단 메인메뉴에 마우스를 가따대면 하위 메뉴가 나올수 있도록 hover 를 지정해준다. #header .gnb_wrap .gnb>li:hover .depth02_wrap { display: block; } 그다음 하위메뉴 를 nth 가상 자식선택자 로 지정해준다 (mragi.. 2022. 9. 18. 크롬 개발자모드 F12 오버태그 찾을때 헤더부분 로고와 메뉴를 보면 색이 다르게 들어갈 때가 있다. 메뉴 선택시 로고와 텍스트가 다 검정으로 변경 제이쿼리로 작업한 경우 코드를 찾기가 어렵다. 이때 코드를 보고 싶을때는? div class 부분뒤에 over을 넣어보면 바로 찾을수있다 2022. 9. 17. 비주얼 스튜디오 코드 한번에 여러줄 잡기 단축키 ctrl+alt 여러줄한번에 잡고 수정하기 2022. 9. 17. 제이쿼리 맛보기 $('.gnb').on('mouseenter', function() { $('#header').addClass('on'); }); 2번째 단어는 대문자 적용하기 Class 2022. 9. 16. 이전 1 ··· 14 15 16 17 18 19 20 다음
