Language/HTML8 <img>와 background-image 속성 /Semantic Web, Semantic Tags 태그를 이용하는 방법과 background-image 속성을 이용하는 방법의 차이점 둘다 시각적으로는 같은 효과를 낼 수 있지만, 사용하는 목적이 조금 다르다. 크게 웹접근성과 업무 효율성 측면에서 구분해 사용될 수 있다. 태그를 이용하는 방법 1. 해당하는 이미지가 구체적인 정보를 담고 있을 때 이미지가 정보 전달을 목적으로 사용되는 경우 태그의 alt 속성을 이용해 웹접근성을 높일 수 있다. 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다. alt 속성은 사용자가 느린 네트워크 환경, src 속성값의 오류, 시각 장애인용 스크린 리더 사용 등으로 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다. 그렇기 때문에 태그를 이용해 background.. 2023. 3. 8. HTML5 / select 태그 / option 태그 / textarea 태그 / button 태그 다양한 태그를 활용하여 상품주문서 폼 만들기,태그 활용하여 드롭다운 목록 만들기, 태그 태그 태그주문서 작성할 때 예시 화면이랑 수량 입력란의 길이가 달라서 스타일 오류인줄 알고 몇번이나 체크하였으나 스타일 오류가 아니었다. 처음부터 끝까지 체크해보니, 수량 입력란의에서 max 부분에 오타가 있었다. 최대 수량이 적용되지않아서 입력란이 크게 보이는 것이었다. 오탈자 항상 체크하자.Q : 태그 와 태그의 차이는?A: 태그는 오직 하나의 옵션만을 선택할 수 있는 form input type이다. 태그는 list에서 주어지는 어떤 옵션이든 선택이 가능하다. 자체에 input을 넣어서 옵션을 추가할 수 있다. 하지만 는 안된다. form input type가 아니다.참고 문헌 사이트 :https://www.. 2022. 4. 10. HTML5 / input 태그 / input type 종류 input 태그input type의 종류 코드 를 이용하면 코드를 텍스트로 보이게 할 수 있다.checkbox와 radio button의 차이점 : 복수선택이 가능한지 여부. checkbox만 복수 선택 가능. Q: range 모양 변형하는 방법 A: 브라우저별로 기본 스타일이 있어서 다르게 보인다.기본에 설정되어있는 브라우저 스타일 속성을 없애고 css에서 수정한다. input[type=range] {-webkit-appearance: none;margin: 18px 0;width: 100%;}input[type=range]:focus {outline: none;}이런식으로 세부적인 부분들을 수정할 수 있으나 브라우저마다 다르기 때문에 각각 만들거나 통합된 코드를 입력해야한다. https://css-.. 2022. 4. 10. HTML5 / form 태그 / label태그 / fieldset 태그와 legend 태그 폼 만들기form 태그label 태그fieldset 태그와 legend 태그 form에서 autocomplete 속성을 이용해 자동 완성 기능을 동작하게 할 수 있다. radio button,check box를 input type="radio/checkbox" 로 만들 수 있고, 이를 label을 연결하면 텍스트를 클릭해도 선택이 되어 사용성 측면에서 편리하다.list 만들 때 style="list-style:none로 리스트 앞에 bullet이 나타나지 않게 할 수 있다.form에서 input type="password"로 할 경우 입력하는 텍스트가 ...으로 보인다.Q: 한 문서에서 폼이 여러개인 경우 각각 다른 스타일을 적용하고자 할 때 편리하게 할 수 있는 방법은? head에서 style로 작성할.. 2022. 4. 9. HTML5 anchor/ image map anchor 만들기이미지 맵 만들기SVG image image map 만들 때 이미지 주소로도 생성이 가능하다.image map에서 area shape가 circle일 경우 coords는 좌표값과 반지름크기로 지정한다. Q: 이미지맵 좌표 쉽게 알아내는 방법(그림판 이용하는 방법 말고) A: 그림판이 제일 쉬운 방법.. 프로그램을 이용하는 방법도 있지만 이게 제일 간편하다.anchor 만들기id 속성을 이용해 이동할 위치 지정 후, 태그와 href 속성을 사용 anchor로 연결할 링크 만들기.도착 표시될 텍스트/이미지 출발 표시될 텍스트/이미지 출발에서 클릭하면 도착으로 이동텍스트 태그목록 태그표 생성이미지와 하이퍼링크 태그이미지 맵 만들기map태그 area태그, usemap 속성을 이용해 이미.. 2022. 4. 8. HTML5 하이퍼 링크/ 이미지 링크/ 텍스트 링크 하이퍼 링크이미지 링크텍스트 링크background-color 변경 할 때 html color codes에서 가져올 때 #을 꼭 앞에 붙여야한다. (#FEFCAC)images폴더에서 이미지 가져올 때 같은 레벨에 있는 폴더에서는 상위폴더를 찍고 와야한다.이때는 '..'으로 표시한다. ex) Q:표 안의 텍스트 정렬하는 방법 A: 말고 ,,,에도 적용 가능. Q:이미지 옆으로 텍스트가 오도록 정렬하는 방법 A:더보기로 위치 지정. 를 정렬하고자 하는 텍스트 밑에 태그해서 범위를 지정. 안 붙였더니 그 뒤에 다른 텍스트들까지 전부 정렬되어버림.+ 추가 : 짧은 단어 같은 경우는 태그를 이용하면 inline속성으로 자연스럽게 옆으로 정렬된다.가장 간단한 방법은 {float:left} 혹은 {float:ri.. 2022. 4. 6. HTML5 표 태그 / caption/summary/rowspan/colgroup html을 이용해서 표 만들기 응용 (요즘은 table 사용빈도가 많이 낮다고 합니다. 참고하세요.) caption 표 제목과 설명을 표 상단에 표시 table 안에 위치 브라우저 제조업체 사이트 크롬 google www.google.com 파이어폭스 mozilla www.mozilla.org 엣지 microsoft www.microsoft.com figcaption table 밖에서 figure와 함께 쓰이며 중앙정렬 아님 브라우저 제조업체 사이트 크롬 google www.google.com 파이어폭스 mozilla www.mozilla.org 엣지 microsoft www.microsoft.com aria-describedby="summary"를 table 안에 태그해서 표에 문장 연결 가능 capt.. 2022. 4. 6. HTML5 텍스트 태그/ 목록 태그/ 표 태그 텍스트 태그 strong : 내용을 강조할 때 b :단순히 굵게 표시할 때 강조할 내용 강조할 내용 em : 내용을 강조할 때 i : 단순 기울림 강조할 내용 강조할 내용 abbr : 약자 표시 IoT title 속성을 함께 사용할 수 있음. title의 내용이 마우스 커서를 대면 표시됨 약자 cite : 웹문서나 포스트에서 참고 내용 표시 예) 'https://developers.google.com/search/docs/beginner/get-started?hl=ko' 'https://developers.google.com/search/docs/beginner/get-started?hl=ko' kbd : 키보드 입력이나 음성 명령 같은 사용자 입력 내용 예) "F5키를 누릅니다." 음성명령 내용 sma.. 2022. 4. 5. 이전 1 다음
