TIL 6 | CSS

웹 어플리케이션 구성 요소 (Java 기술 기반)

1. static 문서
   => html/html5 : 화면 배치(구조) 담당 : 정적(고정)컨텐츠
   => css : 화면 표현 담당
   => javascript ; 이벤트처리, 사용자입력데이터 검증, 동적컨텐츠
2. 환경설정
3. 자바클래스.java => 자바클래스.class, 서블릿(JSP) => 웹 동적컨텐츠
4. 라이브러리 : *.jar

• 정적컨텐츠 : html/css/javascript(view)
• 동적컨텐츠 : 서블릿(controller), JSP(view)
• 자바클래스.model : Model(service, dao, dto), 유틸리티, 패턴프로그래밍, 예외
• Pattern Programing
  - MVC pattern
  - DAO pattern, Factory pattern, Singleton pattern
  - DTO pattern
• WebServer : static contents 서비스
• WebContainer : 웹의 자바실행환경
• Tomcat(WAS) = Web Server + Web Container

CSS (Cascading Style Sheet)

• html 화면을 어떻게 표현할지
• 색상, 크기, 간격, 글꼴 등
• 공통(일반화, 표준화), 유지보수 편리, 재사용성, 업무역할분담

css 파일 선언위치(종류)

1. 태그 반영 :
   • inline style
   • 우선순위 가장 높음
   • 목적 : 충돌 발생시에 해결, 테스트 목적
2. 내부 파일 :
   • internal
   • 현재 html 문서에 적용
3. 외부 파일 :
   • external
   • 별도 분리 설계 : 권장, 재사용성, 유지보수편리, 표준화, 역할분담
4. 외부 파일 inport + 내부 파일로 일부 변경 적용

기본 형식

선택자 {
property-name : value;
property-name : value;
}

선택자{property-name : value;property-name : value;}

주석
/* css 주석내용 */

css 관련 html 태그 속성

• <tag style="property-name: value;">

주요 선택자(selecetors)

• *
  : 공통선택자
  * (margin 0; padding: 0;)

• 태그명
  : 태그 선택자
  모든 태그를 선택해서 적용
  

• .클래스명
  -> class="클래스명" 지정한 모든 태그적용

• 태그명.클래스명

• 자식 선택자
  -> 태그명1 자손태그명2 자손태그명3
  -> ">" 구분자

• 형제 선택자
  -> 태그명1 + 자손태그명2 + 자손태그명3
  -> "+" 구분자

• 의사 선택자
  : link => 링크걸려있는거에 반영하겠다
  : active => 클릭하는 순간에 반영
  : visited => 방문
  : hover => 마우스가 왔을때 : <a>, <img>에 쓸 수 있음

  : focus => focus(포커스)가 온 경우

  : first-child => 첫번째 자식
  : last-child => 마지막 자식

속성 선택자

• [속성명]
  -> 속성명을 갖는 모든 요소 적용

• 태그명[속성명="속성값"]
  -> 해당 태그의 속성의 값과 동일한 요소
  -> where name='html';

  -태그명[속성명^="속성시작값"]
  -> 해당 태그의 속성의 시작값과 동일한 요소
  -> where name='html%';