-
[TIL]Day 1. HTML/CSS 코드 정리IT 지식 2020. 8. 10. 22:46728x90
1. <meta charset="utf-8"> 의 의미
-초기 컴퓨터의 문자 인코딩 방식에 한계를 느껴 새롭게 개발된 확장용 인코딩.
-가변 길이 문자 인코딩 방식 중 하나로 한 문자를 표현하기 위해 1~4byte를 사용하여 표현.
-유니코드 방식의 현재 웹페이지를 만들 때, 다국어를 표현하기 위해 많이 사용.
2. 메타 뷰포트 태그를 사용하는 이유
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-뷰포트란 웹페이지가 사용자에게 보여지는 영역
-과거 PC로만 인터넷을 사용하던 시대와는 달리 요즘은 다양한 기기를 통해 인터넷을 하다보니,
기기마다 뷰포트가 다양함
-따라서 뷰포트 태그를 이용해 렌더링 영역과 뷰포트의 크기를 같게 만들어준다.
3. Font Awesome을 활용하자.
-Font Awesome을 활용하면 다양한 아이콘을 쉽게 사용할 수 있다.
-Font Awesome을 사용하는 방법은 CDN주소를 head영역에 링크를 걸듯 입력하면 된다.
-CDN주소는 회원가입 후 받는 방법도 있으나, CDN 전문 제공 사이트도 존재한다고 한다.
4. 이미지를 html에 불러오는 방법
-먼저 폴더를 만들어 이미지 파일을 넣어 놓는다.
-그 후, <body>태그에 <img src="경로 및 파일이름.확장자" alt="이미지를 표시할 수 없을 때 출력할 내용">
을 입력하면 된다.
5. reset.css 활용법
-CSS를 사용하다보면 기본적으로 설정된 CSS 값이 존재한다.
이는 CSS 제작을 번거롭게 만들기 때문에, 그 값을 초기화 시켜주는 것이 좋다.
-https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
-이 사이트에서 reset.css 값을 제공해주고 있기 때문에,
어떻게 작성해야할지 모르거나 일일이 그 값을 작성하기 귀찮은 사람들이라면 이 사이트를 활용하는 것이 좋다.
-사용방법은 reset.css 페이지를 만든 후에 그 페이지를 styles.css에 import 하면 된다.
6. 구글 폰트 사용법
-html에서 다양한 폰트를 활용하고 싶다면 구글 폰트를 사용하는 것이 좋다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
-사용하는 방법은 해당 사이트에 들어가서 원하는 폰트, 사이즈, 굵기 등을 고른 뒤,
그 값을 CSS 파일에 import 하면 된다.
<이미지 예시>
1)원하는 폰트를 고른 뒤, 해당 폰트에서 원하는 사이즈와 굵기를 골라 빨간색 네모 테두리 되어 있는 영역을 누른다.
2)그 후 옆에 selected family 페이지에서 import 할 주소를 복사하여 styles.css 에 불러온다.
3)그 다음 폰트를 적용하고 싶은 부분에 CSS rules를 적용하면 된다.
7. box-sizing: border-box 을 사용하는 이유
-html과 css를 작성하다보면 동일한 값을 준 것 같은데 크기가 다르게 적용되는 경우가 있다.
-이는 기본적으로 사이즈가 content를 기준으로 적용되기 때문에 그렇다.
-디자인을 하는 입장에서 이는 매우 번거롭기 때문에 하나로 크기의 기준을 통일시키는 것이 좋다.
-이를 box-sizing: border-box를 활용하여 통일시킬 수 있다.
-https://opentutorials.org/course/2418/13405
box-sizing - 생활코딩
box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하��
opentutorials.org
-생활코딩에 이에 대한 자세한 설명이 있다.
8. 태그 포지션에 대한 이해
-태그는 기본적으로 position:static 상태이다.
-태그를 움직이고 싶을 때, position: relative를 사용하게 된다.
-position:absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다.
-position:fixed는 태그를 특정 위치에 고정시키는 역할을 한다.
9. z-index 속성 이해
-z-index는 태그간 배치순서를 결정하는 속성이다.
-z-index는 position이 적용된 요소에서만 작동한다.
-z-index: (숫자); 숫자 값에 입력한 수를 토대로 배치 순서가 결정된다.
-0이 기본값이며, 숫자가 낮을수록 뒤에 배치되고 높을수록 앞에 배치된다.
음수도 가능하다.
※ 태그 포지션과 z-index를 활용하여 이미지 위에 텍스트를 올리는 것도 가능하다.
10. a:link, a:visited, a:active, a:hover 사용법
-하이퍼 텍스트를 활용하면 색이 달라지고 밑줄이 그어져 있다.
-여기에 css를 입히는 방법은 위의 스타일들을 적용하는 것이다.
-a:link: 방문 전 링크 상태
a:visited: 방문 후 링크 상태
a:active: 마우스 오버 했을 때 상태
a:hover: 클릭 했을 때 링크 상태
728x90'IT 지식' 카테고리의 다른 글
[TIL]Day 6. Java Script 기초 정리 (0) 2020.08.18 [TIL]Day 5. java script 기초 (0) 2020.08.17 [TIL]Day 4. HTML/CSS 정리 (4) (0) 2020.08.13 [TIL]Day 3. HTML/CSS 정리(3) (0) 2020.08.12 [TIL] Day 2. HTML/CSS 정리-2 (0) 2020.08.11