웹/HTML
-
[VScode] emmet 이용해서 빠르게 html 태그 작성하기웹/HTML 2023. 1. 6. 09:54
약어 구문 Emmet은 생성된 트리 내 요소의 위치와 요소의 속성을 설명하기 위해 CSS 선택기와 유사한 구문을 사용합니다. 집단 div또는 같은 요소 이름을 사용 하여 HTML 태그 p를 생성 할 수 있습니다. divEmmet에는 미리 정의된 사용 가능한 태그 이름 세트가 없으므로 → , foo→ 등 의 단어를 작성하여 태그로 변환할 수 있습니다 . 중첩 연산자 중첩 연산자는 생성된 트리 내부에 약어 요소를 배치하는 데 사용됩니다(컨텍스트 요소 내부 또는 근처에 배치해야 하는지 여부). 어린이:> >연산자를 사용하여 요소를 서로 중첩 할 수 있습니다 . div>ul>li ...생산할 예정 형제자매:+ 연산자를 사용 +하여 동일한 수준에서 요소를 서로 가까이에 배치합니다. div+p+bq ... 출력합니..
-
[HTML] img, table웹/HTML 2023. 1. 6. 09:25
img : html 문서에 이미지를 넣습니다. - 속성) src 원본파일 경로 절대경로 또는 상대경로 alt 대체 텍스트 스크린 리더, 원본파일 무효시(텍스트 설명이며 필수X) title 툴팁 alt의 대체제나 반복이 되어서는 안됨 width 너비 픽셀 단위의 정수 height 높이 픽셀 단위의 정수 table : html 문서에 이미지를 넣습니다. - 속성) 태그설명비고 테이블 표 설명 또는 제목 선택사항 테이블의 행 테이블의 데이터 셀 테이블의 헤더 부분 앞에 와야 함 테이블의 본문 본 내용을 담음 테이블의 푸터 부분 뒤에 와야 함 열 또는 행의 헤더 scope 속성으로 row, col 중 선택 colspan 열 병합 rowspan 행 병합 표에 열을 묶어서 속성 부여 보다 뒤, 그 외 요소보다 앞에..
-
[HTML] 태그 (기본 ,강조, 첨자, 취소, 인용)웹/HTML 2023. 1. 6. 02:50
1. 기본 태그 - h1~6, p, br, span, div 등등 - 모르는 태그는 mdn 사이트 검색하기 예시 : br mdn 사이트 : 줄바꿈 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다. developer.mozilla.org 2. 강조 태그 HTML 태그는 정보의 종류를 구분하는데만 사용합니다. (오늘날 스타일 정보는 CSS로 분리) 태그설명비고 b 글자를 굵게 (구버전 HTML) 👉 사용 일람 보기 strong 중요한 내용임을 명시 warning i 글자를 기울임 (구버전 HTML) 👉 사용 일람 보기 em 강조할 내용임을 명시 3. 첨..
-
[HTML] 기본 VS Code 실습 환경 구축웹/HTML 2023. 1. 6. 02:10
필자는 제대로 파는 HTML & CSS - 웹 퍼블리싱 끝.장.내.기로 강의로 HTML 복습을 시작했다. 학교 수업에서 듣긴 했지만 가물가물하기도 하고 기초부터 제대로 학습하고 싶은 생각이 들어서였다. 현재 포스팅하고 있는 내용은 lesson 3 내용이며, 본격적인 html 시작 전 세팅설정에 대해서 알려준다. 탭 사이즈 && 자동 줄바꿈 설정 VS Code 설정 창 열기 윈도우: Ctrl + , 맥: Command + , Tab Size 항목 2로 설정 Word Wrap 항목 on으로 설정 플러그인 설치 플러그인설명비고 Korean Language Pack 에디터 한글화 Material Icon Theme 탐색기 아이콘 테마 One Dark Pro 에디터 색 테마 Live Server 새로고침 없이 코..
-
HTML의 구성요소 - tag(태그)와 attribute(속성)웹/HTML 2022. 8. 28. 17:58
이번엔 HTML의 태그와 속성에 대해 알아보고자 합니다. HTML 요소 태그 명령어의 종류를 뜻합니다. 시작태그와 종료태그로 이루어진 모든 명령어를 말합니다. HTML 태그 요소의 하나로 시작태그와 종료태그로 이루어져 있습니다. 주요 태그는 아래와 같습니다. 텍스트 관련 태그 : 두껍게(bold) 효과를 준다. : 텍스트를 기울임꼴(italic)로 표시한다. : 포함된 텍스트를 강하게 강조할 때 사용한다. : 보다 약한 강조를 나타낼 때 사용한다. 목록 관련 태그 : 순서 없는 목록(unordered list)을 표시한다. : 목록에서 각 항목(list item)은 와 사이에 넣는다. : 순서 있는 목록(ordered list)을 표시한다. 링크,이미지 관련 태그 : 하이퍼링크를 생성하는 태그이다 : 페..
-
HTML 구조웹/HTML 2022. 8. 28. 17:39
HTML의 구조는 head와 body로 구성되어 있습니다. 기본 구조 HTML의 문서 초입부에 를 적고 로 시작됩니다. 태그가 시작되었으면 태그가 끝나는 부분에 을 적어야 합니다. 사이 와 태그가 들어갑니다. 대문자, 소문자 모두 상관 없지만 가시성을 위해 편의상 소문자를 주로 사용합니다. 웹 브라우저가 알아야 하는 정보를 적어줍니다. 같은 페이지나, CSS의 링크를 적어줍니다. 파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함합니다. 화면에 출력되야 하는 정보를 적어줍니다. 주요 정보를 사용자에게 알기 쉽게 여러 태그를 이용합니다. 로 구역을 나누거나 을 사용하는 경우가 많습니다.
-
HTML 학습 유튜브 추천웹/HTML 2022. 8. 28. 16:41
안녕하세요~ HTML은 웹 언어를 배울 때 가장 먼저 시작하는 언어입니다. 가장 쉽고 간단한 문법을 가진 언어입니다. HTML을 빠르고 핵심적인 부분만 배울 수 있는 유튜브를 소개하겠습니다. https://www.youtube.com/playlist?list=PLuHgQVnccGMDUzDDCKW-pCZQY-MMCX5yB HTML www.youtube.com 뭐니뭐니 해도 생활코딩 유투버의 강의가 좋은 것 같아요. 총 44개의 강의로 구성되어 있습니다. 한 강의당 평균 10분이니까 하루에 몰아서 보시는 것을 추천드립니다.