Til 1일차
TIL

Til 1일차

TIL 1일차 - this에 대해 작성한 2개의 글처럼 작성하려면 시간이 많이 소요되기 때문에, TIL에서는 당일 새롭게 알게된 내용들을 간략하게 정리하고 어느정도 공부가 축적되면 단일 주제에 대해서 작성하도록 하자

이번주에는 HTML과 CSS를 공부한다. 공부자료는 크게 2가지 인데, 하나는 ‘모던 웹을 위한 HTML5+CSS3 바이블 3판(윤인성 저)이고 다른 하나는 코드 스피츠 CSS Rendering 강의 6개이다. HTML과 CSS를 사용해왔지만 단일주제로 HTML과 CSS만을 공부해 보는 것은 이번이 처음이다. 그리고 역시나 코드 스피츠 강의는 빡세다…

새로 알게 된 내용

HTML

  1. 웹 표준에서 지원하지 않는 태그
1
<food>My Favorite Food</food>

웹 브라우저에서는 웹 표준에서 정하지 않은 태그도 정상적으로 출력한다. 이 때문에 루비 태그를 지원하지 않는 브라우저에서도 루비 태그를 사용한 html 문서를 출력할 수 있다.(물론 태그가 브라우저에게는 아무 의미가 없기 때문에 원하는대로 작동하지 않는다)
  1. select 태그

form 양식에 속해 있는 select 태그는 일반적으로 잘 사용하지 않는다. 이유는 ui가 데스크탑에서 예쁘지 않는데 ui양식을 수정할 수도 없기 때문이다. 그래서 많은 웹 페이지들의 경우 JS과 div를 이용해서 select 기능을 직접 만든다.

  1. CSS selector가 존재하는 목적

selector가 존재하는 목적을 다른 CSS 사용자들은 당연히 알고 있었겠지만, 나는 스스로 명확하게 한 문장으로 설명을 못했다. selector로 특정 element의 스타일을 바꾸는 작업을 계속 했음에도 selector가 뭔지 한 문장으로 설명을 못했다.(좀만 생각해보면 쉽게 답할 수 있는데…) 이제 selector가 존재하는 이유를 한 문장으로 설명할 수 있게 되었다.

특정한 HTML 태그를 선택할 때 사용한다.

  1. 전후 문자 선택자

간혹 웹페이지 소스 코드를 확인해 보다가 ::after 혹은 ::before가 나올 때 해당 선택자의 역할을 모르지만 검색해보지 않았었다. 이제 이 두가지 선택자의 기능을 알게 되었다. 이 두가지 선택자는 태그 전,후의 text를 선택하는 전후 문자 선택자로서, 선택자 중에서 유일하게 content 속성을 사용할 수 있다.(js를 사용하지 않고도 태그 내의 content 값을 바꿀 수 있다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...

<style>
  p::before{
    content: "📘. "; 
  }
  p::after {
    content: " - " attr(data-page) " page"; }
  }
  p::first-letter {
    font-size: 3em;
  }
</style>

...

<p data-page="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

// 모던 웹을 위한 HTML5+CSS3 바이블 3판, 윤인성 저, 145p, 예제 일부 수정

위의 예제의 경우 p태그 앞에는 📘. 가 추가로 붙게 되고 p태그 뒤에는 p태그 속성 data-page(data-를 붙인 사용자 정의 속성)값 10을 받아서 - 10 page가 붙게 된다. 마지막으로 p태그 컨텐츠의 첫번째 문자 L(Lorem의 ‘L’)이 48px(기본 폰트 사이즈 16px * 3)로 커진다.

  1. line-height. text-align 속성

text-align은 block 요소 content의 수평 정렬에 사용하는 속성이다. 그런데 block 요소 content를 위한 수직 정렬을 위한 속성이 없다. line-height 속성은 block 요소 content의 수직 정렬을 우회적으로 가능하게 해준다.

  1. 웹 표준 역사, normal flow, float, overflow

코드 스피츠에서는 웹 표준 역사(거대 기업들의 땅따먹기)와 주의 깊게 봐야 할 커뮤니티를 배웠고, normal flow와 float, overflow 일부를 배웠다. 위의 내용들은 전부 새로 배운 내용이지만 정리하기 위해서는 단일 주제를 작성할 만큼의 노력이 필요하기 때문에 이후 여유가 있을 때 작성하기로 하겠다.(매우매우매우매우 유익한 수업이었다.)

2020/6/15 - 1st TIL
#

댓글

최근 글

카테고리

×