21.08.18 노트정리
strong과 em / b와 i
문서에 의미 있게 강조를 하려면
<strong>과<em>사용
문서에 의미 없이 꾸밈을 주려면<b>와<i>사용
-
<strong>- font-weight:700; 정도의 굵기로 표현됨
- 스크린리더 사용 시 강조해서 읽어줌
-
<b>- font-weight:700정도의 굵기로 표현됨
-
<em>- font-style:italic; 의 기울어진 글자
- 스크린리더 사용 시 강조해서 읽어줌
-
<i>- font-style:italic; 의 기울어진 글자
counter-reset / counter-increment
counter의 값은
content속성에서counter()나counters()함수를 사용하여 표시할 수 있다
CSS
body {
counter-reset: section; /* counter 이름을 'section'으로 지정합니다.
초깃값은 0입니다. */
}
h3::before {
counter-increment: section; /* section의 카운터 값을 1씩 증가시킵니다. */
content: "Section " counter(section) ": "; /* section의 카운터 값을 표시합니다. */
}HTML
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>Result
Section 1: Introduction
Section 2: Body
Section 3: Conclusion
CSS 커스텀 속성
CSS 커스텀 속성은 작성자가 정의한 속성의 집합
CSS 변수라고 부르기도 하지만 정확한 네이밍은 CSS 커스텀 속성
CSS 커스텀 속성은 아래와 같이 정의함
사용시var()함수 사용
:root {
--var-name: value;
}-
root{}- 커스텀 속성을 전역으로 사용할 때
:root{}에 커스텀 속성을 정의함
- 커스텀 속성을 전역으로 사용할 때
-
--var-name- 커스텀 속성의 이름
- --(이중하이픈)으로 시작하며, 속성이름은 작성자가 정의함
- 대소문자 구분
-
value- 커스텀 속성의 값
:root {
--main-color: #f00;
--main-bg: #0f0;
--border-color: #ff0;
--header-height: 70px;
--content-padding: 10px 20px;
--base-line-height: 1.5;
--transition-duration: 0.5s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
/* 유효 커스텀 속성은 후에 JavaScript에서 재사용될 수 있다. */
--foo: if(x > 5) this.width = 10;
}브라우저 동작원리
CSS 내장함수
- calc()
- attr()
- var()
anchor태그 신기한것
- mailto
- 이메일 주소로 연결
<a href="mailto:sonwj0915@naver.com">Send email to nowhere</a>
- tel
- 전화번호로 연결
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>
viewport
스마트기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 속성
스마트기기에서 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율 등을 다루는 meta data에 속하는 속성
사용법
<meta name='viewport' content=''/>를 <head></head>사이에 추가해 주면 됨
| 속성 | 값 | 초기값 | 특징 |
|---|---|---|---|
| width | <viewport-length>{1,2} | 독자적 속성에 따름 | device-width라는 값을 넣는 것이 가능함 |
| height | <viewport-length>{1,2} | 독자적 속성에 따름 | device-height라는 값을 넣는 것이 가능함 |
| user-scalable | no 또는 yes | yes | 사용자가 브라우저의 확대축소를 가능하게 할 것인지 정의 |
| initial-scale | 1 ~ 10 | 1 | 초기 확대값 |
| minimum-scale | 0 ~ 10 | 0.25 | 최소 확대값 |
| maximum-scale | 0 ~ 10 | 1.6 | 최대 확대값 |
적응형 vs 반응형
반응형 웹은 하나의 템플릿으로 모든 기기에 대응
적응형 웹은 선별된 기기 유형에 따라 별도의 독립적인 템플릿을 요구함(별도페이지 제작이 필요함)
| AWD(적응형) | RWD(반응형) |
|---|---|
| 기기감지 | |
| 서버 또는 브라우저에서 기기 감지 | 미디어쿼리로 기기 감지 |
| 콘텐츠 최적화 | |
| 필요 콘텐츠만 다운로드 | 모든 콘텐츠 다운로드 |
| 기기 특성별 처리 방법 | |
| 기기마다 다른 템플릿 | 하나의 템플릿 |
| 로드 속도 | |
| 빠름 | 느림 |
| 개발/배포 | |
| 기존 사이트 변경없이 개발 가능하지만, 추가비용발생 | 기존 사이트를 전면 리뉴얼하여 개발 |
구글 SEO
nomarlize css vs reset css
개발자 지망생