- welcome file ; 웹브라우저에서 서버에서 제일 처음 읽어서 보여주는 페이지, 대문의 역할을 한다, 이 파일이 없으면 404error(클라이언트 오류)가 뜬다, 서버관리자가 미리 세팅해놓는다 ex) index.html / default.html / main.html
* 오류의 종류 (f12 개발자 도구 status 확인)
- 404 : 클라이언트 오류, 서버에 없음
- 200 : 정상 작동
- 500 : 서버오류
- html은 정적인 페이지, 한 번 내용을 집어넣으면 변형되지 않는다.
- 링크경로 지정할 때 (폴더, 파일)
./ 상위 폴더
../ 2단계 상위 폴더
- 영역 나누기 : div 태그
- 이미지와 서식영역 나누기
- 서식이 달라도 이 또한 모두 div로 나눠야 한다.
- 반응형 웹페이지 ; 사용하는 디바이스가 다양해짐에 따라 각자 다른 모니터 크기에 모두 알맞게 보이게끔 자동으로 레이아웃이 바뀌도록 해야하기 때문에, 예전과 달리 이미지 통째로 페이지를 구성하지 않고 요소별로 나누어야 한다.
- CSS(Cascading style sheet) 용어
"cascad" : 스타일을 적용할 때 부모태그에 설정하여 자식태그들이 자동 적용되도록
- html 페이지 내부에 가장 상위의 부모 태그는 <body>
- 위계구조에 따른 스타일이 적용되지 않는 태그 <a>
>> a태그는 스타일을 부모태그로부터 상속받지 않는다.
만약 강제로 상속받게 하려면 inherit 사용, 아니면 아예 스타일을 재정의한다.
- 부모와 자식태그 모두 스타일을 적용하면, 자식태그가 우선 적용된다. (부모태그 스타일 무시, *f12 검사시 line-through로 표시됨)
- 코드 중복 제거, 페이지 분리 중요!
- cross browsing : 다양한 브라우저를 사용할 때 동일하게 보이도록
>> 가장 유명하고 오래된 에릭마이어의 CSS Reset, 앞으로 rest.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
* tone&manner를 지키자! ; 웹 상에서 색상이나 폰트 디자인 등의 수나 종류는 3가지 이내로 사용한다~
* header 밑은 "main visual"
- display 종류
1. bloack
2. inline
3. inline-block
4. flex
5. none
- ★★flex★★ 중요!
* float는 거의 쓰지 않고, greed는 not yet..
display: flex;
flex-direnction: row; (* default 값이므로 작성해주지 않아도 됨)
justify-content:
1. space-around
2. space-evenly
3. space-between
- 참고 사이트
- 스튜디오 제이티 >> quality good!
- 플렉스 개구리 게임
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com