[국비지원] KH 정보교육원 55~56일차

 이제  HTML에 이어서 CSS를 배웠다. 한편으로는 과제가 진행되면서 약간 노가다 같다는 생각도 들기도 했지만 내가 작성하는 것에 따라서 즉각적으로 화면에 변화가 나타나는게 재밌는 것 같다. 이번 주에는 아마 CSS를 마무리 하고 ECMAScript를 배우게 될 것 같다. jQuery도 같이 배우게 될텐데 기대가 된다. 강사님께 Vanilla JS에 대해서도 한번 여쭤봐야겠다.

 

---------

CSS3
스타일 시트 표준안
웹 문서에 글꼴, 색상, 정렬과 각 요소의 배치 방법 등과 같은 디자인 요소를 적용하는 데 사용

CSS3의 구성
선택자(Selector): 스타일 시트를 적용할 대상을 지정
속성(Property): 어떤 속성을 적용할지 선택
속성값(Value): 속성에 어떤 값을 반영할지 선택

CSS3의 필요성
문서 작성과 디자인을 분리
하나의 웹 문서에서 문서 작성은 HTML이, 디자인은 CSS가 담당

디자인을 분리했을 때 장점
내용과 디자인 수정이 용이
다양한 기능으로 확장 가능
통일된 문서 양식 제공 
전송 및 로딩 시간 단축


CSS의 우선순위
하나의 요소에 인라인 스타일 시트가 중복 정의되면 제일 마지막에 설정된 값이 적용
CSS 적용 우선순위와 상관없이 속성을 강제로 적용할 때는 (!important) 표시 사용


1. 기본선택자
 전체 선택자 * { }
 타입 선택자 태그 { }
 클래스 선택자 .클래스이름 { }
 아이디 선택자 #아이디 { } 
 속성 선택자 태그 [속성] { } / 태그 [속성=값 { } 

2. 가상 선택자
웹 문서에는 보이지 않지만 동작에 영향을 주는 속성을 가상 선택자로 이용

1)이벤트 가상 클래스 선택자
사용자가 마우스 이벤트 행위를 어떻게 하는지에 따라서 스타일 시트 다르게 적용

2)구조적 가상 클래스 선택자

3)UI 요소 상태 가상 클래스 선택자
입력 폼의 상태를 선택할 때 사용

4)기타 가상 클래스 선택자

3. 조합 선택자
기존의 여러 선택자를 복합적으로 조합하는 방법을 제공

----

Apache tomcat

웹서버
(1) 정적인 문서 (static documents) 를 그대로 읽어서 응답문서의 body에 저장해서 보내주는 역할
(2) 정적인 문서 (static documents) : 아무리 많이 재요청해도 그 내용이 변하지 않는
     모든 문서 파일을 의미  (ex) 이미지파일, *.css, *.js, 비디오/오디오 파일)

** Apache Tomcat ver9.x **
(1) Web Server + (2) WAS (Web Application Server)

chcp > change code page (문자집합)
          65001 -> UTF-8

http://localhost:8080
http://localhost:8080/favicon.ico
http://localhost:8080/tomcat.css
http://localhost:8080/RELEASE-NOTES.txt
http://localhost:8080/TTT.html

---

 

박스 모델
웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용
웹 문서의 전체 레이아웃을 정의
각종 요소들을 원하는 위치에 배치

박스의 속성
content : 실제 내용이 표현되는 곳
padding : 콘텐츠와 테두리 사이의 여백
border : 박스의 테두리 두께
margin : 테두리와 박스의 최종 경계 사이의 여백

padding, margin
padding : 박스의 안쪽 여백 설정
Margin : 박스의 바깥쪽 여백 설정

border-radius 
테두리의 모서를 둥글게 설정

box-shadow 
박스에 그림자 효과 적용
수평 그림자(h-shadow): 그림자의 수평 거리 지정
수직 그림자(v-shadow): 그림자의 수직 거리 지정
그림자 흐림(blur): 그림자의 흐림 정도 지정
그림자 번짐(spread): 그림자의 번짐 정도 지정
그림자 색상(color): 그림자의 색상 지정
삽입 효과(inset): 박스 외부로 표현되는 그림자를 박스 안쪽으로 표현하는 효과


*화면을 구성하는 각 종 요소들을 원하는 위치에 배열하는 레이아웃 속성
  - 원하는 화면을 만드려면 이 속성을 반드시 기억하여야한다


position
텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성

정적 위치 설정 position: static;
텍스트, 이미지, 표 등을 웹 문서의 흐름에 따라 배치하는 방법 (기본값)
블록 요소는 위에서 아래로 쌓이고, 인라인 요소는 같은 줄에 순서대로 배치

상대 위치 설정 position: relative;
각종 요소가 웹 문서의 정적 위칫값에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법

절대 위치 설정 position: absoulte;
웹 문서의 흐름과는 상관없이 전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여 원하는 위치에 배치시키는 방법
position: absoulte; 속성이 적용된 요소는 자기 부모 요소들 중에 
position: relative;가 적용된 요소를 찾아서 이 부모 태그가 기준 위치가 되어 이동시키고, 
그런 부모 요소가 없다면 그 기준 위치는 브라우저의 뷰 포트 영역이 됨

고정 위치 설정 position: fixed;
창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음


float 
화면을 구성하는 요소 간의 관계를 고려하여 각 요소를 배치하는 방법

clear
float 속성이 적용되지 않도록 할 때 사용

overflow 
auto로 설정하면 이미지가 박스 영역을 벗어나는 현상을 해결할 수 있음

::after{
       content: '';
       display: block;
       clear: both;
}


z-index
한 요소 위에 다른 요소를 쌓을 때 사용
z-index 속성값이 작을수록 아래에 쌓임