1. HTML과 CSS의 역할

1-1. HTML란?

1. 웹페이지를 만들기 위한 언어이다.
2. 웹페이지의 구조를 잡을 수 있다.
3. HTML은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다.
4. 브라우저는 HTML파일을 토대로 어떻게 사용자에서 보여줄지 파악할 수 있다.

=> HTML은 웹페이지의 전반적인 구조를 잡고 그 구조를 토대로 사용자에게 어떻게 보여줄지 판단하기 위해 사용된다.

1-3. CSS란?

HTML의 테그들에 디자인을 입혀주어서 HTML을 더욱 예쁘고 보기좋게 꾸며 주는 역할을 한다.

css의 작성법이다.
작성법은 알고 있지만, 선택자라던가 속성이라던가 하는 단어가 익숙하지 않아 헷갈릴때가 있다.

2 HTML

• tag
  HTML의 tag는 기본적으로 <태그이름> 내용 </태그이름> 으로 구성되어 있다. 이 기본 구조 자체를 요소 라고 부른다.
  대부분의 태그는 시작과 끝 태그가 존재한다. 하지만 시작과 동시에 종료되는 태그도 존재한다.

• 속성

<a href="https://velog.io/@jxxwon"> 벨로그 </a>

a tag안에 있는 href같은 것들을 속성이라고 부른다.
tag 마다 적용할 수 있는 속성들이 달라진다. 이를 전부 외울 필요는 없고 필요할때마다 구글에 검색해보면 된다. 그러다 보면 차차 익숙해지고 저절로 머리속에 그려 질 것이다!!

• id
  id는 한 웹페이지당 딱! 하나만 가질 수 있다. 즉, 중복되는 id값을 가질 수 없다.
  id는 css에서 디자인을 주기 위해 사용하기보단 js에서 유용하게 사용된다.
  예를 들어, id 이름으로 요소를 찾아서 제목을 유동적으로 바꾼다거나, 새로운 데이터로 내용을 변경 할 수있다.

• class
  class는 id와 다르게 테그에 중복된 이름을 부여 할 수 있다.
  주로 css에서 디자인을 줄때 사용한다.

3. CSS

• font-family

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

폰트의 스타일을 지정하는 속성이다. 왼쪽부터 차례대로 흐르면서 사용가능한 폰트를 사용하도록 한다.
""를 사용하는 경우는 폰트 이름에 띄어쓰기가 되어 있을때 사용한다.

• text-align

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

처럼 사용가능하다. 말 그대로 텍스트를 정렬해주는 스타일이다.

텍스트 정렬 때 <span>과 함께 엮어 기억해야 할 것이 있다.
<span> 태그는 <div>와 달리 인라인요소이다. 만약 인라인 요소안에 text가 있다면 text 만큼만 영역을 차지 하기 때문에 text-align 스타일이 정렬되지 않는다.

• margin과 padding
  오늘 공부를 하다가 알게 되었는데, 지금까지 margin과 padding에서 잘못 알고 있던 점이 있었다.
  
  위 사진에서 가장안쪽 파란 부분인 요소는 273px이라고 적혀있다. 지금까지 나는 요소 자체의 가로 크기가 273px 이라고 생각했다. 그런데 사실 273이라는 숫자는 padding값도 합쳐진 가로 길이였다.

  • padding과 margin은 border을 기준으로 안쪽 밖으로 생각하면 쉽다.
    padding은 border 안쪽에 생기는 영역이다.
    margin은 border 외부에 생기는 여백이다.

• box-sizing

.new {
  box-sizing: border-box;
}

css에서 요소의 넓이와 높이를 균일하게 유지하도록 해준다.
박스의 크기는 위에서 봤다 사용자가 설정해주는대로 박스의 사이즈가 조정되는 것이 아니라 padding값이 같이 더해진다. 이것 때문에 나중에 웹페이지의 전반적인 밸러스가 무너지거나 할 수 도 있기때문에 이 속성이 필요하다.
이 스타일을 사용하게 되면 보이는대로 넓이 값을 줄 수 있게된다. (즉, width와 height는 padding과 border를 포함한 범위가 지정된다.)

4. Semantic Tag과 Semantic Web

HTML5이전에는 웹페이지들의 태그들의 대부분이 div와 같은 아무 의미 없는 태그들로 묶여 구조를 이루고 있었다면, HTML5로 들어와서는 header, nav, article, section, footer같은 태그들을 사용해서 태그 그 자체가 무슨 의미를 띄고 있는지 태그만 보고도 알 수 있도록 바뀌었다.
이로 인해 검색엔진들이 더욱 효율적으로 html파일을 파악하는 것이 가능해졌기 때문에 사용자들도 검색을 통해 본인이 원하는 정보에 더욱 쉽게 도달 할 수 있게 되었다.

이처럼 특별히 어떤한 기능을 수행하는것은 아니지만 자체적으로 의미를 가지고 있어 사용자,개발자,검색엔진등에게 자신들의 역할과 의미를 전달을 해주는 태그들을 semantic tag라고 한다.

semantic web은 semantic tag를 사용하여 웹페이지의 데이터마다 그 의미를 가지고 있어 사용자가 원하는 정보를 검색할 경우 더 빠르고 정확하게 접근이 가능한 웹이라고 할 수 있다.

- semantic tag
아무 의미 없는 태그가 아닌 태그 그 자체적으로 의미가 있어 html파일 분석이 더 쉽게 가능.


- semantic web
단순한 데이터 덩어리였던 웹페이지에서 벗어나 각각의 데이터들이 의미를 가지고 있는 웹.

이를 설명하기 좋은 예시 중 하나가 HTML에 이미지를 삽입하는 방법이다.
html에 이미지를 삽입하기 위해서는 <img> 태그를 이용하거나 <div> 태그 안에 background-image 속성을 추가하는 방법이 있다.

<img> 태그는 semantic tag이다. 그렇기 때문에 <img>라는 태그만 보아도 '이 태그는 사진을 보여주겠구나' 라고 인지 할 수 있다. 또한 <img> 태그 안에는 alt 속성이 있기 때문에 사진이 보이지 않아도 이 사진이 가지고 있는 의미가 무엇인지 추측이 가능하다.
그러나 <div>를 사용했을때, 이미지가 보이지 않게 되면 그 사진이 무엇을 의미했는지 추측 조차 불가능해지며 애초에 그 자리에 사진이 존재했다는 사실 조차도 모르게 될 수도 있다.

이러한 점을 고려했을때, Semantic Tag를 사용해서 html 파일을 구성하는것이 더 효율적인 방법이라고 할 수 있다.