TIL 05 | HTML, CSS

dk.han·2021년 7월 26일
CSSTILhtml
0
post-thumbnail

HTML

  • Hyper Text Markup Language의 약어로 웹브라우저 내에서 보여지게 디자인된 문서이다.
  • 웹 페이지의 뼈대 구축하는 역할을 하는데 즉, 구조를 설계하는 언어이다.

Tag

  • HTML element 라고도 하며, HTML document를 구성하는 기본 단위이다.
  • 다양한 종류의 tag들을 활용하여 정보들을 나타낼 수 있다.

Semantic Tag VS Non-Semantic Tag

Semantic은 "의미론적인"이라는 뜻을 가진 단어이다. 즉 semantic Tag란 개발자나 웹브라우저에 명확한 의미를 전달하는 Tag를 뜻한다.
div 태그는 태그 안에 들어간 내용의 의미를 정의하기 위해 class속성의 naming을 이용했다. 즉 class가 없다면 무엇을 의미하는지 직관적으로 알아보기가 힘들다. 하지만 header 태그는 class 속성이 없어도 직관적으로 header를 정의하고 header 부분에 쓰일 정보 라는 것을 알 수있다.

// Non-Semantic Tag
<div class = "header">
  <span> 나의 개발 블로그 </span>
</div>

// Semantic Tag
<header>
  <h1> 나의 개발 블로그 </h1>
</header>

Semantic Tag를 사용한다고 해서 위의 그림처럼 레이아웃이 만들어 지는 것은 아니다. 레이아웃은 CSS를 통해 만들 수 있다.
Semantic Tag를 사용해 만든 웹을 Semantic Web이라 부른다. 이는 브라우저가 웹사이트를 분석할 때 header, nav, fooder, main과 같이 영역이 구분되어 있는 문서를 본다면 어떤 부분이 중요한 영역인지 그리고 중요한 정보인지 쉽게 구분 할 수 있다. 때문에 이러한 웹사이트는 검색엔진에서 검색 결과의 상위에 노출 되게 된다. 즉 브라우저가 개발자가 생각하는 중요하고 가치있는 정보가 무엇인지를 쉽게 구별 할 수 있게 된다.

Box model을 통한 tag 관리

이는 naming하기가 쉽기 때문에 Tag를 종류별로 정리하기가 쉽다.
수많은 HTML Tag들이 존재하는데 이들을 크게 2종류로 구분이 가능하다.

  • Box Tag ( 사용자에게는 보여지지 않으나 섹션이 나눠지는 Tag )
<header> <section> <footer> <article>
<nav> <div> <aside> <span> <main> <form>...등
  • Item Tag ( 사용자에게 보여지는 Tag )
<a> <button> <input> <label>
<img> <video> <audio> <map> <canvas> <table>...등

block / inline

HTML 뿐만아니라 CSS에서도 굉장히 중요한 개념이다.
block 형태를 가지는 Tag들은 브라우저에 노출 될 때 한줄에 하나씩만 놓이게 된다.
반대로, inline 형태를 가지는 Tag들은 공간이 허용하는 한 Tag 옆에 또 다른 Tag가 놓일 수 있다.

Attributes (속성)

a 태그의 href 나 target, 그리고 img 태그의 src 와 같이 어떠한 기능을 담당해주는 것들을 atrribute (속성)이라고 부른다. 태그마다 가지는 속성은 다르므로 태그를 검색할때 항상 속성도 같이 검색하여 쓰는 것이 중요하다.

<a href="https://www.google.com/" target="_blank">Here</a>
<img src="123.jpg" />

CSS (Cascading Style Sheet)

HTML이 뼈대를 담당한다면 CSS는 그 위에 살을 붙여주는 역할을 한다.
디자인적인 요소는 모두 CSS로 처리한다고 생각하면 된다.
웹에 보여지는 디자인은 다음과 같은 우선순위를 가진다.

  1. 개발자가 적용한 스타일 즉 CSS file ( Author style )
  2. 사용자가 적용한 스타일 ( User style )
  3. 브라우저가 기본으로 가지고 있는 스타일 ( Default style of browser)

CSS Selectors

  • Universal Selector (*) : CSS file에 아래와 같이 적어 준다면 모든 태그에 color:green이 적용된다.
* {
  color: green;
}
  • Type Selector : 원하는 Tag에만 적용하고 싶을 경우 Tag 이름을 적어준다.
span {
  color: red;
}
  • Id / Class Selector (# / .): 특정 Id / Class 이름을 가진 곳에만 적용 하고 싶은 경우. 
#loginForm {
  color: blue;
}
.className {
  backgroun-color: yellow;
}
  • State / Attribute Selector (: / []): 특정 상태나 속성을 가진 곳에만 적용 하고 싶은 경우
botten:hover {
  color: red;
  font-size : 20px;
}
a[href] {
  backgroun-color: green;
}

CSS layout

display

HTML 태그들은 기본적으로 inline이나 block의 속성을 가지지만 CSS를 통해 속성을 바꿀 수 있다.

  • inline
  • inline-block
  • block

세가지 형태로 나뉘며 HTML에서 그림으로 설명하였지만 너무 중요하기 떄문에 한번 더 그림을 첨부한다.

position

원하는 방향으로 item을 이동시키고 싶을때 사용한다. Default 값은 static이기 때문에 position을 바꾸지 않으면 이동하지 않는다.

ex) left : 20px, top : 20px 만큼 이동하려 한다면

  • relative
    원래의 위치 값에서 상대적으로 left : 20px, top : 20px 만큼 이동
  • absolute
    내 아이템이 담겨있는 box( 부모 box ) 안에서 left : 20px, top : 20px씩 이동.
  • fixed
    box안에서 완전히 벗어나 webpage 단위에서 이동.
  • sticky
    원래의 위치를 벗어나지 않지만, 스크롤링 되어도 사라지지 않고 원래 있던 위치에 그대로 붙어 있음.

Flex Box

Container lever에 적용할 수 있는 속성값과 각각의 Item level에서 적용 할 수 있는 속성값들이 존재.
이것을 구분하여 사용한다면 보다 쉽게 사용 할 수 있다.

속성값들을 알아보기 전에 main-axis와 cross-axis를 구별해 보자

main-axis VS cross-axis

  1. item들이 수평(row 방향)으로 정렬되어 있다면 수평방향이 중심축이 된다.
  2. item들이 수직(column 방향)으로 정렬되어 있다면 수직방향이 중심축이 된다.
    그림으로 쉽게 이해하고 싶다면 밑의 링크를 참조하도록 하자
    https://dev.to/virensuthar/get-started-with-flexbox-3in5

중심축을 이해하는 것은 justify-content 와 align-items를 사용할 때 굉장히 중요하다.

Container level 속성

  • display
    container level에서 display:flex를 해주면 flexbox가 됨.
  • flex-direction
    row(default), row-reverse, column, column-revers
  • flex-wrap
    nowrap (default) , warp, wrap-reverse
  • flex flow
    flex flow : row wrap; 처럼 flex-direction과 flex-wrap의 속성을 동시에 적용 가능.

item들을 어떻게 배치할건지 선택하는 속성들

  • justify-content
    main-axis에서 item들을 어떻게 배치할건지 결정
    flex-start(default), flex-end, center, space-around, space-evenly, space-between
  • align-items
    cross-axis에서 item들을 어떻게 배치할건지 결정
  • align-content

item level 속성

  • order
    아이템에 순서를 부여해서 배치를 바꾸는 기능을 함.
  • flex-grow
    container(화면)의 크기가 늘어날 때 item들의 크기를 설정.
  • flex-shrink
    container(화면)의 크기가 줄어들 때 item들의 크기를 설정.
  • flex-basis
  • align-self
    아이템별로 정렬이 가능한 속성, 개별이동이 가능.

Flexbox의 경우 그림으로 이해하는게 굉장히 중요하다. 여기 써놓은 글들은 내가 이해한 내용을 바탕으로 적어논 것이기 때문에 햇갈리면 항상 그림을 찾아서 이해하도록 하자.
Flexbox를 참고 할만한 site.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox를 이해하기 위한 간단한 게임
https://flexboxfroggy.com/

profile
dk.han
-
이전 포스트

Today I Learned - 04

다음 포스트

Today I Learned - 06

0개의 댓글