개발/HTML (6) 썸네일형 리스트형 [HTML] 정의목록태그를 사용해보자 <dl> <dt> <dd> 태그 정의목록태그이번시간에는 정의목록태그에 대해 알아보도록 하겠다~ 이전번에 올린 태그는 기본목록태그( tag ) 이고 이번에는 정의( tag)이다. 두가지의 차이는 단순한 목록의 나열과 , 특정 용어의 정의를 나타내는 목록을 나타내는것의 차이이다.솔직히 두개의 차이를 알기힘드니 사용하기 편한걸 사용하자 정의목록 태그의 사용예는 다음과같다. 위와같이 용어와 용어의 설명을 필요로 할때 사용한다. 태그의 종류는 3가지이다. 태그명 태그설명 definition list 정의목록 definition term 정의용어 definition description 정의설명 앞의 목록태그와 비슷하니 간단한 코드와 코드결과를 보고 넘어가겠다. 코드 definition (특히 사전에 나오는 단어나 구의) 정의 (어떤 개념의) 의.. [HTML] 기본목록태그를 사용해보자 <ui> <ol> <li> 태그 목록태그이번시간에는 목록태그에 대해 알아보도록 하겠다~목록태그는 웹에서 굉장히 많이 사용되는 태그로 메뉴를 만들때도 사용된다.목록을 만들고 그 목록의 글자만 남겨서 모양을 내면 그것이 메뉴가 된다.예를들어보면 위 사진과 같이 어떠한 대분류 안에 소분류로 메뉴가 들어가게 만든것도 목록태그의 예라고 볼수있다. ol tag ol 태그는 order list 의 약자로 순서가 있는 태그이다.즉 ol태그로 감싼 내용은 번호가 생긴다. 사용법은 아래와 같다. ol tag Naver Daum Tistory 위 코드를 보면 태그안에 태그가 들어가는데 li 는 해당목록 list 를 나타낸다 결과를 확인해보자. 위와같이 1,2,3, 순서있는 목록이 생겻다. ul tag ul 태그는 unorder list 의 약자로 순서가 .. [HTML] <a>태그를 사용해보자 HTML-8 태그 a태그 (Anchor tag) 는 HTML 에서 굉장히 중요하고 많이사용되는 하이퍼텍스트입니다. 즉 사용자의 선택에 따라 특정한 정보와 관련된 부분으로 이동할수 있게 조직화된 문서를 의미합니다. 주로 다른 웹페이지로 이동할때 쓰이거나 아니면 문서안에 특정 위치로 이동할때 사용한다. 사용방법은 다음과 같다. 네이버 w3schools 버물리의IT공부 위와같이 태그를 사용하면 특정 URL 페이지로 이동이가능하며 만약 태그 새창 띄우기 를 하고 싶으시다면 네이버 w3schools 버물리의IT공부 위와 같이 사용하면 target="_blank" 를 사용하면 새텝에 페이지가 열리는 것을 확인할수있습니다. 또다른 사용법으로는 문서내에 특정위치로 이동할대 사용할수있는데 Move to Alpha Mov.. HTML 텍스트 관련 요소의 사용 <abbr> <address> <strong> <sub> HTML-5 태그 태그는 abbreviation(약어) 태그이며약어인 단어를 툴팁으로 표시할수있습니다.사용법은 홍남기 미래창조과학부 1차관은 "오늘날 한국은 국내총생산(GDP) 대비 연구개발(R&D) 투자 1위, 블룸버그 혁신 역량 1위 국가가 됐다"며 "하지만 핑크빛 통계 수치에 안주할 겨를이 없이 저성장이 '뉴노멀'로 자리 잡고 최근 브렉시트까지 겹쳐 세계 경제가 출렁이고 있다"고 말했다. 위와같이 태그로 약어를 감싼뒤 title 속성에 약어의 뜻을 쓰게되면툴팁으로 뜻이 나타나게 됩니다. HTML-6 태그 는 태그 주소를 표시할때 사용하는 태그입니다. css 를 사용해서 표현할수도있지만 html 에서는 좀더 간편하게 태그를 표현하기위해서 address 라는 태그를 만들었습니다.사용법은 Address:.. HTML 제목서식과 문단편집 <h>, <p>, <br> HTML-2 태그 태그는 제목을 표시하는 태그로 알아두시는게 좋을것같습니다. ~ 까지 있는데 h1이 제일 큰 폰트이며 h6가 제일작은 폰트입니다.사용하는 방법은 제목 서식 문단 편집에 관련된 요소 알아보기 h 요소 위와 같이 작성하면 현재문서의 제목이 "제목 서식 문단 편집에 관련된 요소 알아보기" 로 표시되고부제목이 "h 요소" 라고 표시되는것을 확인할수 있습니다. HTML-3 태그 태그는 문단을 구성하는 태그입니다.사용방법은 문단을 구성합니다 위와 같이 작성하며 웹브라우저에서 출력시 상하로 약간의 공백이 생기는것을 확인할수 있습니다. HTML-4 태그 태그는 줄바꿈 태그입니다. html 로 텍스트를 작성시 분명히 enter키를 눌러서 줄을 바꿧는데 웹브라우저에서는 줄이 바꿔지지 않는다는것을 확인할수 .. HTML image 를 불러오는 <img>태그 HTML-1 태그 img 태그는 html 중에 많이사용하는 태그중 하나입니다. 태그로 감싸 이미지를 눌렀을때 다른 링크로 이동하거나 아님 화면에 이미지를 출력할때 주로 사용하게 됩니다. 위코드는 태그를 사용하여 사진을 불러오고있습니다. 그런데 보통 html 태그는 로 이루어져있는데 태그는 조금다르게 보입니다. 이는 태그와 태그와 같이 무언가 내용을 감싸지않는 태그일경우 위와같이 사용합니다. 속성에는 기본적으로는 src 와 alt 가 있는데 src 는 source 즉 이미지가 들어가있는 경로 및 파일명을 적어주면 됩니다. 많은 초보분들이 경로에서 많이 해매는걸 봤는데 경로의 출발은 현재 html 파일이 있는곳부터 시작한다고 생각하면됩니다. 즉 위에 경로는 현재 작성하고 있는 html 파일과 동일한 경로에 .. 이전 1 다음
