반응형 HTML21 34일차. HTML 이미지 삽입(img src) 그리고 링크삽입(a href) 오늘도 이어지는 HTML 수업이다. 오늘은 이미지 삽입과 관련된 태그, 그리고 링크 삽입하는 태그를 배웠다. 백코드 불여일견. 바로 이미지 삽입 코드의 문법을 알아보도록 하자. 이미지 삽입 테스트 img 태그는 종료 태그가 없다. 따라서 img src로 시작해서 마지막 닫아주는 괄호에 /만 붙여주면 된다. 안붙여줘도 작동은 한다. alt 는 이미지가 깨졌을시 대체해서 보여줄 문자열이다. title은 말 그대로 이미지 위에 마우스오버를 했을때 말풍선처럼 발생시킬 문구를 의미한다. 테스트삼아 저작권이 없는 이미지를 하나 다운로드 받아서 경로에 넣어주었다. 정상적으로 잘 출력이 된다. 이번엔 경로를 일부러 틀리게해서 사진이 나오지않도록 처리해보았다. 사진이 깨지면서 alt 부분에 입력해놓은 문구가 출력이 된다.. 2022. 12. 11. Visual Studio Code에서 유용한 Extensions 1. Live Server 제목 그대로 Live server를 열어준다. 웹브라우저로 열어주는데 HTML 코드 작성 및 수정시 저장하면 실시간으로 Live Server로 열은 웹페이지에서 반영이 된다. 새로고침이 필요없다. 실행방법은 설치 후에 HTML 문서 내에서 마우스 우클릭 -> Open with Live server를 클릭하면 된다 2. indent-rainbow Visual Studio Code의 기본 들여쓰기 표현식은 너무 잘 보이지않는다. 이것을 빨주노초파남보 색상으로 구별해주어 가독성을 높여준다. 설치와 동시에 적용되며 적용후 모습은 아래와 같다. 들여쓰기 한 부분이 색상으로 표시되어 좀더 보기 좋아졌다. 3. Auto Rename Tag 이게 정말 좋은거같다. HTML는 시작태그와 끝태그.. 2022. 12. 10. 33일차. HTML 그리고 Visual Studio Code 설치 오늘은 HTML에 대해서 이야기 할까 한다. HTML이란? Hyper Text Markup Languege의 약자이다. 웹페이지를 만드는 언어이고, 지금도 많이 쓰이는 언어이다. HTML은 와 요소(Elements)로 이루어져있고, 미리 정의되어있는 태그를 사용하여 사용자가 보고있는 웹페이지를 만드는 언어라고 이해하면 될듯하다. 지금도 이 글을 보고있는 당신이라면, 지금 이 화면에서 바로 F12를 눌러보자. 필자는 Edge Brower를 사용중인데 F12를 누르면 이렇게 뜬다. 이게 바로 HTML이다. HTML의 기본 문법을 알아보도록하자. 알아보기전에 먼저 HTML 수업 환경을 Visual Studio Code로 진행하고 있으니 먼저 Visual Studio Code를 설치하러 가보자 Visual St.. 2022. 12. 9. HTML / CSS 유효성 검사 사이트 https://validator.w3.org/unicorn/ HTML 유효성 검사 사이트 Unicorn Nu Html Checker is now the default, for markup other than HTML5 you may use the legacy Markup Validator through custom task settings. validator.w3.org https://css-validator.kldp.org/validator.html.en The W3C CSS Validation Service css-validator.kldp.org CSS 유효성 검사 사이트 2022. 12. 6. 이전 1 2 3 4 5 6 다음 반응형
