221221 html/css + WIL II

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

 

지난 Mini Memo에 적어 뒀던 내용 + 기타 알게된 내용들을 적어보려한다.

마찬가지로 새로 알게된 내용, 다시 깨닫게 된 내용들이니

혹여 누군가 읽게 된다면 인사이트 얻는 정도로 생각해 주시길

 

---

HTML Symbols, Entities and Codes — Toptal Designers

가령 <div>이런식으로 HTML에 태그가 아닌 단어로 작성하고 싶을 때 사용하는 방법이다.

특수기호를 사용할 수도 있지만, HTML이 태그의 일종으로 생각해버려서

이상하게 출력되거나 하는 경우가 생길 수 있기 때문이다.

한번 쯤 기억하면 좋을 듯.

---

<meta /> in html

html문서의 제작자, 내용, 키워드 같은 여러정보를 검색엔진이나 브라우저에게 제공하는 태그로서, charset, name, content속성이 있다.

charset="": 문자 인코딩방식

- 문자 인코딩 방식을 지정하는 html속성이다. 인간이 사용하는 문자나 기호 등을 컴퓨터가 알아볼 수 있는 신호로 만든다.

한국인인 우리는 EUC-KR또는 UTF-8을 사용해야하고 권장되는 사항이다.

name="": 정보의 종류

content="": 정보의 값

ex) 

<meta charset="UTF-8"/>
<meta name="author" content:"nugu"/>
<meta namve="viewport" content:"width=device-width,..."/>

이런식으로 작성되는 것인데, vscode를 사용한다면 html파일 내 에서

!하고 tab또는 enter를 누르면 자동으로 좌르륵 나온다. 편리한 기능이니 애용하시기를.

예시에 나와있는 viewport라는 정보종류가 있는데, 이를 정보의 값을 표현하는 content에서 자세히 보여주고 있다.

유저는 스마트기기를 가지고 웹사이트를 접속, 오픈할 수 있는데, 다양한 기기로 접속하는 만큼

웹사이트가 처음 오픈 될 때(출력될 때) 확대/축소여부나 크기 정도를 어떻게 할 것인지를

명시하는 개념이라고 생각하면 될 것 같다.

---

alt="" in html

Alternate의 약어로 이미지가 출력되지 못하는 경우 대신 출력할 텍스트 라고 해서, 대체 텍스트 라고 부르기도 한다. 이미지 경로가 잘못되거나 네트워크 불안정 등의로 이미지가 출력 될 수 없는 상황에서 이미지가 나올 대신 화면에 나오는 글자라고 생각하면된다.

필수사항은 아니지만 이런 상황이 생길 수 있기때문에 alt속성이 들어있는 태그에는 내용을 적어두는게 좋을 것 같다.

 

반응형

---

rel="" href="" in html

link태그에 들어있는 속성으로 외부 문서를 가져와 연결할 때 사용하고, 대부분 css파일을 가져오는 용도로 이용된다.

rel는 가져올 문서와의 관계, href는 가져올 문서의 경로를 나타내는 속성이다.

ex) 

<link rel="stylesheet" href="./main.css"/>
<link rel="icon" hfef="./favicon.png">

첫번째 줄 내용: link태그를 이용할건데, 얘는 html스타일링용으로 가져오는 거고, 위치는 ./main.css에 있다

두번째줄 내용: link태그를 이용할건데, 얘는 아이콘용이고, ./favicon.png에 있다.

 

CSS: first-child, last-child, nth-child()

html에서 만든 클래스를 css파일 내에서 선택자라고 부르며 뒤에 : (콜론)을 붙혀 사용하는 방법인데,

가령 어떤 자식리스트를 표현할 때, :first-child는 자식 리스트의 첫 번째에만

다른 스타일을 줄 수 있도록 도와주는 선택자이고,

:last-child는 :first-child와 달리 맨 마지막의 자식 리스트만 다른 스타일을 적용할 수 있도록 도와주는 선택자이다.

그렇다고 첫번째랑 마지막만 할 수 있는 것이 아니라, 중간에 다른 순서의 자식 리스트도

다른 스타일링을 해줄 수 있는데, 그 선택자는 :nth-child()이다.

 

---

MiniMemo에 적어뒀던 내용, 다시 알게된 내용들을 간략히 적어 보았다.

작은 속성들 하나하나에도 역할이 있다는 걸 알았고,

독할 할 때는 이 속성들에 대해 제대로 알고 인지할 생각조차 해보지 않았는데,

이를 통해 코드를 읽어내려가는 독해력?이라고 할까, 그런 실력이 늘어가는 기분이라 뿌듯하다.

앞으로 새로운 태그나 속성을 읽을때 영어라 당황하지 않고 전보다는 침착히 읽어 나갈 수 있을 것 같다.