HTML, CSS, Semantic Web

open_h·2020년 11월 16일
0

Today I Learned

목록 보기
1/4
post-thumbnail

개인 학습을 위해 만들어진 글입니다.

TIL 201116

HTML

Intro

HTML(Hypertext Markup Language)는 웹 페이지를 만드는 언어로 HTML을 사용하여 웹페이지의 구조를 형성할 수 있다. 하나의 언어이기 때문에 언어의 문법에 맞추어 작성하여 .html 확장자 파일을 만들면 브라우저로 해당 파일을 확인할 수 있다.

tag

웹페이지의 구조를 나타내기 위해 HTML은 여러가지 태그tag들로 구성되어 있다. 태그 안에는 내용content을 넣으며 웹 페이지에는 내용 부분만 보여진다. 아래 코드에서는 "구글 링크"란은 내용만 브라우저에 나타난다. 시작 태그<태그이름>와 끝 태그</태그이름>를 요소element라고 하며, 끝 태그가 필요 없는 것은 태그 그 자체가 요소가 된다.

<a class="my-class-name" id="my-id" href="https://www.google.com">구글 링크<a>
<img src="img/hahahahahaha.png">

태그 안에 속성attribute은 시작 태그(앞쪽 태그)에 위치하여 한 태그에 여러 속성을 지정할 수 있다.

HTML structure

HTML의 구조는 아래와 같다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

HTML 파일의 가장 첫줄에 위치한 선언문, 문서형식 선언으로 태그는 아니다. 이 선언문은 브라우저에게 HTML의 버전을 알려주는 역할을 한다. 현재는 HTML5 버전을 가장 많이 사용한다.

html

문서형식 선언을 제외한 모든 요소들은 이 태그로 감싸져 있어 브라우저 입장에서는 html의 시작을 알게 된다.

head

이 태그의 내부에는 사이트에 대한 제목, 설명, 부가 정보, 기술적 내용이 들어가는 부분으로 <meta> , <title> 등이 들어간다.

body

head태그 다음에 위치하며 화면에 보여질 각종 태그들이 body태그 내부에 위치하게 된다.

자주 사용하는 태그

h1, h2, h3 ...

주로 제목같은 텍스트를 보여줄 때 사용하는 태그로 숫자가 올라갈 수록 글자 크기가 작아진다.

  • a

href attribute에 주소값을 넣어 해당 url로 접속하게 만들어주는 태그이다. 사용자 입장에서 기존 탭이 아닌 새로운 창에서 href의 웹 페이지를 열고 싶다면 target="_blank" 로 attribute를 추가해주면 된다.

  • img

이미지 태그로 src attribute에 이미지의 url을, alt attribute에는 이미지가 어떠한 사유로 뜨지 않았을 때 이미지 대신 보여줄 텍스트이다.

  • span

주로 텍스트를 넣어주며 inline요소이다.

  • p

주로 텍스트를 넣어주며 paragraph의 줄임말로 block요소이다.

  • div

자체적으로 의미가 있지는 않지만 웹 사이트에서 섹션을 나눌 때 사용하며 division의 줄임말이다. 비슷한 부분끼리 그룹지어 디자인 레이아웃을 분리시킬 때 사용한다.

CSS

Intro

CSS(Cascading Style Sheets)는 HTML로 구조화된 정보에 보기 좋게 스타일을 입히는 것이다. 작성한 CSS를 HTML에 적용하는 방법은 3가지가 있다.

  1. 인라인 스타일(태그에 style attribute)
  2. style 태그
  3. css 파일에 작성(link 태그로 해당 .css 파일 적용)

CSS Selector

  • tagName { ... } 태그 선택

  • .className { ... } 클래스 이름으로 선택

  • #idName { ... } id로 선택

  • div .container li.first-list { ... } div태그 내부의 container class 내부의 li태그의 first-list 태그를 선택

우선 순위

selector 표현마다 우선순위 점수가 있어 점수에 따라 우선으로 적용되는 스타일이 바뀐다. 그러나 실질적으로 개발자 입장에서는 최대한 중복을 피할 수 있게 작성하며, 점수의 차이가 큰 tag < class < id < inline css 순으로 스타일이 우선된다는 것을 알고 있으면 된다.

자식, 형제 선택자

자식 선택자 > , 인접 sibling 선택자 + , general sibling 선택자 ~ 를 사용할 수 있다.

.parent-class:hover > childtag {
  /* childtag의 css 속성 변화 */
  display: none;
}

div.my-class + div.your-class {
  /* ... */
}

속성 선택자

myTag[attribute='value'] {
  /* ... */
}

Font, Text Style

/* Font Style Example */
#title {
	font-family: Georgia, "Times New Roman", Times;
  font-size: 50px;
  font-weight: bold;
  font-style: italic;
  color: pink;
}

/* Text Style Example */
.myTextStyle {
  /* 텍스트 정렬 */
  text-align: left;
  text-indent: 50px;
}

Margin, Padding, Border

p.myBox {
	margin: 10px 10px 20px 30px;
	padding: 5px 5px 10px 15px;
  border: 3px solid #333;
}

margin과 padding의 경우 모두 차례대로 top, right, bottom left 순으로 그 크기를 나타낸다. margin-left, padding-bottom 과 같은 property를 사용하면 따로 지정할 수도 있다.

border의 경우 margin이나 padding과 같이 순서는 상관 없지만 coding convention에 따라 border: 두께 스타일 색 으로 나타낸다. text-decoration 을 사용하여 밑줄을 만든다면 해당 밑줄에 대한 스타일을 커스터마이징 하기 어렵기에 텍스트에 밑줄을 구현할 때 border-bottom 을 사용하여 밑줄 스타일을 구현하는 것이 좋다.

box-sizing: border-box

디자인 시안에서 어떤 컴포넌트의 크기를 300px로 생각하고 있는데 padding, border, margin을 적용한다면 각각의 크기를 고려하여 코딩하여야 하는 불편함이 생긴다. 따라서 아래와 같은 CSS property를 사용한다면 width값을 고정으로 주어졌을 때(디자인 시안대로)는 그 값기준으로 내부에 padding을 외부에 margin을 주게 된다. 따라서 실무에서 꼭 적용하여야 하는 property라고 볼 수 있다.

* {
	box-sizing: border-box;
}

상속, 그룹

CSS에서 상속Inheritance이란 부모의 스타일이 자식에게도 적용된다는 의미이다.

CSS에서 그룹grouping이란 한 번에 여러 스타일을 지정할 때 사용하는 방법으로 아래와 같다.

#my-id, p.my-class, .pizza {
	color: #666;
}

Semantic Web, Semantic Tag

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

이미지 및 정의 출처 : https://poiemaweb.com/html5-semantic-web

  • 태그 이름에서는 전혀 content의 의미를 알 수 없는 non-semantic 요소 : <div> , <span>
  • 태그 이름에서부터 content의 의미를 알 수 있는 semantic 요소 : <form> , <table> , <article>

HTML5에서 추가된 header, section, aside, article, footer 등 의 시멘틱 태그를 사용하여 HTML을 구성한다면, 웹 페이지에 있는 데이터를 단순히 div 태그로 나뉘어 진 것이 아니라 태그 이름에서부터 그 의미를 알 수 있어 HTML을 의미를 가지는 관련성 있는 정보들끼리 묶어 만들 수 있다. non-semantic 요소를 지양하고 semantic 요소를 사용하여 사용하여 얻는 이점들이 있다.

  1. 검색 엔진은 로봇이라는 프로그램으로 HTML코드를 분석하는데 이 때 로봇은 시맨틱 태그를 통해 웹 페이지의 의미를 분석할 수 있게 된다. 이런 의미에서 semantic tag를 사용하여 만든 웹 페이지가 많이 쌓였을 때, 시맨틱 웹의 의미가 더욱 부각된다.
  2. 태그 이름은 사람이 사용하는 자연어로 개발자 입장에서 요소의 의미를 더욱 정확히 드러낼 수 있어 코도의 가독성을 높이고 유지보수가 용이해지는 장점이 있다.

예를 들어 사이트에 이미지를 넣는다고 하였을 때, <img> 태그를 사용한다면 코드 자체에서 이미 이미지라는 정보가 담겨있다는 것을 나타낼 수 있으며 위 두 가지 장점이 적용된다. 하지만 non-semantic 요소인 divbackground-image 속성을 추가하여 사이트에 이미지를 넣는다면 위 두 가지 이점이 사라지게 된다.

profile
The only thing that interferes with my learning is my education.

0개의 댓글