패스트 캠퍼스의 온라인 강의 중 Heropy님의 Github 따라 만들기 예제 실습 내용을 정리한 것입니다. 사이트 제작의 전체적인 흐름을 정리하고 나중에 토픽 하나하나씩 정리해볼게요.
01.HEAD
01.1 meta tag
- 메타태그 : 사이트의 기본정보를 브라우저와 검색엔진이 인지하게 하기 위한 태그
<meta name="author" content="사이트 제작자 이름">
<meta name="description" content="사이트 설명 검색엔진과 내부적으로 확인할 때 보게 되는 내용">
<!-- IE 렌더링 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">01.1.1 viewport
viewport : 작성한 레이아웃이 전체화면
width=device-width : 뷰포트의 가로너비 = 브라우저 너비 값 디바이스 너비를 그대로 사용
initial-scale : 초기 화면 배율
user-scalable : 사용자 화면 확대/축소 가능 여부
maximum-scale / minimum-scale : 확대 최대치 / 축소 최대치 비율 (현재는 1로 고정)
01.1.2 IE 렌더링
<meta http-equiv="X-UA-Compatible" content="IE=edge">인터넷 익스플로러 8버전 이상에서 최신 방식으로 렌더링 되도록
01.1.3 오픈그래프 & 트위터카드
메타 태그의 일종으로 외부 공유 시 오픈그래프와 트위터카드에 정의된 내용들을 통해 공유
으로 여러 사이트에서 두가지 혼용해서 사용하므로 둘 다 정의하는 것이 바람직함.
<!-- http://ogp.me/ -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="GitHub">
<meta property="og:title" content="Build software better, together">
<meta property="og:description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="og:image" content="img/logo__github.png">
<meta property="og:url" content="https://github.com">오픈그래프
페이스북에서 주로 이용
<!-- https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html -->
<!-- og:type과 비슷 사이트 정보를 트위터 카드 형태로 제공하겠다. -->
<meta property="twitter:card" content="summary">
<!-- 사이트 이름 -->
<meta property="twitter:site" content="GitHub">
<meta property="twitter:title" content="Build software better, together">
<meta property="twitter:description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="twitter:image" content="img/logo__github.png">
<meta property="twitter:url" content="https://github.com">트위터카드
트위터에서 주로 이용
01.2 Favicon
01.2.1 Favicon
파비콘: 웹사이트를 대표하는 아이콘 favorite icon -> favicon
<!-- 아래 코드 선언 필요 없이 루트 경로에 `favicon.ico`가 있으면 알아서 IE지원됨 생략 가능!-->
<!-- <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> -->
<link rel="icon" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">apple-touch-icon : 스마트폰에서 사용하는 아이콘으로 사용할 수 있음.
IE에서는 favicon.ico 사용 추천
최신브라우저와 모바일에서는 png파일로 작성 가능 (이름은 동일하게 favicon.png 추천)
01.3 WebFont
01.3.1 google fonts
구글에서 제공하는 웹폰트를 적절하게 커스터마이징해서 사용 가능
원하는 폰트들을 추가하거나 동일 폰트 내에서 원하는 굵기만 가져오거나 등등
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">Roboto폰트 / 굵기 300, 400, 500만 가져옴
01.4 CSS Reset
01.4.1 reset.css
브라우저 기본 스타일 초기화하는 css
http://meyerweb.com/eric/tools/css/reset/
css 파일 중 가장 먼저 호출 되어야 하기 때문에 가장 먼저 작성할 것
<!-- 파일로 불러오기 -->
<!-- <link rel="stylesheet" href="css/reset.css"> -->
<!-- cdn으로 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">CDN : Content Delivery Network
널리 사용되는 내용이 전세계적으로 분산되어 업로드 되어 있음 불러오게 되면 사용자와 가장 가까운 곳에서 전송되게 함.
02. BODY
02.1 최상위 요소 & BEM
<div class="body__container">
</div>02.1.1 body__container
body__container body 태그 대신 사용할 전체를 감싸주는 컨테이너 요소를 만들어서 사용
font-size 보통 16px 많이 사용
font-weight 400 = normal; 기본
02.1.2 BEM : CSS 작명 규칙
절대적인 것은 아니나 어떤 내용인지 이해 필요
- 일반적인 작명에서 띄어쓰기 대신 사용
__ ~의 일부분일 때(자식요소일 때) 언더바 2번 사용 ex) body__container body의 자식요소 container
-- ~의 상태를 의미할 때 사용 대시기호 2번 사용
02.2 전역스타일
전역스타일 : 버튼이나 input창처럼 반복되서 사용되는 요소가 반복될 때 같은 내용을 매번 작성하면 불편하므로, 반복적으로 사용되는 스타일을 미리 정의 해놓고 공통적으로 (전역적으로) 이용
02.2.1 버튼 스타일
btn = 버튼
/*COMMON*/
.btn{
height:34px;
background:#eee linear-gradient(to bottom, #fcfcfc, eee);//백그라운드 그라데이션 위에서 아래로
display:inline-flex; //인라인 요소처럼 컨텐츠 너비값
align-items:center; //가운데 정렬
cursor:pointer; //커서
box-sizing :border-box; //패딩이나 보더요소 때문에 사이즈가 커지지 않도록
position:relative; //자식요소에 absolute를 사용하기 위해
}
.btn:hover::before {
//hover스타일 정의
content:"";
position:absolute;
background:rgba(0,0,0,0.07); //버튼에 블랙 색상 7퍼센트로 추가
}
.btn.btn--primary {
//기본 버튼 스타일 정의
}02.2.2 입력양식 인풋 스타일
<!-- html -->
<input type="text" class="input--text">
/*css*/
.input--text {
//인풋 전역변수 정의
outline:none; /*선택하면 나타나는 테두리선 border보다 제어하기 어려워서 사용하지 않는 경우 많음*/
box-shadow: inset, 0 1px 2px rgba(0,0,0,0.075); /*그림자 위치(기본값 바깥), x, y, blur, color*/
}
.input--text:focus { /*인풋박스 선택했을 때의 스타일 정의*/
box-shadow: inset, 0 1px 2px rgba(0,0,0,0.075),
0 0 5px blue; /*다중 그림자 추가 방법*/
}focus out 상태는 blur라고 부름 (css에서 사용하지 않음)
placeholder
입력창에 기본적으로 보이는 힌트 텍스트. placeholder의 글자색상 변경하는 기술 표준은 없으나, 벤더 프리픽스를 이용해 제어 가능
02.2.3 Vender Prefix(브라우저 업체별 접두사)
웹표준은 아니나 현재 브라우저에서 실험적으로 제공하는 기능이라는 것을 명시해서 동작하게 함
.input--text::-webkit-input-placeholder {color:red;} /*크롬*/
.input--text::-ms-input-placeholder {color:red;} /*IE / edge*/
.input--text::-moz-input-placeholder {color:red;} /*모질라 파이어폭스*/
.input--text::-o-input-placeholder {color:red;} /*오페라 placeholder 기능은 지원 안함 */