TIL 38일_4차

Moon-Tree·2023년 2월 21일
0

♣ 디자인

◆ 디자인 구현하는 방법[1](인라인 스타일)

  • 태그에 style 속성을 작성하는 방법
  • 모든 태그는 style 속성이 존재한다.
  • 디자인 코드는 key:value; 형태

(장점)

  • 태그 내에서 해결이 가능
  • 어떤 디자인 방식보다 가장 우선순위가 높다.

(단점)

  • 알아보기가 어렵다.
  • 재사용이 불가능

◆ 디자인 구현하는 방법[2](style 태그)

  • style 태그 영역 생성 후 디자인 코드 작성
  • 선택자(selector)를 통해 대상을 선택 후 디자인 코드 작성
  • 작성 방법
	selector {
       key:value;
    } 
  • 선택자를 얼마나 잘 쓰냐에 따라 효율이 달라진다.

    (장점)

  • 디자인 코드가 분리되어 알아보기가 편하다.

(단점)

  • 선택자의 종류를 공부해야 한다.
  • 다른 페이지에서는 사용이 불가능하다.

◆ CSS의 주요 속성

  • color : 글자 색상
  • backgruond-??? : 배경 속성
  • font-??? : 글꼴 속성
  • padding : 테두리 안쪽 여백(글자 크기의 1/2 ~ 1/4 정도)
    - padding: 0.5em;
    • 글자 반개 크기의 높이 - 주로 이렇게 사용한다.
  • border-??? : 테두리 속성

속성에 따라 방향을 지정할 수 있다.

  • top : 위
  • left : 왼쪽
  • right : 오른쪽
  • bottom : 아래

축약 표현과 세부 표현이 겹치면 세부 표현이 이긴다.

  • 축약 표현
    - ex) border: 1px solid black;
  • 세부 표현
    - ex) border-width: 1px;
    border-style: solid;
    border-color: black;

테두리 모서리 깎기 : 둥근 모서리 표현할 때 사용한다.

  • border-radius: 50%;
  • border-radius: 30px;

◆ 폼 디자인

화면에 요소(태그)를 배치할 때 배치 방향을 정할 수 있다.
display 속성으로 배치 방향을 제어 한다.

  • inline은 줄바꿈 없이 배치 (System.out.print() 처럼 배치)
    - inline은 내용물에 의해서 폭이 자동 설정되며 수동 설정이 불가하다.
  • block은 모든 태그를 줄바꿈하면서 배치(System.out.println() 처럼 배치)
    - block 속성은 폭 설정이 가능하다.
  • inline-block 은 방향은 inline이면서 폭은 block처럼 설정이 가능하다.

margin을 사용하여 외부 여백을 제어할 수 있다.

  • (주의) margin은 특별한 이유가 없으면 좌우는 주지 않는다. (폭이 늘어난다.)

width와 height를 사용하여 폭과 높이를 지정할 수 있다.

  • (주의) height는 특별한 이유가 없으면 설정하지 않는다.

폭 설정 기준을 변경하여 일관된 폭을 가지도록 처리

  • box-sizing: border-box;
profile
Backend Developer

0개의 댓글