[TIL]Day 12. html/css 정리(5)

1. 문자 인코딩

<meta charset="utf-8"> : 영어 외의 문자가 포함되어 있는 페이지에는 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 문자가 깨지지 않습니다.

얼마 전에 vsc 설정을 건드리다가 한글 문자가 전부 깨져서 나온 적이 있습니다. 그때 문자 인코딩에 관한 자료를 찾아보면서 배우게 된 아주 중요하지만 많이 언급되지 않는 내용입니다. 후에 문자 인코딩에 관한 내용을 포스팅 하겠습니다.

 

2. 반응형 웹페이지 요소

<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미를 전달합니다. 모바일과 pc 두 환경 모두에서 웹사이트가 예쁘게 보이기 위해 필요한 정보입니다. 해당 정보를 추가하지 않으면 어느 한쪽의 환경에서 페이지가 제대로 나오지 않게 됩니다.

 

3. a 태그의 하이퍼링크를 새 창에서 띄우기

 

a 태그의 하이퍼링크를 새 창에서 띄우는 방법은 target 속성에 "_blank" 값을 입력하면 됩니다.

 

4. 하나의 태그에는 여러 속성을 부여할 수 있다.

하나의 태그에는 여러 속성을 부여할 수 있습니다. 속성을 부여하는 방법은, 순서에 관계없이 속성간의 띄어쓰기를 하며 입력하면 됩니다.

 

5. html에서 css 참조하게 만들기

 

html에서 css를 참조하게 만드는 방법은 링크태그를 통해서 이루어집니다.

해당 링크태그를 구성하는 요소는 아래와 같은데,

1. link — link태그로 사용할 css파일을 링크해줍니다.
2. href — href 속성에 css 파일 경로를 작성합니다.
3. type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"입니다.
4. rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.

이러한 내용을 통해 html에서 전혀 다른 파일에 있는 css 속성을 불러올 수 있습니다.

 

6. 폰트 적용시 주의사항

 

폰트 이름에 띄워쓰기가 포함되어 있으면 ""(쌍따옴표)를

사용해야합니다. 그렇게 하지 않으면 html에서 인식하지 못합니다.

 

7. span 태그를 오른쪽 정렬한다구요?

 

span태그의 경우 오른쪽 정렬을 할 때, 개발자의 의도와는 다르게 움직일 수 있습니다. span태그의 길이는 content만큼의 길이이고 오른쪽 정렬은 해당 content의 길이 내에서만 이루어지기 때문입니다. 

 

8. 문장 사이에 스페이스를 추가하고 싶을 때

 

html에서는 기본적으로 문자 사이의 띄어쓰기를 하나 밖에 인식하지 못합니다. 따라서 추가적인 띄어쓰기를 하고 싶을 때에는 &nbsp;를 원하는 위치에 입력해야 합니다.

 

9. 요소의 크기

 

html content의 모습

위의 사진을 보면 margin 50px, border 5px, padding 50px인 것을 알 수 있다. 이때 가운데의 273x90이라는 영역의 값은 border, padding, content의 영역값이 다 더해진 값으로 파란색 부분의 순수 가로값은 163px이 된다. 이는 후에 css를 디자인 함에 있어 혼돈을 주기 때문에, 전에 포스팅했던 내용인 box-sizing: border-box를 활용하게 된다.

 

10. margin, padding 값의 순서

 

margin과 padding 값을 입력할 때 순서대로 margin/padding: (위) (오른쪽) (아래) (왼쪽) 값을 의미한다.

즉 시계방향에 해당하는 요소값을 입력하는 것이다.