Q. 질문 1시맨틱 태그를 사용하면 좋은 점을 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변 1시맨틱 태그란?시맨틱(semantic)이라는 단어의 뜻은 '의미의, 의미론적인` 이라는 뜻을 담고 있다.그렇다면 시맨틱 태그란 의미를 가지고 있는 태그라고 이해할 수 있다. 시맨틱 태그 (Semantic Tag)포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그 시맨틱 태그는 기존 HTML의 태그와 기능이 똑같다. 하지만 시맨틱 태그는 단순 태그가 아니라, 태그의 의미를 부여하여 웹사이트의 구조를 쉽게 파악할 수 있게 도와준다. 시맨틱 태그의 종류시맨틱 태그의 종류는 크게 다음과 같다. (이 외에도 다양한 종류가 있음)태그설명문서의 머리말, 상단 ex) 로고, 제목 등을 포함문서의 내..

시작하기 앞서 지난 게시물에서 입력 태그인 input에 대해 알아보았다. HTML input 태그(새 창 바로가기) 정보를 입력받을 때 사용되는 태그이지만 input 이 아닌 태그에 대해 알아볼 것이다. textarea 태그 input 태그를 보면 내용을 입력하는 부분이 한 줄이다. 그래서 만약 게시물처럼 긴 글을 입력하고 싶을 때에는 태그를 사용한다. textarea 태그 메시지를 입력하세요. 그러면 긴 텍스트를 입력하는 창이 생긴다. textarea - 크기 변경 만약 텍스트 창의 크기를 수정하고 싶으면 cols, rows 속성을 사용하여 각각 열(가로)과 행(세로) 수를 설정하여 크기를 수정한다. 그래서 가로는 30개 만큼 커졌고, 세로는 5개 만큼 커졌다. textarea - 입력 값 넣기 in..

HTML 입력 태그 HTML 에서 아이디나 비밀번호 등 정보를 입력해서 로그인 하거나, 게시물과 댓글 등을 작성하기 위해서 입력 태그인 태그 등을 사용해야 한다. HTML 입력 태그 구조 입력 태그를 사용하기 전 알아야 되는 4가지 태그가 있다. 태그 설명 속성 제출할 정보들을 담고 있는 태그 autocomplete (자동 완성 여부) - on, off 정보를 입력 받는 태그 type - 매우 다양함 태그의 라벨 for - input 태그의 id 와 연결 버튼 type - submit(제출), rest(초기화), button(기본) 사용 방법은 다음과 같다. 태그 안에 태그를 넣는다. 은 입력받는 태그로 이름을 입력받기 위해 text 형식을 속성으로 설정해준다. 은 태그의 라벨로 의 for 값과 의 id..

시작하며... 이번엔 HTML 태그 중에서 링크 태그인 에 대해 알아볼 것이다. HTML 링크 태그 a 태그 html에서 다른 페이지로 이동하는 링크는 태그를 사용하여 만들 수 있다. - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. 안의 콘텐츠는 링크 목적지 developer.mozilla.org a 태그 속성 - href, target 태그 속성에는 href 와 target 이 있다. href는 이동할 링크의 주소를 작성한다. 예를 들어 https://www.naver.com 와 같은 웹 사이트 주소이다. t..

시작하며... 이번엔 HTML 태그 중에서 이미지와 표 태그에 대해 알아볼 것이다. HTML 이미지 태그 img 태그 웹 상에 이미지를 넣기 위해 태그를 사용한다. img 태그 속성 - src, alt, title, width, height 태그의 속성 중에 많은 속성이 있는데 그 중 자주 사용되고 중요한 속성은 다음과 같다. src 필수 속성이며, 이미지의 경로를 넣는다. alt 대체 텍스트, 이미지가 보이지 않을 경우 대체 텍스트를 보여준다. title 이미지를 가져다 댔을 때 보임, alt의 대체제나 중복이 되어서는 안 됨 width, height 각각 넓이와 높이, px(픽셀) 단위로 길이 조절 img 이미지 태그 결과를 보면 왼쪽처럼 이미지가 나타나고 사진에다가 마우스를 가져다 댔을 때 titl..

시작하며... 이번엔 HTML 태그 중에서 나열과 관련된 태그에 대해 알아볼 것이다. HTML 목록 태그 li 목록 태그 태그는 목록들의 요소를 표현한다. list 의 약자로 또는 태그 안에 위치해야 한다. - HTML: Hypertext Markup Language | MDN HTML 요소는 목록의 항목을 나타냅니다. 반드시 정렬 목록(), 비정렬 목록(, 혹은 메뉴( (en-US)) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정 developer.mozilla.org ul 비정렬 목록 태그 태그는 unordered list 의 약자로 순서가 필요 없는 요소들을 나열할 때 사용된다. ul, li 태그 사과 오렌지 포도 샤인머스캣 거봉 청포도 요소 안에 하위 목록을 ..

시작하며... 이번엔 HTML 태그 중에서 인용에 관련된 blockquote, cite, q, mark, abbr 태그에 대해 알아볼 것이다. HTML 속성 태그를 설명하기 전에 HTML 속성에 대해 알아볼 것이다. HTML 속성은 무엇일까? 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값 즉 태그의 동작을 설정하고 제어하는 것이다. 예를 들어 처음 게시물에서 언어를 한국어로 바꿨을 때, 태그 안에 lang="en" 값을 lang="ko" 로 바꿨다. 이때 태그 안에 값을 넣어 설정하는 것이라고 할 수 있다. 자세한 설명은 아래 링크에서 확인가능하다. HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN HTML의 요..

시작하며... 나는 React도 할 수 있고, 프로젝트 경험도 있지만 매번 사용하는 HTML 태그만 사용하고, 비슷한 태그의 차이점과 내가 자주 사용하지 않는 것들에 대해 까먹고 있거나 모르는 것이 많다고 생각해서 다시 HTML 기초부터 공부해보기로 하였다. HTML 실습 준비 비주얼 스튜디오 먼저 가장 기본적인 비주얼 스튜디오를 설치한다. 그리고 내가 만든 html 파일을 웹상에서 새로고침 없이 볼 수 있도록, Live Server 라는 플러그인을 설치한다. 파일 생성 폴더를 생성하고 index.html 파일을 생성한다. 그리고 ! 를 입력하면 자동으로 HTML 기본틀이 생성된다. 웹 상에 나타나는 내용은 태그 라는 곳에 넣으면 된다. 그리고 언어를 기존 영어인 en 에서 한국어인 ko 로 수정해준다..