본문 바로가기

분류 전체보기

 (180)
8. HTML - 다른 곳으로 링크 태그 속성들 target 속성값 설명 비고 _self a+limit + Tab 가능 해당 브라우저에서 열기 _blank 새창에서 링크 열기 _parent _top p#target_${id: target_$}*N 입력된 Id로 스크롤 하여 바로가기 글 메일 바로 보내기 글 전화 바로 걸기 [VS Code] 구글로 가기 [웹 브라우저 출력] _self : 같은 브라우저에서 링크 열기 _blank : 새로운 브라우저에서 링크 열기 [Image에 링크 넣기] #1. a + link + Tab #2. 안에서 tartget + _blank + Tab #3. 사이에서 img + Tab [웹 브라우저 출력] : 연락처에 대한 정보 [VS Code] han2041126@gmail.com 010-1234-1234 [웹 브..
7. HTML - 표(테이블) 사용하기 태그 설명 비고 테이블 표 설명 or 제목 선택사항 테이블의 헤더 부분 앞에 와야함 테이블의 본문 본 내용을 담음 테이블의 제일 하단 뒤에 와야함, 제일 하단 가로줄을 나타냄 안에 가 들어감 caption+(thead>tr>th*8)+(tbody>tr*7>th+td*7) thead>tr>th*8 : 가로행(tr)에 헤더 8개 (요일, 월, 화, 수, 목, 금, 토, 일) tbody>tr*7(1-7교시)>th(헤더)+td(세로칸)*7 [VS Code] [웹 페이지 결과 화면] 표 내용 채우기 #1. : 표의 각 열의 최상단을 나타냄 -> 요일 일주일 공부 계획표 * 월요일 화요일 수요일 목요일 금요일 토요일 일요일 #2. : 표의 내용에 해당. 가로행 가로행의 제일 좌측을 나타냄 -> 교시 해당하는 가로 ..
6. HTML - 이미지 넣기 [이미지 태그의 속성] 속성 설명 비고 이미지 태그 img[] + Tab 가능 이미지 url + 아래 속성 입력 가능 src 이미지 원본파일 경로 절대 경로 또는 상대 경로 src 절대 경로 src="이미지 url 입력" src 상대 경로 src="./ 해당 폴더에 있는 이미지 파일 선택" alt 대체 텍스트, src 이미지 설명 이미지 파일 손상시 이를 설명하는 텍스트 원본파일 손상시 이를 설명하는 텍스트 title 툴팁 마우스로 이미지에 가져다 댔을 때 설명 alt를 넣지않거나, alt 내용과 중복은 안됨 width 너비 픽셀 단위의 정수 height 높이 픽셀 단위의 정수 #1. img[] + Tab : 자동 생성됨 #2. src 절대 경로 src="이미지 url" #3. src 상대 경로 src=..
5. HTML - 용어와 정의 나열 태그 설명 정의 목록의 시작과 끝 안에는 하나 이상의 와 가 위치한다. 정의되는 용어를 나타낸다. 는 요소에 의해 설명이나 정의를 제공받는다. 에 대한 설명이나 정의를 제공한다. [VS Code] 프로그래밍 컴퓨터 프로그래밍 작성하는 일 넓이 광 면접 일정한 평면에 걸쳐 있는 공간이나 범위의 크기 사과 사과나무의 열매 본인의 잘못을 인정하고 용서를 빔 [웹 브라우저 결과] [결론] 태그 설명 정의 목록의 시작과 끝 안에는 하나 이상의 와 가 위치한다. 정의되는 용어를 나타낸다. 는 요소에 의해 설명이나 정의를 제공받는다. 에 대한 설명이나 정의를 제공한다.
4. HTML - 목록 표시 태그 설명 + 순서가 상관없는 리스트 ul>li*N + Tab 가능 + 순서가 필요한 리스트 ol>li*N + Tab 가능 or 의 자식들에 사용 li*N + Tab 가능 #1. + : 순서가 상관 없는 리스트 인터뷰 면접 준비 자기소개 성격 장단점 장점 단점 프로젝트 설명 [웹 브라우저 화면] #2. + : 순서가 필요한 리스트 인터뷰 면접 준비 재료 준비 파를 기름에 볶기 밥 넣고 볶기 계란을 넣고 스크램블 간장을 넣고 마저 볶아 완성 [웹 브라우저 화면] 과는 다르게 일정 순서를 표시할 수 있으며, 숫자 혹은 문자로도 가능. 인터뷰 면접 준비 재료 준비 파를 기름에 볶기 밥 넣고 볶기 계란을 넣고 스크램블 간장을 넣고 마저 볶아 완성 [웹 브라우저 화면] #3. + + : 리스트 조합 인터뷰 면접 ..
3. 인용_속성/특성 Attribute (속성) 태그의 동작을 설정 및 제어, 태그마다 설정 가능한 속성이 있음. 태그 태그 설명 비고 : 표시 [웹 브라우저 출력] #2. : 긴 인용문에 사용 (들여쓰기) 인용문 관련 태그 blockquote와 cite 태그 HTML 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사..
2. 종류와 중요도에 따른 태그 1. 종류와 중요도 태그 현재 HTML5 는 CSS와 완전히 구분되어 있기 때문에 중요도에 따른 태그만 사용한다. 태그 종류 태그 설명 b 글자를 굵게 중요한 내용임을 명시 (굵게 표현 포함) // strong {내용} + tab 작성 가능 i 글자를 기울임 em 강조할 내용임을 명시 (기울기 포함) // em {내용} + tab 작성 가능 즉, 요즘은 b, i 같은 태그는 CSS로 대체하므로 사용하지 않는다. [VS Code] 경고! 이것은 매우 위험합니다. 나는 당근을 사랑합니다 나는 당근을 사랑합니다 나는 당근을 사랑합니다 나는 당근을 사랑합니다 [웹 페이지 결과] 2. 첨자 태그 태그 설명 비고 // sup{내용} + tab 가능 위 첨자 지수, 서수, 제곱 // sub{내용} + tab 가능 아..
1. VS Code + HTML 기본 문법 1. VS Code의 폴더를 설정 작업하기 희망하는 작업 경로 설정하기. 2. 파일 생성 작업할 파일 생성 1. index.html 파일 생성 웹상에서 www.웹사이트 주소/foler/ 에 해당하는 위치에 index.html, a.html, b.html 등의 파일이 있을 때 a.html, b.html과 같이 index.html이 아닌 이름의 파일로 작성된 페이지는 www.웹사이트 주소/folder/a.html 과 같이 끝에 정확한 파일명을 명시해야 하지만, index.html로 작성한 페이지는 www.웹사이트주소/folder/ 만으로도 진입 가능하다. 즉, index.html은 웹상 특정 폴더의 기본 페이지라고 생각하면 된다. 2. HTML 작성 #2-1. HTML 기본 틀 작성 모든 HTML 파일에는 ..

티스토리툴바