A. HTML

Hyper-Text Markup Language

시작 태그가 있는데 컨텐트가 없는 태그들을 종료하기 위해 <meta 속성…./> 요런 식으로 작성
HTML 태그 이름은 대소문자를 구분하지 않지만, 모두 소문자로 쓰는 것을 권장
HTML 요소 구분
- block 요소 : 자동으로 줄바꿈되는 요소, 다른 요소의 아래쪽으로 배치
  - ex ) h1, h2, h3…, div, form, ul, ….
- inline 요소 : 자동으로 줄바꿈되지 않는 요소, 다른 요소의 오른쪽에 배치

HTML 파일 구조

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
      CSS
    </style>
</head>

<body>
		HTML 요소들...
</body>

</html>

DTD (Document Type Definition) : HTML5 문서 타입 정의
<!DOCTYPE html>
HTML 페이지의 기본 요소
<html></html>
메타 데이터에 대한 정보를 담는 태그
- 메타 데이터 정의 : 엔코딩 CHAR SET
- <meta charset="UTF-8">
- HTML 페이지의 타이틀을 정의하는 태그
  - 브라우저의 타이틀을 정의
```
<title></title>
```
<head></head>
문서의 바디를 정의, 제목이나 문단, 이미지 등의 눈에 보이는 요소들을 포함
- Heading
- <h1></h1> ~ <h6></h6>
- paragraph
- <p></p>
- section
  - 
- <section id="sec-1"></section>
- article
<body></body>

<aside> 💡 HTML 파일 작성 시, os마다 대소문자를 구분할 수도 있고, 안할 수도 있기 때문에 파일 이름은 소문자로만 작성하도록 하자

Window 의 경우 대소문자 구분 X, Linux의 경우 구분 O ⇒ 실제 서비스 실행 시 문제가 발생할 수도 있음 </aside>

기본으로 index.html을 보여주는 이유

WebINF > Web.xml 파일에서 welcome-file 태그 안에 있는 파일명들을 찾아 웹 프로젝트의 첫 화면으로 나타낸다.

<table>
        <caption>프론트엔드 시험 성적</caption> <!-- 테이블 제목 -->
// 켑샨ㅇ,ㄴ 테이블 밖으로 들어간다...
        <thead> <!--테이블 헤더-->
            <tr> <!-- 테이즐 행(row) -->
                <th>번호</th> <!-- 테이블 셀 헤더. ex ) 컬럼 이름, 행-->
                <th>HTML</th>
                <th>CSS</th>
                <th>JS</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
</table>

검색어를 입력하면 발생하는 일

검색어를 구글 서버에 보낸다.
https : 프로토콜 정의
DNS (Domain Name System)

GET - POST

Form 양식

클라이언트에서 사용자의 입력을 받아서, 입력 내용을 서버로 전송하는 방법

GET 방식 전송
- 클라이언트가 보내는 데이터가 요청 주소의 질의 문자열에 포함되어 전송되는 방식
POST 방식 전송
- 클라이언트가 보내는 데이터를 요청 주소에 노출시키지 않고 요청 패킷의 body에 포함해서 전송하는 방식 ex ) 로그인 (아이디, 비밀번호 전송)

URL 형식 :

- 프로토콜://서버이름(주소):포트/경로?QUERY_STRING=? 종류 : http, https
  - 서버의 IP 주소를 직접 사용할 수도 있지만, 일반적으로는 DNS에 등록된 도메인 이름을 사용하여 경로를 찾아감
  - 포트번호 80은 생략
  - 경로와 질의문자열은 ?로 구분
  - query_string은 파라미터=값&... 형식으로 사용-

<form action="form_result.jsp" method="get"> </form>

post 요청에서 name 속성이 없는 form 태그는 데이터를 전송하지 않는다.
프로토콜 요청 방식이 명시되어 있지 않은 경우, get 요청이 기본

B. CSS

📟Front-End 개발 언어

HTML : 웹 페이지의 정적 컨텐츠 작성. 링크, 이미지, 테이블 등
CSS : 웹 페이지의 스타일(모양, 배치) 설정. color, background-color....
JavaScript : 웹 페이지의 동적인 변화, 이벤트 처리, 서버와의 (비동기) 통신.

B-1. CSS 적용 방법

external CSS : 다른 파일에서 작성한 내용을 링크하여 사용 (.css 확장자 파일)
internal CSS : HTML 파일 내에서 STYLE 태그 내에 작성된 내용을 적용
inline CSS : HTML 태그 내에서 style 속성 내에 작성된 스타일을 적용

적용 우선 순위 : 3 (inline css) > 2 (internal) > 1 (external)

단순하게 위에서부터 아래로 적용된다라고 생각하면 된다.
만약 style sheet을 링크하는 코드가 <style></style> 태그의 하위에 있다면, internal보다 external이 나중에 적용되므로, internal의 속성들을 external CSS가 적용된다.

B-2. CSS 선택자 (SELECTOR)

selector : HTML 요소를 선택하는 방법

태그 (tag selector) : body, div, span, table, ...
클래스 속성 (class selector) : ".className {}"
- HTML 태그 안에서 class 속성을 지정하면 동일 CLASS 이름을 가진 요소들의 CSS가 적용할 수 있다.
- 하나의 HTML 요소에 여러 className을 설정하고 싶은 경우, 다음과 같이 작성
```
<div class="color-white another-class-name">Division1</div>
```
id 속성 (id selector): "#idName {}"
- HTML 태그 안에서 id 속성에 설정한 이름
- HTML 파일 안에서 유일한 요소의 선택자를 설정하기 위한 방식이다
- 같은 이름의 id를 설정해도 오류가 나지 않으나, 권장하지 않음
- 동일 아이디로 여러 요소에 지정해도 해당 CSS가 적용된다...!
- : 모든 HTML 요소
pseudo selector : 마우스 위치, 이벤트, ...
자식 요소 (child element)

<aside> 💡 * FE 종사자들은 CamelCase보다 바를 사용한 표기를 많이 한다.

colorWhite (x)
color-white (o)

</aside>

명시된 태그 요소들 중 선택할 Class 이름이나 id 값을 가진 요소들을 선택

tag.[className] {}
tag#[idName] {}

중간에 공백이 절대로 있으면 안됨!

<aside> 💡 특수기호 사용하기

태그에서 사용되는 < > 기호를 콘텐츠에서 사용하고 싶을 때
- greater than 줄여서 gt , less than lt </aside>
<p>Section 1 > Paragraph 1</p> <p>Section 1 < Paragraph 1</p>

자식 (child), 자손 (descendent) 요소를 찾는 선택자

자식 요소 : HTML 문서 구조에서 바로 하위에 있는 요소들
- parent > child
자손요소 : HTML 문서 구조에서 하위에 있는 요소들 (몇 대손인지 상관 노노~)
- ancestor descendent ⇒ 공백으로 구분

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS selector</title>
    <style>
        section {
            border: 2px solid darkgray;
            margin: 16px;
        }

        section#sec-1>p {
            color: red;
        }

        section#sec-2 p {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>CSS selector2</h1>

    <section id="sec-1">
        <p>Section 1 &gt; Paragraph 1</p>
        <p>Section 1 &gt; Paragraph 2</p>
        <article>
            <p>Section 1 &gt; Article &gt; Paragraph</p>
        </article>
    </section>

    <section id="sec-2">
        <p>Section 2 &gt; Paragraph 1</p>
        <p>Section 2 &gt; Paragraph 2</p>
        <article>
            <p>Section 2 &gt; Article &gt; Paragraph</p>
        </article>
    </section>

    <section id="sec-3">
        <p>Section 3 &gt; Paragraph 1</p>
        <p>Section 3 &gt; Paragraph 2</p>
        <article>
            <p>Section 3 &gt; Article &gt; Paragraph</p>
        </article>
    </section>
</body>

</html>

Pseudo selector (가상 선택자)

이벤트 또는 특정 조건을 만족하는 요소를 찾을 때 사용

문법 : selector:pseudo-selector
종류
- visited : 방문했었던 사이트.
- link : 방문하지 않았던 사이트
- hover : 마우스가 요소 위에 있을 때
- active : 마우스 버튼을 누르고 있을 때.
- nth-child(arg) : 특정 조건을 만족하는 자식 요소를 찾을 때

B-3. HTML\CSS 속성 : property

Display 속성

block : div, p, h1, ul, table...
- 이전 요소의 아래쪽에 배치
- 가로, 세로를 변경할 수 있음
- margin, padding을 변경할 수 있음
inline : span, a, strong, em, ...
- 이전 요소의 오른쪽에 배치
- 가로, 세로를 변경할 수 없음
- margin, padding을 변경할 수 있음
inline-block : img
- inline 배치 속성: 이전 요소의 오른쪽에 위치
- block 크기 변경 속성 : width, height 를 변경할 수 있음
none:화면에 표시하지 않음. 요소가 차지하는 (가로, 세로) 크기가 없음

C. Event 처리방식

🔥 addEventListener(event, callback, useCapture) 파라미터

event : 이벤트 이름

callback : 이벤트가 발생했을 때 브라우저가 실행할 콜백 (이벤트 리스너)

useCapture:이벤트 처리 방식(boolean)

useCapture

true | capturing 방식
- 부모 요소가 먼저 이벤트를 처리하고, 자식 요소가 그 다음에 이벤트를 처리하는 방식
false, undefined ㅣ bubbling 방식
- 자식 요소가 이벤트를 처리하고, 그 이벤트를 부모 요소에게 전달하는 방식 </aside>

Bubbling vs Capturing

부모에서 useCapture를 설정해주어야 함

자식을 잡을건지, 놓아줄건지!

Bubbling .

useCapture에 false 혹은 undefined (인자를 넘기지 않은 경우)
bubbling 방식의 이벤트 처리 방식 사용
- 자식이벤트 -> 부모이벤트

Capturing .

useCapture에 true 넘길 경우 capturing 방식의 이벤트 처리 방식 사용
- 부모이벤트 -> 자식 이벤트

만약 동일한 이벤트 처리할 경우,

위 이벤트 처리 방식들로 인해 동일한 이벤트 중복으로 처리하게 됨
e.stopPropagation();
- 먼저 이벤트 발생하는 요소의 콜백 함수에 위 메서드를 호출하면 해당 요소의 이벤트 발생 후 이벤트 전달 안함.

'programming > HTML&CSS' 카테고리의 다른 글

CSS \| 레이아웃의 모든 것!! (2)	2022.09.21
[21세기 Web의 발전]Semantic Web과 Semantic Tags (0)	2022.09.20
HTML \| 1. 파일 생성 & HEAD (0)	2022.08.11

B.T.T

HTML/CSS

A. HTML

태그

HTML 파일 구조

기본으로 index.html을 보여주는 이유

검색어를 입력하면 발생하는 일

GET - POST

Form 양식

URL 형식 :

B. CSS

📟Front-End 개발 언어

B-1. CSS 적용 방법

적용 우선 순위 : 3 (inline css) > 2 (internal) > 1 (external)

B-2. CSS 선택자 (SELECTOR)

명시된 태그 요소들 중 선택할 Class 이름이나 id 값을 가진 요소들을 선택

자식 (child), 자손 (descendent) 요소를 찾는 선택자

Pseudo selector (가상 선택자)

B-3. HTML\CSS 속성 : property

Display 속성

C. Event 처리방식

useCapture

Bubbling vs Capturing

Bubbling .

Capturing .

만약 동일한 이벤트 처리할 경우,

'programming > HTML&CSS' 카테고리의 다른 글

티스토리툴바

HTML/CSS

A. HTML

태그

HTML 파일 구조

기본으로 index.html을 보여주는 이유

검색어를 입력하면 발생하는 일

GET - POST

Form 양식

URL 형식 :

B. CSS

📟Front-End 개발 언어

B-1. CSS 적용 방법

적용 우선 순위 : 3 (inline css) > 2 (internal) > 1 (external)

B-2. CSS 선택자 (SELECTOR)

명시된 태그 요소들 중 선택할 Class 이름이나 id 값을 가진 요소들을 선택

자식 (child), 자손 (descendent) 요소를 찾는 선택자

Pseudo selector (가상 선택자)

B-3. HTML\CSS 속성 : property

Display 속성

C. Event 처리방식

useCapture

Bubbling vs Capturing

Bubbling .

Capturing .

만약 동일한 이벤트 처리할 경우,

'programming > HTML&CSS' 카테고리의 다른 글

'programming/HTML&CSS' Related Articles

티스토리툴바

A. HTML