[TIL-102] 위코드 1일차: HTML&CSS replit 1~13

HTML

 

blockquote

개념

처음 보는 태그인데, 인용구문을 넣는 태그라고 한다. 인용구문이라는 특수한 기능을 하는 태그라서 그런지 브라우저가 자동으로 양쪽 여백을 넣어준다.

 

alt

개념

img 태그에서 이미지 주소에 오류가 있어서 뜨지 않을 때 보여줄 텍스트를 입력하는 속성이다.

 

---

CSS

 

indent

개념

텍스트를 문단 시작 위치에서 원하는 만큼 들여쓰고 싶을 때 쓸 수 있는 "들여쓰기" 기능이 있음을 알게 되었다. 이전에는 띄어쓰기(space 공백)을 여러 번 입력해봤지만 적용되지 않았다. html의 태그 내에서는 스페이스로 공백 추가하기(들여쓰기 등)는 물론, 엔터로 줄바꿈도 할 수 없는 것 같다. 하지만 문단 시작 시 얼마간 공백을 주기 위해서는 text-indent라는 들여쓰기 속성을 이용하면 된다.

사용법

.indent {
	text-indent: 30px;
}

pixel 단위로 들여쓸 정도를 지정할 수 있다.

참고:  

앞에서 말했듯, 스페이스로 들여쓰기가 안되었던 이유는 html 태그 내용 안에서 연속된 스페이스는 한 개로 인식되기 때문이다. 따라서 스페이스 한 개를 초과하는 공백이 필요할 땐 스페이스를 의미하는 " "를 입력해야 한다.

 

box-sizing

개념

박스의 크기는 padding과 border 두께 등을 포함하여 결정되기 때문에 width와 같지 않다. 그래서 이전까지 padding과 width, border을 더한 값을 계산해가면서 박스를 만들었다. 그렇게 원하는 크기가 있을 때, width만으로 고정된 크기의 박스를 만들기 위해서는 box-sizing이라는 속성을 이용한다. box-sizing 값을 border-box로 해두면 박스의 크기가 width에 따라 고정되고, padding이나 border을 줄 경우 박스 크기를 유지하면서 적용된다.

사용법

* {
  box-sizing: border-box;
}

모든 요소에 box-sizing을 boder-box로 적용해둔 경우.

 

 

---

ASSIGNMENT

 

Semantic Web과 Semantic Tag

개념

시맨틱 웹은 컴퓨터가 이해할 수 없는 자연어로만 의미가 나타나있는 것이 아니라, 그 자체로 의미를 담은 태그를 사용함으로써 컴퓨터가 웹의 내용을 의미적으로 보다 잘 이해할 수 있는 웹이다. 일반 웹 상태에서는 컴퓨터가 웹 사이트의 코드가 의미적, 관계적으로 어떤 구조를 띠고 있는지 전혀 이해하지 못하기 때문에 무분별하게 나열된 데이터를 분석할 수 없다. 이에 반해, 시맨틱 웹은 컴퓨터가 데이터를 이해할 수 있게 함으로써 필요한 데이터를 추출하고 가공하는 데 더 효과적이다.

시맨틱 태그는 특정한 의미와 기능을 담고 있는 태그이다. <div>와 같은 일반적인 태그는 컴퓨터에게 태그의 내용이 어떤 의미를 담고 있는지에 대한 정보를 줄 수 없다. <div id="header"></div>와 같은 식으로 나타내면 html 코드를 읽는 사람은 이 div가 헤더의 역할을 하고 있음을 알 수 있지만 자연어를 이해할 수 없는 컴퓨터는 알 수 없다. 이때 <header> 태그를 사용하면 컴퓨터도 해당 태그 안의 내용이 헤더의 의미를 갖고 기능함을 알 수 있다.

<em>은 <i>와 같이 시각적으로 텍스트를 이탤릭체로 표현하지만 시맨틱 태그로서 강조의 의미를 갖기도 한다. <strong>도 <bold>와 같이 시각적으로 텍스트를 굵게(볼드체) 표현하지만 강조의 의미를 갖는 시맨틱 태그이다.

질문

사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.

• 태그를 사용하는 경우 html에 img 태그를 삽입함으로써 가능하고, background-image 속성을 추가하는 경우 css에서 배경 이미지를 적용할 html 태그에 해당 속성을 작성하면 된다.
• 근데 이 두가지 방법을 혼용하면 화면에 보이는 이미지가 html과 css 중 어디에서 작성된 것인지 확인하기 어렵다는 문제가 있다. 브라우저에서 개발자 도구를 열어야 가능하다.
• 보통은 html의 기능이 사이트의 뼈대, 내용을 담는 것이기 때문에 이미지 자체가 내용이 되는 경우 태그를 사용하는 방법이 더 적합하다. 하지만 이미지가 핵심적인 의미로 기능하는 게 아니라 텍스트 등이 다른 내용이 담긴 요소에 꾸밈을 위한 목적으로 이미지가 사용될 경우 background-image 속성을 사용하는 게 적합하다.
• 시맨틱 웹 공부 후 추가) 시맨틱 웹을 구현하기 위해서는 이미지가 그 자체로 내용적 의미를 가질 때 img 태그를 사용하여 웹이 그 의미를 알아채게 하는 것이 좋다. 하지만 이미지가 시각적인 아름다움을 위해 쓰인 경우 따로 시맨틱 태그를 사용하여 의미가 있는 이미지라고 헷갈리게 하지 않고 css 방식을 사용하는 것이 좋다.