웹/Html9 정적/동적 웹페이지 📍정적 페이지 서버에 요청이 들어올 때마다 파일 내용이 변경되지 않고 그대로 전송 ( 웹 서버에 이미 저장된 파일(html 파일, 이미지, Javascript 파일을 그대로 봄)사용자의 입력이나 데이터에 따라 내용이 바뀌지 않고 모든 사용자에게 동일한 내용이 표시 ( EX) Apache 서버 소프트웨어ex) 회사 소개 페이지, 반복이 없는 포트폴리오 페이지 등이 있음☑️ 프로세스클라이언트 요청클라이언트의 요청 전 리스너 포트를 열어둠접속이 되면 서버는 각 클라이언트를 위한 소켓을 생성하고 통신을 하게 됨 2.필터링3.응답프로토콜에 따라 헤더에 동적/정적페이지에 대한 정보를 넣고 브라우저가 캐싱해야될지 결정하게 해줌 캐싱 : 웹 브라우저가 웹 페이지 자원(html,css,javascript,이미지)를 임.. 2024. 9. 11. 경로 📍1. 절대 경로 다른 웹사이트에서 호스팅되는 외부이미지로 연결 (고유 경로 ) 도메인 주소를 시작으로 최상위 폴더 부터 거슬러 내려가기) 파일이 변해도 주소가 변하지 않음 Ex) 예: src="https://www.w3schools.com/images/img_girl.jpg" 📍2. 상대 경로 : 웹사이트 내에서 호스팅되는 이미지에 대한 링크 - 현재 문서를 기준으로 경로를 인식하는 방법 index.html 에서 동일한 위치에 있는 apple.png를 가져오기 => src = "apple.png" 또는 scr = " ./apple.png" index.html 의 상위 폴더에 이미지가 있는 경우 => src = "../apple.png" => 현재 문서의 위치가 /home/user/documents 라면.. 2024. 1. 12. head 태그 : 브라우저 화면에 직접 보여지진 않지만 문서의 정보를 담음 브라우저의 제목 표시줄이나 탭에 보이는 문서 제목을 정의. 문서 안의 모든 상대 url이 사용할 기준 url을 정함 외부 리소스와의 관계 ( 스타일 시트 , 파비콘 등 ) 스타일 규칙을 담고 있음 : 위 태그들로 나타낼 수 없는 다른 메타관련 요소로 나타낼 수 없는 데이터를 나타냄 자바스크립 2023. 9. 23. 이미지 & 멀티 미디어 1) 이미지 삽입 - Width , height : 이미지 파일은 수정하지 않고 웹에서 보이는 이미지 - 크기만 조절하고 싶을 때 사용 (둘중 하나만 사용하면 알아서 비율 조정해서 보여줌) % : 현재 웹 브라우저 기준 창의 너비와 높이 기준으로 이미지 크기 결정 Px : 해당 픽셀 만큼 ( 숫자만 입력 가능) 2) 오디오와 비디오 삽입하기 : 오디오,비디오,이미지 등 다양한 멀티미디어 파일 삽입 가능 ,태그의 속성 Control 속성: 사용자가 음악 및 동영상 재생 멈춤 가능 > Autoplay: 자동으로 실행 Loop : 반복 재생 2023. 9. 23. 텍스트 입력, 목록 , 표 1) 내용 입력하기 (1) 제목 태그 : ndp 1~6의 숫자가 들어감 (크기가 커질수록 작아짐) (2) - 텍스트 단락만들기 - 텍스트 앞뒤로 빈 줄이 생김 - 줄바꿈 안됨(단 웹브라우저 크기 넘어가면 자동으로 넘어감) (3) - 줄바꿈 태그 - 닫는 태그 없음 (4) - 인용문 태그 - 자동으로 조금 들어가서 시작함 (5) , - 텍스트 굵게 표시 - 나 는 단순히 텍스트를 진하게 그리고 이텔릭체로 표시 하는 역할 - 나 은 실제 페이지 내의 중요한 부분을 강조하고 싶을 때 사용 (6) , 기울김 태그 : 특별히 강조하고싶은 부분, 다른 텍스트와 구분 ,:관용구 (7) - 가로로 선 긋는 태그 - 종료 태그 없음 2) 목록 만들기 (1) , : 순서 있는 목록 기본형: 항목1 항목2 -> 1234 대.. 2023. 9. 23. 기본적으로 알아야 웹페이지의 구조 설명 요소로 구성 —> 브라우저에 내용을 표시하는 방법 , 레이블 지정 웹페이지를 만들기 위한 표준 마크업 언어 Alt f s -> save Html,css,js 파일 만들려면 이름.뒤에 적어줘야함 실행방법 ) 오른쪽 마우스 -open in default browser 바-Live Server 이용: 오른쪾 마우스 open live server ->바로바로 확인 가능 html, css 한번에 보기 : css 파일 이름을 마우스 오른쪽 버튼으로 클릭 후 [측면에서 열기] 간단한 html 문서 // html로 디코딩을 하면된다고 알려줌(이 문서는 html이다) //html 페이지의 루트 요소 //html lang = “en” 언어를 영어로 하겠다 //문서의 본문 정의 (사용자의 눈에 보이는 .. 2023. 8. 2. 이전 1 2 다음
