♣ 디자인
◆ 디자인 구현하는 방법[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;
Backend Developer