웹페이지에서 이미지를 보여주려면 img 태그를 사용하면 된다. img 태그에는 아래와 같은 속성들을 설정할 수 있다. 속성이름 (attribute name) 속성값 (attribute value) src 이미지 파일의 경로 a 태그의 href 처럼 절대경로와 상대경로 지정 가능 alt 이미지 파일이 설정한 경로에 존재하지 않거나 이미지가 깨진 경우 보여줄 문구 width 이미지 너비 height 이미지 높이 앞서 앵커 태그에서 만든 프로젝트에서부터 설명을 시작한다. https://github.com/sssssqew/html-css-class GitHub - sssssqew/html-css-class: html css 수업에서 anchor tag 이후 수업부분 html css 수업에서 anchor tag ..

HTML 문서에서 자주 쓰이고 중요한 태그가 앵커(anchor) 태그이다. 앵커 태그는 로 작성하고 현재 페이지에서 이동하려고 하는 페이지의 링크를 지정한다. 링크는 a 태그의 href 속성값으로 지정하면 된다. href 는 hypertext reference 의 약자로 링크의 참조를 말한다. 즉, 현재 페이지에서 어느 경로로 이동할지 페이지 경로를 설정한다. 설정하는 경로는 크게 절대경로와 상대경로가 있다. 절대경로 절대경로에는 두가지 종류가 있다. 현재 웹사이트에서 외부 사이트로 이동하는 경우와 현재 웹사이트 내부에서 페이지를 이동하는 경우이다. 절대경로 - 외부사이트로 이동하는 경우 Anchor Tags 구글 네이버 a 태그의 href 속성으로 구글과 네이버의 사이트 주소를 절대경로로 설정한다. 시..

오래전에는 웹페이지의 큼직큼직한 레이아웃을 구성할때 테이블 태그를 사용하였다. 현재는 시맨틱 태그나 div 태그로 레이아웃을 적용한다. 테이블 태그는 말그대로 일정표, 달력, 차트 등에 사용한다. 게시판이나 복잡한 폼 양식의 레이아웃을 구현하는데도 사용이 될 수 있다. 구분 제목1 제목2 제목3 1 데이터 11 데이터 12 데이터 13 2 데이터 21 데이터 22 데이터 23 3 데이터 31 데이터 32 데이터 33 4 데이터 41 데이터 42 데이터 43 합계 총합 1 총합 2 총합 3 테이블 태그를 이용하여 위와 같은 표를 작성해보자! 단계별로 조금씩 작성한다. 테이블 태그 우선 표를 생성하는 table 태그를 사용하여 기본 뼈대 코드를 작성한다. 테이블 태그 첫번째 행은 표의 헤더영역에 해당하므로 ..

HTML 에서 가장 많이 사용하는 태그는 리스트나 목록을 표현하는 태그이다. 네이버에 접속하여 개발자 도구를 확인해보자! Elements 탭에서 Ctrl + F 를 누르면 네이버 웹페이지에서 태그를 검색할 수 있다. shortcut_list 라고 검색하면 아래와 같이 리스트 태그들이 사용된 모습을 확인할 수 있다. 네이버의 서비스 카테고리를 보여주기 위하여 ul, li 라는 리스트 태그를 사용하고 있다. 비순차 목록 (Unordered List) - ul 태그 비순차 목록은 순서가 없는 리스트나 목록을 의미한다. ul 태그로 목록 전체를 감싸주고 목록 하나 하나는 li 태그로 작성한다. 목록 태그 Unordered List List item List item List item List item 위와 같이..

큼직큼직한 구분은 시맨틱 태그를 사용하면 되므로 지금부터는 내부에 들어가는 컨텐츠에 사용되는 세부적인 태그들을 알아보자! 제목 (heading) heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 웹페이지에서 가장 중요하다고 생각되는 제목은 h1 태그로 작성한다. 그 다음으로 중요하다고 생각되는 제목은 h2 태그로 작성하고, 중요도에 따라 h1~h6 태그를 선택해서 사용하면 된다. 주의할 점은 제목의 크기에 따라 중요도가 결정되는 것이 아니라 태그에 따라 중요도를 선택해야 한다. 제목의 크기는 CSS 스타일에 따라 h3 가 h1보다 더 큰 경우가 있을수 있기 때문이다. 개발자 도구에서 제목(h1~h6) 태그의 스타일을 확인해보면 기본적으로 상하 여백..

https://coding-factory.tistory.com/883 [Html] 시맨틱 태그(Semeantic Tag)란 무엇인가? 시맨틱 태그란? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하시면 이해 coding-factory.tistory.com 4장에서 각 div 요소에 id 값을 부여하면 같은 div 요소라도 사람은 무슨 역할을 하는 div 요소인지 구분할 수 있다. 하지만 검색엔진은 id 의 의미를 이해하지 못하기 때문에 각 div 요소가 무슨 역할을 하는지 파악하지 못한다. 그렇게 되면 검색엔진은 다른 웹사이트보다 내용이 충실하지 못하다고 판단하여 검색결과 페이지에..

네이버사이트를 개발자 도구에서 확인해보면 헤더 부분의 검색창과 메뉴들을 화면에 보여주기 위하여 수많은 태그들이 사용된 것을 확인할 수 있다. 그 중에서 헤더부분 전체를 그룹화하고 있는 태그는 div 요소라는 것을 확인할 수 있다. 간단한 웹페이지 레이아웃 구현하기 브라우저의 좌우에는 빈공간이 있고 중앙에는 전체 엘리먼트를 모두 묶어줄 div 요소가 필요하다. 중앙에 위치한 전체 div 요소 안에는 크게 세 부분으로 나뉘어진다. 상단에 위치한 헤더영역, 중앙에 위치한 컨텐츠영역, 하단에 위치한 푸터영역으로 구분할 수 있다. 각 영역 안에는 수많은 요소들이 들어갈 것이고 이를 그룹화하기 위한 3개의 div 요소가 필요하다. Logo Menu 상단의 헤더영역은 다시 크게 두 부분으로 나눌수 있다. 로고가 위치..

내용강조 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 b 태그는 볼드체(굵은 글씨체)로 꾸며주고 i 태그는 이탤릭체로 보이게 해준다. 하지만 강조의 의미는 없다. 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 문단중 일부를 강조하고자 할 때 사용하는 태그들 strong, em 태그도 b, i 태그와 화면에서는 동일하게 보이지만 실제로 강조의 의미를 전달하는 태그이다. 강조의 의미가 있다는 것은 해당 페이지가 검색엔진에 검색될 확률이 높다는 것이다. 검색엔진에 노출이 잘 되는 웹사이트를 만드려면 태그의 쓰임새에 맞도록 작성하는 것이 좋다. 약어 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 문단중 일부를 강조하고자 할 때 사용하는 태그들 H..

블록 레벨 요소 블록 레벨 요소는 기본적으로 브라우저 화면의 가로 한 블록을 모두 차지하는 요소이다. 블록 레벨 요소는 아래에 나열하고 있으며 외울 필요는 없다. 자주 사용되는 블록 레벨 요소는 h1, h2, h3, h4, h5, h6, header, section, article, aside, audio, canvas, div, footer, form, hr, ol, p, section, table, ul, video 등이 있다. h1, h2, h3, h4, h5, h6, header, section, address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, hr, ..

웹 언어의 구분 웹페이지는 크게 프론트엔드 영역과 백엔드 영역으로 구분된다. 사용자가 보는 화면(뷰)은 프론트엔드 영역이고, 서버와 데이터베이스를 연동하여 로그인, 회원가입, 검색 등의 기능을 구현하는 부분은 백엔드 영역이다. 프론트엔드에서 사용되는 언어는 HTML, CSS, javascript 이다. 그밖에 이를 조합하여 웹개발을 빠르고 쉽게 구현할 수 있도록 도와주는 프레임워크가 있다. 예를 들어 웹디자인을 쉽게 구현하도록 도와주는 Bootstrap, Material UI 등과 요즘 자주 사용되는 React, Vue.js 등이 있다. 백엔드에서 자주 사용되는 언어는 자바, Javascript, Python, PHP 등이 있다. HTML 은 웹사이트의 내용을 작성한다. 예를 들어 메뉴나 로그인 폼과 같..