공부한 내용을 스스로 정리하는 글입니다. 불친절할 수 있습니다!

 

빈 태그 (Empty Tag)

 빈 태그 : 종료 태그만 있고, 시작 태그는 없는 태그

  • 내용을 싣지 못함
  • 이미지나 경로 등 특정값을 나타낼 때 사용

HTML1/2/3/4/5 : <tag> 

XHTML / HTML5 : <tag/>

 

일반태그

<tag 속성=‘값’> 내용 </tag>


빈 태그 ex1. <img/>

<img src=“./dog.jpg” alt=“강아지 사진” />


빈 태그 ex2. <input/>

<input type=“text”/>

 

 

글과 상자

 

글과 상자는 요소가 화면에 출력되는 특성을 이야기하며, 크게 2가지로 나눕니다.

 

1) 인라인(Inline)요소 : 글자를 만들기 위한 요소들

2) 블록(Block)요소 : 상자(레이아웃)을 만들기 위한 요소들

 

 1) Inline의 예시

<span>hello</span> 

<span>world</span>

 

# 결과

hello world

: 띄어쓰기를 한다

: 포함한 콘텐츠 크기만큼 자동으로 줄어듬!!(width, height)

: 글자는 가로세로 사이즈(px)를 지정할 수 없다!

: 위/아래 여백은 사용 불가! (좌/우 여백은 가능)

: 글자 내에 상자(div등)를 넣을 수 없다

 

2) Block의 예시

<div>hello</div>

<div>world</div>

# 결과

hello
world

: 줄을 바꾼다

: 부모 요소의 크기만큼 width자동으로 늘어남!!(height는 줄어듬)

: 가로세로 사이즈(px)를 지정할 수 있음.

: 위/아래/좌/우 여백 가능

: 상자 내 상자, 상자 내 인라인 넣을 수 있음. (제약 적음)

 

 

HTML Tags

 

태그 내용 비고
<div>  특별한 의미가 없는, 구분을 위한 요소(division)  여러 주제를 묶는다
<h>  제목을 의미하는 요소(heading)  
<p>  문장을 의미하는 요소(paragraph)  
<img>  이미지를 삽입하는 요소  
<ul>  순서가 필요없는 목록의 집합  
<ol>  순서가 필요한 목록의 집합  
<li>  목록 내 각 항목  
<a>  닻, 하이퍼링크를 지정하는 요소  
<span>  특별한 의미가 없이 구분을 위한 요소  해당 요소를 CSS로 적용하기 편하다
<br/>  줄바꿈  
<input>  사용자가 데이터를 입력하는 요소  data type에 따라 text/value/placeholder/checkbox/radio/name으로 묶음
disabled/checked/name
<label>  라벨 가능 요소(input)의 제목  
<table>  표 요소(행과 열의 집합)  <tr>: 행, <td>: 열

 

 

전역속성

 

html에서 자주 사용하는 태그의 전역속성입니다.

# 사용법.

<tag [전역속성]> 내용 </tag>

 

전역속성 내용
title  어떤 행동을 할 것인지 도와줌
style  css를 적용함
class  요소를 지칭하는 중복 가능한 이름
id  요소를 지칭하되 고유한 이름
data  요소에 데이터를 지정 (잠시 저장해서 JS, CSS에서 사용 가능)
저작자표시

'Front-End > HTML, CSS' 카테고리의 다른 글

코드를 예쁘게 만들기. (feat. Prettier, Beautify)  (0) 2022.11.04
HTML과 CSS, JavaScript 연결(선언)하기 (+비동기방식 async/defer)  (0) 2022.10.28

 

 

코드를 모든 사람들이 보기 편하게 짜는 것은 프로그래머의 능력입니다.

컨벤션을 익혀서 코드를 짜는 시점에 예쁘게 짜는 것도 좋지만, 적절한 도구를 사용해 예쁘게 만드는 방법도 좋습니다.

 

Mac에서 코드를 짜는 데 도움이 될만한 단축키

 

Extension(확장 프로그램) Prettier

보통 Beautify라는 확장프로그램이 많이 사용됐지만 더 이상 업데이트가 되지 않아 권장되지 않습니다.

다음으로 많이 쓰이는 Prettier 확장프로그램인데요. 사용법은 다음과 같습니다.

 

확장프로그램 -> Prettier 검색 -> Install

-> cmd+shift+P

-> Format Document (전체 문서에 적용)  /  Format Selection (선택영역에만 적용)

 

 

저작자표시

'Front-End > HTML, CSS' 카테고리의 다른 글

HTML의 tag  (0) 2022.11.21
HTML과 CSS, JavaScript 연결(선언)하기 (+비동기방식 async/defer)  (0) 2022.10.28

HTML과 CSS, JavaScript는 웹 페이지를 구성하는 요소로 각각의 맡은 바 역할이 있고, 서로 유기적으로 상호작용합니다.

[각자 맡은 역할]

  • HTML(Hyper Text Markup Language) : 웹 구조를 이룬다.
  • CSS(Cascading Style Sheets) : 웹 시각적 요소를 적용한다.
  • JS(JavaScript) : 웹의 동적 처리를 수행한다.

그러면 따로 떨어져있는 각 파일들은 어떻게 연결될 수 있을까요?

 

1개의 디렉토리 내 3개의 각 파일들

 

HTML - CSS 연결하기 (CSS 선언 방식)

HTML에 CSS를 적용(선언)하는 방법은 크게 3가지가 있습니다.

  1. 내부 스타일시트
  2. 외부 스타일시트
  3. 인라인 스타일

아래 예시를 보며 살펴보겠습니다.

 

 

내/외부 스타일시트 및 인라인스타일

 

1. 내부 스타일시트 : <style> ~ </style>

 내부 스타일시트는 html에 <style> 태그를 직접 넣어서 스타일을 작성하는 방법입니다.

빠르고 간편하게 스타일을 적용할 수 있지만, 해당 html문서만 스타일을 적용할 수 있어 코드가 길어지면 유지관리가 어려워집니다.

 

2. 외부 스타일시트 : <link />

 외부 스타일시트는 <link /> 태그를 넣어 외부에 있는 CSS 파일을 가져오는 방법입니다.

@import를 사용해 직렬적으로 여러 CSS 파일을 적용할 수 있지만 CSS가 적용되는 시간이 늦어져 권장하지 않는 방법입니다. 

많은 css 파일을 적용할 경우 병렬형태로 적용하고자 하는 CSS를 <link />로 가져오는 것이 좋습니다. - 권장 방법!

 

3. 인라인스타일 

 인라인스타일은 요소의 style 속성에 직접 스타일을 작성하는 방법입니다.

선택자가 없어 편리해보이지만, 인라인스타일의 CSS 우선순위가 높아 유지보수에 어려움을 겪을 수 있습니다.

(향후 CSS 우선순위에 대해 알아보겠습니다.)

 

 

권장하는 방법 : <link> tag

 

 

HTML - JavaScript 연결하기 (JS 선언 방식)

HTML에 JavaScript를 연결(선언)하는 방법은 다음과 같습니다.

  1. 인라인스타일
  2. <head>에 .js 연결
  3. <body> 끝에 .js 연결
  4. <script>에 ansync / defer 속성 사용
1. 인라인스타일 : <script> ~ </script>

 

 CSS 인라인스타일과 같이 HTML 문서 내에서 <script> 태그로 바로 JS를 적용할 수 있습니다.

간단하게 원하고자 하는 부분에 JS를 적용할 수 있지만, CSS와 마찬가지로 JS가 복잡해지면 HTML의 가독성을 떨어뜨릴 수 있습니다.

 

2. <head>에 .js(외부 자바스크립트) 연결

 가장 대중적으로 쓰이는 방법입니다. DOM을 따라 반드시 순서대로 실행되어야 하는 경우 사용합니다.
순서 : .html 렌더 -> JS파일 로드 및 실행 -> 남은 html 렌더 및 실행
단점 : JS가 무거울수록 웹페이지 로드 시간이 오래 걸린다.

 

3. <body> 끝에 .js 연결

 1번 방법에서 단점을 보완한 방법입니다. <head>가 아닌 <body>태그 내에서 외부 JS파일을 가지고 옵니다.
순서 : .html 모두 실행 후 JS파일 로드 및 실행
단점 : JS의 동작이 많을수록 원하는 모양의 페이지를 한번에 불러올 수 없다.

 

4. <script>에 ansync / defer 속성 사용

 

 ansync와 defer로 script를 불러오는 방식을 비동기방식이라고 합니다.

비동기 방식은 왜 생겨났을까요?

 

일반적인 스크립트 로드 순서

 일반적으로 브라우저는 HTML 파일을 렌더한(읽고난) 후 위에서부터 순차적으로 한줄씩 해석합니다.

그러다 script(JS)를 만나면, 그 즉시 해당 script를 다 해석하기 전까지 나머지 HTML 렌더를 일시적으로 멈춥니다.

 

그러면 다음과 같은 문제가 발생합니다.

무슨 문제가 있을까? 직접 실행시켜보자.

1) 스크립트가 동작하지 않음 : 표시된 첫번째 스크립트(console.log)는 DOM에 <div> 엘리먼트가 부착되기 전에 접근하려 했기 때문에 동작하지 않습니다. 두번째 console.log 위에 <div> 엘리먼트가 부착되었기 때문에 두번째 스크립트는 정상적으로 작동합니다.

 

새로운 문제!

2) 홈페이지 멈춤 현상 : 만약 main.js를 읽는 시간이 20초가 필요하다고 가정해보겠습니다. 위와 같이 main.js를 읽는 도중 DOM 파싱이 멈추기 때문에 20초간 웹페이지는 멈춰있는 듯 보여 사용자에게 불편한 경험을 초래합니다. 이를 해결하기 위해 <body>태그 맨 마지막에 넣는 방법이 생겼지만, 이 역시 20초간 js파일을 해석한 뒤 웹페이지가 동작하기 때문에 해결되었다고 볼 수 없습니다.

 

이렇게 브라우저가 스크립트 파일을 병렬로 불러오는 방식으로 DOM렌더 과정을 막지 않게 선언하는 방법이 고안되었고,

이를 비동기 방식(async, defer로 선언)이라고 합니다.

 

  • anync
    <script src="main.js" async></script>	
    <script async src="main.js"></script>	
    <!--src 앞/뒤 상관없이 선언 가능.-->

 브라우저가 DOM을 구성하는 동시에 백그라운드에서 script를 불러올 수 있는 방법입니다.

그러나 로딩이 마치자마자 DOM 렌더를 멈추고 불러온 script를 해석하기 때문에 'DOM에 접근하는 스크립트를 불러오는 것은 적절하지 못합니다.' 결국 실행 순서가 보장되지 않는다는 단점이 있기 때문입니다.

 

 

  • defer - 권장 방식!!
    <script src="main.js" defer></script>
    <script defer src="main.js"></script>

 defer는 async과 비슷하게 동작되지만, DOM렌더를 전혀 방해하지 않고 병렬로 script를 로드합니다.

기본적으로 DOM의 모든 element에 접근할 수 있고, 실행순서도 보장되기 때문에 가장 범용적으로 사용할 수 있습니다.

쉽게 말해 모든 HTML이 실행된 뒤, JavaScript를 실행하므로 script가 어디에 있든 html에 적용할 수 있습니다.

script 파일끼리의 의존성이 있는 경우 defer를 사용하는 것이 좋습니다.

저작자표시

'Front-End > HTML, CSS' 카테고리의 다른 글

HTML의 tag  (0) 2022.11.21
코드를 예쁘게 만들기. (feat. Prettier, Beautify)  (0) 2022.11.04

+ Recent posts

티스토리툴바