html+css home

1html 문서로 하고 한국어라는 언어를 사용한다.
2<meta> 태그를 이용해 뷰포트 지정
<meta name="viewport" content="<속성1=값>, <속성2=값2">
일반적인 사용법으로 뷰포트 너비를 스마트폰에 맞추고 초기 화면 배융르 1로 지정한다.
3이 문서의 제목은 home이다.

1웹 폰트 사용하기(구글)
1.http://fonts.google.com/earlyaccss들어가서 폰트 찾기
2.link에서 @import url(//font.googleapis.com/earlyaccss/~)복붙
3.body에서 font-family 정의하기
2배경색
backgorund: #fff; (흰색, white)
웹 문서의 요소에 배경색을 지정
배경색은 상속되지 않음.
3*(전체 선택자)의 마진값과 패딩값은 0이다(간격 x)
4a 태그에서 밑줄 없고 색상은 회색이다
방문한 링크(눌렀으면) 색상은 회색이다
nav a(네비게이션 a 태그)는 방문하지 않은 링크(:link)에 적용하고 방문한 링크는 흰색으로 한다.
클릭하는 순간 노란색으로 적용한다.

1글자 크기 지정(font-size 속성)
기본 사이즈는 15px
2가변 글꼴
em 단위: 화면에 표시되는 포트 값을 기준으로 몇 배가 되는 지 지정
1em=16px 정도(폰트 달라지면 바뀔 수 있다.)
부모 요소가 중첩될 경우 글자 크기가 계속 달라짐
3line-heigh 속성
문단의 첫 글자를 얼마나 들여 쓸지 결정
<크기>15px 와 <백분율>:5%으로 지정
4h1의 padding(콘텐츠 영역과 테두리 안쪽 사이의 여백)-bottom(바닥)이 5px이다.
(h1의 밑부분이 5px만큼 띄워져있다.)

1모바일(스마트폰 규격)에 맞춰서 먼저 설정
2footer 빼고 container로 모두 묶는다
너비100%(꽉참); 마진(요소와 요소간의 간격)은 0이고 자동값
3header(머리말) 지정하기
너비 100%(꽉참, 백분율) 높이 600px(고정)
header 배경을 운동2라는 이미지로 하기(중간, 반복X, 사이즈는 cover)
마진(요소와 요소간의 간격)=0
4nav태그 높이는 100px 배경색은 #00ff0000;(투명색)
5main-nav(li묶음)
list-style-type 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸느 속성
none이므로 순서 없는 목록의 불릿(li앞에 붙는 1,2,3, 기호) 없애기
마진(요소와 요소간 간격)=0, 패딩(콘텐츠 영역과 테두리 안쪽 사이의 여백) 20px
text-align(셀 안에서 수평 정렬 방법은) 중간으로!

1nav: 네비게이션 태그
같은 사이트 안의 문서나 다른 사이트 문서로 연결하는 링크
2display 속성
display: inline-block; 인라인레벨로 배치하면서 내용에는 블록레벨속성을 지정
인라인으로 했을 때 배치는 되지만 내가 원하는 마진 값 등이 적용되지 않는다.
3text-shadow: 1px 1px #F0DFDF(상아색);
그림자 효과 내기: 수평 거리 수직 거리 색상
4color: #fff;(글자 색 흰색으로 지정)
5font-family: main-lav li는 이렇게 한다.
6main-lav li의 margin(요소와 요소간의 간격): 7px 20px;
위아래는 7로 좌우는 20으로 한다.

1section(healthy life, good moring 등 각각을 section으로 묶음, 주제별 콘텐츠 영역)

position 속성
relative: 자연스럽게 배치, left나 top 속성을 지정할 수 있다(위치 옮길 수 있다)
너비 90%, 패딩(콘텐츠 영역과 테두리 안쪽 사이의 여백) top-right-bottom-left(시계 방향)순으로 적는다
2section의 container(id값이므로 앞에 #붙이기)의 구조 가상 클래스는 짝수로 하고 배경색은 #eee(연회색)으로 한다. (흰-회-흰-회-흰-회 순임)
3section 내의 내용을 content class(클래스 명령할 때 앞에 .붙이기)로 묶음
마진(요소와 요소간의 간격, 콘텐츠-패딩-border-마진)값 top 좌우(auto) bottom순으로 지정
브라우저 접속사(버전에 따라 다르므로 붙여준다.파이어복스 19dlgk-iOS 6이하 사파리 3.1 순)
box-sizing 속성
박스 모델의 너비 값 기준 결정(content-box, border-box)
너비 90% 패딩(콘텐츠 영역과 테두리 안쪽 사이의 여백은 20px)
4footer(제작정보와 저작권 정보 표시, 맨 마지막에 온다)
position 속성
relative: 자연스럽게 배치, left나 top 속성을 지정할 수 있다(위치 옮길 수 있다)
너비 100%(꽉참, 백분율), 높이 100px(고정값), 배경색(#F0DFDF, 상아색)
5footer에서 p선택자
그림자 효과 내기(수평거리 수직거리 색상(#F0DFDF,상아색)
글자 색: white(#fff)
font-family 폰트 설정
font-size 설정, line-height(문단의 줄 간격 지정)
***color 왜 두 번 설정했지...***
text-align: center(셀 안에서 수평 정렬 방법: 중간)

1태블릿에 맞춰서 설정(pc도 포함)
***아직 미디워커리 헷갈린다..ㅠㅠ***
미디워 쿼리 중단점 만들기(태블릿ver)
최소 너비 768px(이상이 되면 태블릿 ver로 간다)로 하고 header높이는 400px(고정)으로 한다.
2아까 주제별로 각각 묶었던 section들에게 명령
#1번째, #2번째, #3번째, #4번째
브라우저 접속사, 박스 모델의 너비 값 기준 지정, 너비, 높이 지정
foat 속성: 요소를 왼쪽에 떠있게 만든다.
마진(요소와 요소간의 간격)=0
border (테두리 선 1px 실선 색상(black)
3#다섯번째, #여섯번째
clear 속성
앞에서 실행시킨 float(요소를 왼쪽에 떠있게 함) 속성 무효화 시킴
4footer에서 clear: both
앞에서 실행시킨 모든 float(요소를 왼쪽에 떠있게 함) 속성 무효화 시킴

1body 태그를 container로 묶고 header에 nav를 넣는다
ul에 main-nav로 묶고 li(목록)에 링크와 목록 이름을 넣는다.

1section id를 select로(다른 section도 아침, 오늘, 밤 등으로 각각) 지정
content 클래스로 내용 묶고, page-title에 제목 적기
photo에 사진 넣고,
<img src(이미지 속성)="images/q.jpg" width="50%"(너비) alt=""(이미지가 안나올 때 설명)> ***alt에 select라고 해줘야 겠다..***
text에 문구 넣고 </section>으로 닫아주기
2위와 같이 해주고 <a href="아침.html"> 운동을 하려면 여기를 누르세요</a></p>으로 클릭하면 아침스트레칭 페이지로 가게 해주기
다른 section들도 반복

나를 계발하다

css 활용하기