(HTML-CSS) 4. 노트

8205 단어 htmlCSSCSS

서론

이번 글은 제가 공부하며 주의깊게 본 적 없던 것들에 대한 내용입니다.

주로 HTML tag에 대한 내용입니다.

사용빈도는 높으나, 무슨 의미였는지 정확히 몰랐던 것 혹은 처음 사용해본 것들에 대해 적어보겠습니다.

1. !DOCTYPE, DTD, 문서형 정의

<!DOCTYPE html> 은 문서가 어떤 버전으로 작성되었는지 나타내는 코드였습니다.

해당 코드는 tag 형식을 띄지만, tag는 아닙니다.

현재에 이르러 HTML 5는 DOCTYPE code의 중요성을 강조하고 있지 않습니다.

그러나 이전 버전, 혹은 다른 문서형식에서는 다양한 내용들을 기입하는 것으로 알려져 있습니다.

위키백과 - DOCTYPE

매일 작성하던 HTML 파일의 최상단에 위치했었는데, 정확하게 알고 넘어가자는 생각을 한 적은 딱히 없던 것 같습니다.

2. <meta name="viewport" content="width=device-width">

해당 태그는 애플에서 자사 제품의 safari 브라우저 viewport 문제를 극복하기 위해 개발한 태그입니다.

현재는 다양한 브라우저에서도 채택하여 사용하고 있으며, 해당 태그는 모바일이나 다른 전자기기에서 우리가 만들어낸 웹을 다양한 브라우저로 볼 때 해당 HTML 문서의 가로 길이를 장치 너비에 맞춘다는 의미입니다.

3. border

기존에 border : 1px solid black 으로만 작성했었는데, 사실은 이렇게 세부적으로도 조정할 수 있었습니다.

  border-width: 1px;
  border-style: solid;
  border-color: black;
  /*  = border : 1px solid black ; */

4. font family

font-family는 폰트 스타일을 지정하는 속성입니다.

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

Georgia, "Times New Roman", Times, serif 값의 의미는

  1. 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용
  2. Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
  3. 이것도 지원되지 않으면 Times을 적용
  4. 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.

의 일련의 과정을 거쳤던 것이었습니다.

매번 Google fonts 에서 가져오느라 몰랐는데, 이렇게 알고 보니 신기하네요.

또한 "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.

사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열합니다.

가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트입니다.

5. hsl

hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현합니다.

ex : hsl(4, 82%, 57%)

처음 보는 색상표현이 마냥 신기했던 것 같습니다.

6. <span>

<span>은 inline-element이므로, 정렬과 줄바꿈이 가능하지 않습니다.

flex를 이용해서 항상 div의 정렬기준을 변경했었다보니 이런 것도 몰랐던 것 같습니다.

공식문서를 활성화해야겠네요.

7. blockquote

blockquote - HTML 내 인용문 tag

Semantic HTML 을 적용하기 위해서는 다양한 tag에 대해 고민해야 할 것 같습니다.

기존에 p만 사용했다면, 다음엔 그래도 다른 tag를 다양하게 사용해볼까 합니다.

물론, 제 HTML 문서가 구식으로 보일지도 모르겠습니다.

8.   , <br>

&nbsp 의 경우 처음보는 방식의 text 변경이었습니다.

한 칸 더 띄우는 기능을 사용할 일이 없었기도 했고, 애매하다 싶으면 대부분 <br> 태그로 공간을 확보한 경우가 많았습니다.

앞으로도 쓸 일이 있을지는 모르겠습니다.

9. Box-sizing은 전역에 설정하는 것이 좋다?

처음 안 사실이었습니다.

기존에는 레이아웃을 구성할 때, padding이 들어가는 flex에만 넣어주었던 것 같은데, 이제는 조금 편하게 할 수 있겠다는 생각이 들었습니다.

10. 클래스명(.className) tag(span 등)로도 select가 된다?


.className p{
background-color : white;
}

등과 같은 표현이 가능하다는 사실을 이번에 알았습니다.

진작 알았더라면 pseudo-selector만을 사용하지 않았을텐데... 하는 생각이 들었습니다.

11. inline-id-class 우선순위

inline styling: 1000점
id: 100점
class: 10점
tag: 1점
tag < class < id < inline css

기존에 알고 있던 내용이었는데, 이번에 처음 수치화해서 본 것 같습니다.

아무래도 inline은 거의 사용하지 않는데다, id는 js에서, class는 css에서 주로 사용하게 되는 것 같습니다.

그렇기에 제 css 문서는 class로만 가득합니다.

그럼에도 우선순위를 고려하여 구성하기 때문에, 가장 우선적으로 적용되어야 할 style 속성이 있다면 그 때에 id를 사용합니다.

class로 먼저 구성하고, 나중에 점검할 때 id를 추가적으로 이용하는 방법이 항상 옳은지는 고민을 좀 해봐야 할 것 같습니다.

현재까지는 큰 문제가 없었으니, 우선순위에 대해 인지하고 있는 수준으로만 넘어가겠습니다.

12. img, (css)background-image

해당 내용은 지속적으로 생각할 부분인 것 같습니다.

Semantic HTML에 해당하기에 넘어가겠습니다.

13. 아무 태그나 사용해도 결국은 CSS를 통해 얼마든지 성질을 바꿀 수 있습니다.

당시에 멋진 말이라고 생각해서 적어둔 것 같습니다.

HTML에서 태그의 역할이 중요한가? 생각하던 순간들이 많았기 때문입니다.

그러나 다음에 제가 HTML 페이지를 작업해야 한다면, 이전보다는 태그를 더 신경쓰지 않을까 생각합니다.

CSS로 충분히 바꿀 수 있다는 것을 알고 있음에도 그렇게 하는 것은 스스로에게 더 의미가 있다고 생각합니다.

14. Table

<table>
    <tr>
      <td>Row 1, column 1</td>
      <td>Row 1, column 2</td>
    </tr>
    <tr>
      <td>Row 2, column 1</td>
      <td>Row 2, column 2</td>
    </tr>
  </table>

태어나서 처음 HTML로 테이블을 만들었었습니다.

이전에는 img 파일로 불러오는 방식으로 표를 구현했었는데, 성능 문제를 해결하기 위해서는 아무래도 HTML 내부에서 만드는 편이 낫지 않을까 생각합니다.

유저 입장에서 로딩이 길어지는 사이트를 예쁘게 보기는 어렵기 때문입니다.

이전에는 CSS link방식을 개선했었는데, 추후 사용된다면 보다 더 나은 성능을 제공하는 사이트가 될 것 같습니다.

그래도 표를 만드는 것은 상당히 번거롭고 코드가 지저분해지니 img로 돌아갈지도 모르겠습니다.

15. float

float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다.

이전 글에 설명이 자세히 되어 있으니, 넘어가도록 하겠습니다.

마치며

생각보다 새로운 것을 많이 알게되었습니다.

이전에 자주 사용하지 않았기에 몰라도 된다는 생각을 했던 것은 아닌데, 돌아보면 그랬던 것 같습니다.

효율적인 학습을 위해 반복하며 자주 사용하는 태그들을 사용해봤으니, 이제는 새로운 것들을 우선적으로 사용해봐야 하지 않을까 생각하는 계기가 되기도 했습니다.

아무래도 학생이니 많은 것을 알고 싶네요.

여담이지만, 저는 깊은 수준으로 무언가를 다루려면 더 많은 경우의 수를 계산할 수 있는 많은 지식이 필요하다고 생각합니다.

그러니 별 것 아닌 HTML-CSS 노트임에도 한 걸음 나아가는 계기라고 생각하겠습니다.

다음 글은 Javascript 노트로 뵙겠습니다.

읽어주셔서 감사합니다.

[령과 3년도 가을] 정보처리 안전 확보 지원사 시험 체험기!!
Angular/Webpack 청크 크기 제한

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage