TIL 6 | CSS

yoozung·2021년 6월 29일
0

[ TIL ]

목록 보기
7/10
post-thumbnail

웹 어플리케이션 구성 요소 (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%';

0개의 댓글