웹페이지를 만들어 본다하면 누구나 들어봤을
HTML, CSS, JS(javascript)
나는 웹페이지를 만들어보고싶어 알아볼 때, 저 이름들에 거부감이들었었다.
"아니 저걸 다 공부하고, 또 다른걸 알아야하고..."
근데 그냥 가볍게 ~ 넓고~ 얕게~ (배울땐 이게 최고의 마인드라 생각함.)
웹페이지는 몸(HTML)에 옷(CSS)을 입힌는 것이라 생각하면 쉽다.
```html 기본 구조
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
우리의 몸에 대해 알아보자
html은 크게 head와 body부분으로 나뉜다.
head태그는 페이지의 속성 정보를 갖고있다. 이곳에는 웹페이지의 제목, 설명, 사용할 파일위치, css파일 같은, 웹페이지의 보이지 않는 정보를 작성한다.
ex)head태그안에 들어가는 내용:bootstarp,jquery를 사용하는데 필요한 head 부분
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- //jQuery import--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <title>Bootstrap_frame</title> </head>
head태그의 부분이 보이지 않는 부분을 담당했다면,body태그는 우리에게 보여지는 페이지를 담당한다.
body태그안에는 다양한 태그들이 존재한다. 수많은 태그들을 분류하면,
글자(인라인요손)를 위한 태그, 상자(블록요소)를 위한 태그로 나눌 수 있다.
대표적인 블록요소_div
<div> <div> hello_world </div> </div>
대표적인 인라인요소_span
<span>hello world</span>
두 태그들의 차이(블록요소 vs 인라인요소)는 무엇일까?
body정보와 그 결과
<body> <div class="block_tag"> "div": hello world </div> <span class="inline_tag">"span" : hello world</span> </body>
이걸보고 알아내면 천재. 궁금하다면, 검색을 해보자.(절대 내가 귀찮아서 아님!!!)
다른건 몰라도 이거하난 알아야한다.
블록요소 안에 인라인요소가 들어갈 순 있지만,
인라인 요소안에 블록요소는 불가능하다.
이게무슨 갑자기 무슨소리냐면, 태그는 부모와 자식의 관계가 존재한다.
<부모태그> <자식태그> 응애, 나는 애기야 응애 <자식태그> <부모태그>
우리의 현실세계에서 부모님의 영향을 자식들이 받듯, 여기서도 똑같다.
자식요소는안에 있는 부모요소의영향을 받는다.
그렇다면 다시
블록요소 안에 인라인요소가 들어갈 순 있지만,
인라인 요소안에 블록요소는 불가능하다.
이를 생각해보면 당연하다.
아니 글자를 위해 만든곳에 상자를 어떻게 넣어..?
라고 나는 생각했다.(매우주관적) 무튼 그러하다.
이렇게 이야기하다보면 궁금한게 생긴다.(나는 생겼다.^^)
"자식태그는 어떤 영향을 받는걸까?"
이게 바로 CSS이다. CSS는 다음 글에서..
