728x90

display

CSS의 display 속성은 웹페이지를 어떻게 사용자에게 보여줄지를 결정한다. 

주요 속성값으로 inline, block, inline-block, none 이 있다. 

 

1. inline

width와 height을 지정할 수 없고, 오직 내용(contents)만 포함하는 개념이다.

줄 바꿈이 일어나지 않는다.

대표적으로 span, b, a tag 등이 있다.

 

2. block

가로 크기만큼의 영역을 모두 차지하고, 줄 바꿈이 일어난다.

width와 height의 크기를 지정할 수 있다. 

대표적으로 div, p, h tag 등이 있다. 

 

3. inline-block

inline과 block의 속성을 가지고 있다.

줄 바꿈이 일어나지 않지만, width와 height 크기 조절이 가능하다. 

 

4. Code

//HTML 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="block_div">block</div>
    <div class="inline_div">inline</div>
    <div class="inline-block_div">inline-block</div>
  </body>
</html>
// CSS

body div {
  font-size: large;
  margin-bottom: 50px;
}
.block_div {
  display: block;
  background-color: aqua;
}
.inline_div {
  display: inline;
  width: 500px;
  /* inline 속성의 특징으로 위 속성값은 적용되지 않는다.  */
  background-color: chartreuse;
}
.inline-block_div {
  display: inline-block;
  width: 500px;
  background-color: gold;
}

Result

 

반응형
저작자표시 비영리 변경금지

'Programming > HTML, CSS' 카테고리의 다른 글

[HTML/CSS]Semantic Web과 Semantic Tag 이해하기  (0) 2021.11.16
[HTML/CSS]script 태그의 위치에 따른 차이점  (0) 2021.11.11
728x90

Semantic Web(a.k.a Web 3.0)이란??

W3C(World Wide Web Consortium)에서 제정한 World Wide Web의 확장판.

Semantic Web의 목적은 웹의 각종 정보들에 의미를 가지게 하기 위함이다. 여기서 의미를 가진다라고 함은 메타데이터(metadata)[각주:1]를 뜻한다. 메타데이터가 되기 위해서는 semantic tag가 필요하다. 

 

Semantic Tag란?

검색 엔진에 노출되기 위해서는 검색 키워드에 대응하는 인덱스가 존재해야하는데, 이러한 인덱스를 수집하는 기준이 바로 HTML의 semantic tag들이다.

HTML의 수많은 tag들중, img, header, main, body, footer 등이 바로 semantic tag들이다.

 

사이트에 이미지를 넣는 두 가지 방법

<img> VS <div> + background-image[각주:2]

두 가지 방법 모두 화면에 이미지를 구현한다는 점에서는 동일하지만, semantic 관점에서 차이가 있다. 

<img> 태그 - 의미를 가지고 있는 사진

<img alt="HTML" height="280" width="180" src="https://XXX">

1. 회사 로고, 인물 프로필 사진 등 콘텐츠 정보와 연관이 있는 이미지를 쓸 때 (alt 속성 함께 사용)

2. 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때 (마찬가지로 alt 속성 함께 사용)

3. 페이지 프린트시 이미지가 함께 나오도록 할 때

<div> 태그 + background-image 속성을 쓸 때 - "의미가 없어도 되는 사진"

// html
<div class="bg-img">배경이미지</div>
// CSS
.bg-img {
  /* background-color: yellow; */
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  width: 300px;
  background-size: 100%;
}

1. 이미지가 콘텐츠의 일부가 아닐 때

2. 이미지 스프라이트를 이용할 때

3. 말그대로 웹문서의 배경을 채우기 위한 용도일 때

4. 페이지 프린트시 이미지가 나오지 않게 할 때

 

 

  1. 메타데이터(metadata)는 데이터(data)에 대한 데이터이다. 이렇게 흔히들 간단히 정의하지만 엄격하게는, Karen Coyle에 의하면 "어떤 목적을 가지고 만들어진 데이터(Constructed data with a purpose)"라고도 정의한다.(wikipedia) [본문으로]
  2. 불타는 키보드 [본문으로]
반응형
저작자표시 비영리 변경금지

'Programming > HTML, CSS' 카테고리의 다른 글

[HTML/CSS]inline, block, inline-block 개념 비교  (0) 2021.11.17
[HTML/CSS]script 태그의 위치에 따른 차이점  (0) 2021.11.11
728x90

script 태그란?

<script> 태그는 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용

 

[references]

http://tcpschool.com/html-tags/script

 

script 태그의 위치에 따른 차이점

1. script 태그가 head 태그 안에 있을 때

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script src="test.js"></script> // script 태그가 head 태그 안에 위치
  </head>
  <body></body>
</html>

script 태그가 head 태그 안에 있을 때

js 파일 사이즈가 크거나, 인터넷 환경이 느릴 때 사용자가 웹사이트를 로딩하는데 시간이 오래 걸린다.

따라서 script를 head 태그에 포함하는 것은 좋은 선택은 아니다. 

 

2. script 태그가 body 태그의 제일 하단에 위치해 있을 때

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <script src="test.js"></script> // script 태그가 body 태그의 하단에 위치
  </body>
</html>

html이 모두 준비가 된 후에 javascript를 실행한다. 

사용자가 기본적인 html 컨텐츠를 빨리 볼 수 있는 장점이 있지만, 해당 웹사이트가 javascript에 의존적이라면 의미 있는 웹페이지를 보기까지 시간이 오래 걸린다. 

 

3. script 태그가 head 태그 안에 있지만, async 속성 값을 사용한 경우

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script async src="test.js"></script> // async 속성값을 사용
  </head>
  <body>
    <div></div>
  </body>
</html>

async 속성을 사용할 경우, 위 사진과 같이 html 파싱과 javascript 다운로드를 병렬로 수행한다. 다만 javascript 다운로드가 완료되면 html 파싱을 중지하고, 다운로드된 javascript 파일을 먼저 수행한 후, 나머지 html을 파싱한다. 

 

병렬로 진행되기 때문에 웹사이트를 불러오는 속도를 조금 빠르게 할 순 있지만, html이 파싱되기 전에 javascript가 동작하므로 javascript에 html과 상호작용하는 코드가 있을 경우 제대로 작동하지 않을 가능성이 있다.

 

4. script 태그가 head 태그 안에 있지만, defer 속성값을 사용한 경우

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script defer src="test.js"></script> // defer 속성값을 사용 
  </head>
  <body>
    <div></div>
  </body>
</html>

async와 동일하게 html 파싱중에 javascript 다운로드가 병렬적으로 진행된다. 그러나 async와 다르게 html 파싱이 모두 종료된 후에 javascript 명령을 수행한다.

 

[references]

드림코딩 : script async와 defer의 차이점

반응형
저작자표시 비영리 변경금지

'Programming > HTML, CSS' 카테고리의 다른 글

[HTML/CSS]inline, block, inline-block 개념 비교  (0) 2021.11.17
[HTML/CSS]Semantic Web과 Semantic Tag 이해하기  (0) 2021.11.16

+ Recent posts

티스토리툴바