WEB DATA Figuring out - HTML / CSS / JavaScript 웹 구성 간단한 이론 정리

David's Data Science·2021년 9월 26일
0

웹페이지의 기본 구성

HTMLCSSJavaScript
갖다놓고(frame)꾸미고(decorate)시킨다(order function)


HTML(Hyper Text Markup Language):

어떠한 구조로 웹 페이지를 만들지 구성하는 수단.
<<HTML> , <<HEAD> , <<BODY> 등과 같이 다양한 tag를 통해 웹 페이지를 구성.
마크업 언어라고 하지만 실제로 programming 언어로는 취급하지 않는다.


HTML 용어:

Tag: 웹 페이지에서 해당 content를 포함하고 있는 위치
ELEMENT: HTML을 구성하는 각각의 요소. TAG에 들어있는 내용이라고 볼 수 있다.


HTML 작성 방식 및 특징:

<html>
  <head> 
    <title> HTML 이해하기
    </title>
  </head>
</html>
---------------------------------------------------------------
-  위와 같이 tag는 <>로 열고 </>로 반드시 닫으며 끝낸다.

-  tag는 무수히 많은 자식 노드를 생성할 수 있다. 
   위 코드 기준 head의 자식노드인 title을 생성해 'HTML 이해하기'이라는 내용을 담았다. 
---------------------------------------------------------------



CSS(Cascading Style Sheet) :

단순한 HTML 구조에 색을 입히고, 모양을 내어 좀 더 보기좋게 꾸미는 역할.
HTML에서 내용이 갖고 있는 글자의 font style, font size 또는 배너 모양의 크기, 컬러 등을 지정한다.

CSS 작성 방식 및 특징:

  • INLINE 방식:
<head>
  <title style = "color: red"> HTML 이해하기</title>
---------------------------------------------------------------
-  HTML 내 tag에 바로 style과 함께 기재하는 방법 - 자식 tag들도 color가 바뀌게 된다.
  
-  적용 우선순위 자식 tag > 부모 tag
   title의 하위 tag에서 컬러를 변경할 경우 title의 컬러는 적용되지 않는다.
  ---------------------------------------------------------------
  • style [tag] 선택자 방식:
<style>
  title{color:red;}
</style>
---------------------------------------------------------------
-  style tag를 생성해서 특정 tag를 선택하여 따로 꾸며주는 방식

-  모든 title tag의 color가 red로 바뀌게 된다.
---------------------------------------------------------------
  • style [id] 선택자 방식:
<style>
  #data{font-size:100px;}
</style>
<body>
  <ul>
    <li id = "data"> HTML 이해하기
    </li>
  </ul>
</body>
---------------------------------------------------------------     
-  예시를 새로 만들어 <li> tag이면서 id ="data"인 개별의 구간을 지정해 HTML 이해하기 TEXT를 기입했다.
 
-  id 선택자는 tag 선택자와 달리 id를 기입해서 해당 id의 html 객체만 꾸며준다.
  
-  #id명을 기입한 뒤 꾸며주면 되므로 위와같이 id가 data인 부분의 수정을 위해 #data로 기입했다.
---------------------------------------------------------------
  • style [class] 선택자 방식:
<style>
  .science{text-decoration: line-throwgh;}
</style>
<body>
  <ul>
    <li class = "science"> HTML</li>
    <li id = "data"> HTML 이해하기</li>
    <li class = "science"> 이해하기</li>
  </ul>
</body> 
---------------------------------------------------------------
-  <li> tag에 class = "science"인 두 가지 글귀를 기재했을 때, 글 내용은 다르지만 해당 class 모두 꾸며준다.
-  id 선택자와 달리 .class명을 통해 꾸미기 가능하다.
---------------------------------------------------------------



JavaScript

Browser에서 기능이 작동될 수 있도록 동력을 넣어주는 역할.

WEB PAGE의 동작을 위해서 만들어졌던 Programming 언어인데, Action Script언어와 거의 비슷해 Flash를 위해 사용되기도 한다.

Node.js 등을 통해 client 뿐 아니라 server용 언어로 사용되기도 하여 다용도로 사용되는 언어가 되었다.




DOM (Document Object Model)

문서 객체 모델로서 XML, HTML 문서 등을 보기좋게 객체화 하여 나타내어주는 인터페이스.
F12를 통해 개발자 page의 console tab에서 JavaScript를 이용해 제어 대상을 보다 쉽게 찾을 수 있다.

Document methods

  • getElementById() : Id를 통해 element들을 필터링
  • getElementByName() : Name을 통해 element 필터링
  • getElementByTagName() : Tag를 통해 element 필터링

DOM과 JavaScript를 이용한 예시

document.getElementsByTagName('li')

어떠한 웹 페이지를 열고, console 탭에서 TagName <<li>인 요소들을 모두 찾아달라고 요청한 예시이다.
그 결과로 무수히 많은 li tag를 가진 요소들이 확인 된 것을 볼 수 있다.
내가 필요로 하는 부분을 찾고자 한다면, tag, class, id 등을 적절히 이용해서 찾아볼 수 있다.

profile
데이터 사이언티스트가 되고싶은 David입니다.

0개의 댓글