프로그램 공부/HTML (12) 썸네일형 리스트형 HTML 표 관련 태그 → 표만들기 → 행 제목 → 행의 제목 셀 내용 → 열 내용 내용 : 셀 구분이 가능하도록 선을 추가 , : 여러 열을 하나로 합치는 것 colspan="2" , : 여러 행을 하나로 합치는 것 rowspan="2" - 표에 제목 붙이기 표 제목 또는 내용 → 중앙정렬 ~ 표 제목 또는 내용 → 왼쪽 정렬 ~ figcaption은 표 앞이나 뒤에 붙일 수 있음 -표 구조 정의하기 thead, tbody, tfoot → 표의 제목부분 구분 구분 ~ → 표의 내용부분 구분 구분 ~ → 표의 요약부분 구분 (ex. 합계) 구분 ~ -여러 열 묶어 스타일 지정하기 → 열 개수를 맞추기위해 추가한 태그 → 열과 스타일 지정 → 숫자가 없으면 기본으로 하나의 열 ↓ 파란색 파란색 노란색 파란색 파란색 노란색 HTML 텍스트 관련 태그 - : 제목 표시하기 1~6까지의 숫자가 있으며 숫자가 커질수록 글자크기는 작아진다. - : 단락 만들기 앞뒤 줄바꿈이 있는 단락을 만든다. - : 줄바꿈 - : 수평줄 넣기 위와 같은 수평 줄을 넣어준다. - : 인용문 넣기 단락이 들여쓰기로 되어진다. - : 입력하는 그대로 화면에 표시 예를 들어 코드에서 공백이 그대로 브라우저에 표시되게 만들어준다. [tab]키를 4번 눌렀다면 웹 화면에서도 [tab]키가 4번 눌린 모습으로 나온다. 하지만 웹 문서를 소리나 점자로 읽어주는 기계는 가 적용된 부분은 그냥 건너뛰기도 하니 고려해야한다. - : 중요한 내용이어서 강조하기 (중요도를 높이고 싶을때는 여러번 겹쳐쓰기도 한다.) : 그냥 글자 굵게 만들기 - : 이탤릭체(글자기울기)로 표시 : 이탤릭체로 강.. 생활코딩 따라하기 10. 웹서버와 웹브라우저의 통신 (Window) -웹서버의 주소 (IP주소) 알아내기 제어판을 통해 네트워크 및 공유센터로 들어가 이더넷이라는 부분을 클릭해줍니다. 이더넷 창이 열리면 위의 자세히 버튼을 누르면 세부정보가 뜨는데 거기서 IPv4 주소 부분을 확인하면 됩니다. -연결하기 먼저 웹서버를 공유할 기기(컴퓨터, 스마트폰 등)가 같은 공유기에 있어야지만 가능하다고 합니다. (ex. 무선일 경우 같은 와이파이가 잡혀야함) https://www.youtube.com/watch?v=gde0uNwMSa4&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=22 생활코딩 따라하기 09. 웹서버와 http - Bitnami 웹서버 사이트 주소는 http://127.0.0.1/index.html입니다. (https라고 치면 보안문제가 나오기 때문에 주의해야합니다.) 여기서 index.html이란 어떤 파일을 현재 출력하고 있는거라고 합니다. 그러면 Bitnami가 설치된 파일에 들어가서 (ex. C:\Bitnami\wampstack-7.4.9-0) appache가 설치되어 있는 디렉토리에 들어갑니다. 그런다음 hrdocs에 들어가면 index라고 써져있는 웹 페이지가 있습니다. 그러면 이제 이 부분에다가 작업했던 파일들을 덮어 쓰기 해주면 됩니다. 그러면 이제 이전에 만들었던 웹페이지로 열리게 됩니다. youtu.be/had7IqJHEKM 생활코딩 따라하기 08.웹서버 설치 (Window, Apache) 1.[ how to install apache windows ] 라고 검색하면 아파치 사이트에서 윈도우용 아파치를 설치하는 방법이 나옵니다. https://httpd.apache.org/docs/2.4/en/platform/windows.html Using Apache HTTP Server on Microsoft Windows - Apache HTTP Server Version 2.4 Using Apache HTTP Server on Microsoft Windows This document explains how to install, configure and run Apache 2.4 under Microsoft Windows. If you have questions after reviewing the .. 생활코딩 따라하기 07. 웹 호스팅, 깃허브 사용 1. 깃허브(Github) 로그인합니다. 2. 새로운 저장소(Repository) 제작합니다. 3. 해당 저장소에 제작할 웹의 소스들을 업로드합니다. 4. 깃허브 상단의 Settings에 들어가 설정을 변경합니다. 상단의 Sttings에 들어가면 많은 내용이 있습니다. 거기서 GitHub Pages의 Source부분있는 None부분을 Master로 바꿔준 후 Save를 눌러주면 하단의 사진과 같이 바뀌게 됩니다. 상단의 사진에서 파란 상자부분의 웹주소를 클릭하면 자신이 만든 웹사이트를 연결 할 수 있습니다. https://www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb WEB1- HTML & Internet www.youtube.com 생활코딩 따라하기 06. 문서의 구조와 링크 html 설명서 : html specification 1. : 웹 페이지의 제목을 바꿔주는 태그 2. : 에디터의 인코딩과 웹페이지의 인코딩이 다르면 한글 같은 경우 깨지기도 하기에 인코딩 언어를 서로 같이 맞춰주는 것. 3. : 본문을 묶기위한 태그 ex) ol, li, h1, p, br, img 등등 4. : 본문을 설명하는 내용을 묶는 태그 ex) title, meta 등등 ==> html에 있는 모든 태그는 태그와 태그로 묶어야한다 = 하나의 약속 5. : 와 를 감싸는 고위 태그 위에 관용적으로 이것은 html이라고 써주기위해 이라고 써줘야한다. 6. : 링크를 거는 태그 a = anchor 태그 안의 요소 href="" : 링크의 주소를 넣는 부분 target="" : 본인창에서 열지 새창에서.. 생활코딩 따라하기 05. 부모자식과 목록 태그 1. : li = list 글머리표(ex.●)를 추가해 보여진다. li는 부모태그인 ul을 기가지고 있습니다. 2. : 단락을 연결짓기 위한 의 부모태그 들여쓰기가 되면서 부분이 한 단락으로 묶이게 됩니다. ul = Unordered List 3. : 자동으로 글머리앞에 숫자를 입력해줍니다. ol = Ordered List 4. : li는 2대(ul과 li, 또는 ol과 li)가 같이 다니지만 table은 tr, td 까지 삼대가 같이 다닙니다. https://www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb WEB1- HTML & Internet www.youtube.com 이전 1 2 다음
