공부저장소

📘웹서비스프로그래밍

HTML

  • 모든 웹 콘텐츠는 HTML로 구성
  • 웹 브라우저는 서버로부터 전달받은 HTML문서의 구조를 해석해 화면 구성
  • 클라이언트인 웹 브라우저가 서버로부터 수신하는 데이터의 구조

하이퍼텍스트

  • 다른 정보와 연결된 텍스트를 의미하여 사용자가 관련 문서를 링크를 통해 이동하며 정보를 얻을수 있음
  • 초기 월드 와이드 웹은 이러한 정보의 연결에 중점을 두고 설계

마크업 언어

  • 텍스트에 의미를 부여하기 위해 문서에 주석을 다는 표현 시스템
  • 표현하고자 하는 정보가 있을 때 정보의 앞뒤에 태그(Tag)표기를 달아 정보에 의미를 부여하는 방식
  • XML(자신만의 규격 정의가능)

태그

  • 태그는 <>를 사용하여 표현
  • 일반적으로 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으며,종료 태그 앞에는 /를 붙여야함
  • 사용할 수 있는 태그는 표준으로 정해져 있으며 태그마다 역할이 다름
    1. 모든 태그가 종료 태그를 가지는 것은 아님
    2. 태그 이름은 대소문자를 구분하지 않음
    3. 태그에 추가적인 정보 부여를 위하여 속성 사용
    4. 속성 1. 태그에 추가 정보를 제공하기 위해 사용 2. 태그에 따라 사용할 수 있는 속성이 정해져 있음 3. 디자인과 관련된 속성은 거의 사용하지 않고 CSS사용

태그 보디

  • 시작 태그와 종료 태그 사이에 위치하는 내용(콘텐츠)
  • 대체로 텍스트가 위치하며, 다른 태그를 포함할 수 있음
  • 태그 사이에 부모-자식 관계가 정해져 있는 경우 규칙에 적합하게 사용해야함

시맨틱 태그

  • 특별한 의미를 가지는 태그
  • 시맨틱 태그 그 자체로는 별다른 역할을 수행하지 않고 화면 디자인에도 영향을 미치지 않지만 코드의 가독성을 높이는데 도움을 줌

제목 태그

  • 제목 태그는 h1~h6가지 사용되며, 숫자가 작을수록 큰 글자로 출력

문단 태그

  • p태그 : 문단을 구분하기 위해 사용
  • br줄을 바꿀 때 사용

목록 태그

  • ul : 순서가 없는 목록
  • ol : 순서가 있는 목록
  • li : 리스트 아이템

하이퍼링크 태그

  • 사용자의 선택에 따라 다른 웹 페이지 내부의 특정 위치로 이동할 때 사용
  • a 태그 사용
  • a 태그의 href 속성(a href = "http://naver.com">네이버</a>)
    1. 절대 경로 : 현재 웹 페이지의 위치와 상관없이 웹 페이지 또는파일의 위치를 나타내는 경로
    2. 상대 경로 : 현재 웹 페이지의 위치에 따라 결정되는 웹 페이지 또는 파일의 경로
    3. 아이디 경로 : 현재 웹 페이지 내부에 있는 다른 태그의 id 속성
    4. 메일 경로 : 메일 주소

form 태그

  • 입력 양식을 위한 코드
  • form 태그의 속성(action:전송위치 , method:전송방식)
  • 데이터 전송 방식 (GET:주소에 데이터를 직접 입력해 전달합니다, POST:별도의 방법을 사용해 데이터를 해당 주소로 전달합니다)

블록 태그

  • 라인 전체를 사용하는 태그
  • 다른 태그 요소와 같은 라인에 배치할수 없음
  • ex) <p>,<div>,<h>,<ul>,<ol>,<form>

인라인 태그

  • 다른 태그 요소와 같은 라인에서 나란히 배치될 수 있는 태그
  • 경우에 따라 블록/인라인 두가지 형식을 혼합한 ‘inline-block’속성을사용하기도함
  • ex) <span>,<img>,<a>

CSS

  • 글씨의 색상이나 크기,이미지 크기나 배치 방법 등 웹 문서의 디자인 요소 담당
  • 웹 문서의 내용과 별개로 디자인만 바꾸거나, 디자인은 그대로 두고 웹 문서의 내용을 변경하기에 용이
  • ex) h1 {color : red; font-size = 15px;} (선택자) (선언부)

CSS를 HTML에 적용하기 위한 방법

  • 인라인 스타일 시트 : HTML 태그에 CSS속성 정의
  • 내장 스타일 시트 : HTML 문서의 <head> 부분에 CSS정의 부분 포함
  • 외장 스타일 시트 : 별도의 CSS파일을 생성한 후 HTML문서에 링크로 포함

셀렉터

  • 선택자의 다른 명칭
  • HTML문서에서 특정부분을 선택하기 위한 구문
  • 기본적인 선택자 : 태그,아이디,클래스

태그 셀렉터

  • 태그는 HTML의 기본 구성 요소로, 태그 이름으로 요소 선택
  • 태그는 중복 사용되기 때문에 특정 영역을 선택하기 보다는 공통 디자인 속성을 정의하는데 사용
  • 같은 디자인 속성을 적용할 여러 태그는 콤마로 나열해 일괄 적용 가능 
    p{
  text-align : center;
  color : red;
}
h1,h2,h3,h4{color:blue;}

아이디 셀렉터

  • 아이디 속성 사용
  • 아이디가 선택자로 올때는 HTML에서 지정한 아이디 앞에 #을 붙여 정의
/* css*/
#id_name {color:blue;}
<!--html-->
<div id = "id_name">
~
</div>

클래스 셀렉터

  • 가장 대표적인 CSS 셀렉터
  • 클래스(Class) 이름으로 구분해 스타일을 만들어두고 HTML에서 클래스 속성 을 적용해 원하는 디자인을 적용하는 방법 (CSS 선언이 먼저이고 HTML에서 이를 사용하는 개념)
  • 재활용이 용이하고 누구나 사용할 수 있도록 라이브러리 등을 만드는 데도 기본이 되는 방법
  • HTML 요소의 클래스가 선택자로 올 때는 클래스 앞에 점(.)을 붙여 정의
/* css*/
.title{color:blue;}
p.title{color:red;}
<!--html-->
<div class = "title">
~
</div>
<h2 class = "title">
<p class = "title">

자바스크립트

  • 정적인 HTML 콘텐츠에서 사용자와 상호작용하며 동적으로 변경하는 부분 담당
  • 객체기반의 스크립트 언어로 기본적으로느 웹 브라우저에서 해석되는 인터프리터 언어
  • 이를 통해 DOM(Document Object Model)을 다룰 수 있음
  • 객체를 정의하는 JSON(JavaScript Object Notation)구문

자바스크립트에서 이벤트를 처리하는 방법

  • HTML 태그에 이벤트 처리 속성 이용
  • 문서 객체 모델DOM요소에 속성 추가
  • DOM요소에 addEventListener()로 콜백 함수 등록 ``` <button type=”button” onClick(//마우스 버튼 클릭을 감지하고 login()함수 호출)=”login()”>로그인</button>

<div onMouseOver(마우스가 태그 영역 위로 올라가는 것을 감지하고 show()함수 호출)=”show()”>마우스가 올라가면 텍스트가 보입니다</div> ```

문서 객체 모델(DOM)

  • DOM은 텍스트로 된 HTML문서를 프로그램적으로 처리할 수 있도록 문서 구조 전체를 객체화 한것
  • querySelector():선택자와 일치하는 첫번째 노드만 가지고옴 ex) document.querySelecor(“p.title”);
  • querySelectorAll():선택자와 일치하는 모든 노드를 가지고옴 ex) document.querySelectorAll(“p.title”);
  • get Attribute(),setAttribute():가져온 요소의 속성에 접근 ex) element.setAttrivute(attribute,value),element.getAttrivute(attribute,value)

    스타일 속성 변경

    • 특정 태그 요소의 스타일 속성을직접 변경

    • document.getElementById("box1).setAttribute("style,"background-color:yellow");

    스타일 객체 변경

    • 스타일 속성 변경과 동일한 방식이지만 코드 구현에서 차이가 있음

    • 태그의 속성을 문자열 형태로 지정하는 것이 아닌 객체 참조 방식으로 스타일 속성 지정s

    • document.getElementById("box1").style.backgroundColor="yello";

    클래스 변경

    • 태그 노드의 스타일 속성이 아니라 클래스 변경을 통해 디자인을 변경하는 형식

    • document.getElementById("box1").className="bgyellow";

태그:

카테고리:

업데이트:

참고