인스타랑 쿠팡 로그인 화면 겉모습만 따라하기 했는데 재밌당 ㅎㅎ CSS는 중간중간에 속성을 추가로 알게 되는 게 많아서 정리가 어렵군요..

effect

:

• 특정 상태를 :로 나타냄
  • :hover: 어떤 대상에 마우스를 올렸을 때
  • :focus: 대상이 선택되어 있을 때

상대 단위

em

• 상위 요소 크기의 몇 배인지로 크기를 정함

/* 글자 크기의 n배 */
 padding-left: 2.5em;
 background-size: 1em;

확장 스타일

• 기본 클래스에 .을 사용해 확장 스타일을 지정할 수 있음

/* input이라는 클래스가 있으면서 input-underline이라는 클래스가 있다면 */
.input.input-underline {
	padding-left: 2.5em;
}

• 특정 스타일을 특정 태그 전체에 지정하고 싶다면 클래스이름 앞에 태그 이름을 한 번 더 쓰면 됨

input.input-underline {
	padding-left: 2.5em

textarea

• textarea는 기본적으로 폭 조절이 가능해 디자인 상 어려움이 많음
  • 높이만 조절되거나 아예 조절을 못하도록 설정
  • resize 속성 사용
  • cols 속성 안씀(좌우 크기변경 막기)
  • 폭이 100% 아닐 때는 cols 설정

textarea.input{
    resize: vertical;
}
textarea.input.fix-size{
    resize: none;
}

button

<button>, <input>, <a>를 모두 버튼화 할 수 있음

button

• 클래스 적용 시 디자인 가능
• 버튼 시작/종료 태그 사이에 레이블 추가
  
  

input

• type=”button” 또는 type=”submit”이면 button됨
• 버튼 레이블은 value 속성으로 지정
• 클래스 적용 시 디자인 가능
  
  

a

• 클래스 적용 시 디자인 가능
• [문제점1] 폭 디자인에 대한 클래스 적용 시, 다른 태그와 겹치고 폭 크기 적용 안됨
• block: 폭 지정 됨 / inline: 폭 지정 안됨
• 개발자 도구 > a태그 버튼 선택 > comptued에 display 검색 시 쉽게 확인 가능
  • display: inline
• [해결책1] .btn에 display:inline-block 추가
  
  
• [문제점2] 폭 맞추니까 정렬 안됨
• [해결책2] text-align: center추가
  
  
• [추가] text-decoration: none;
  • a태그에 자동으로 하이퍼링크 표시 밑줄이 생기는 것을 없앨 수 있음

공통 스타일 파일

• 모든 페이지에 공통으로 적용되는 스타일이 있다면 별도의 css 파일로 분리해 페이지마다 추가해서 사용할 수 있음
  
  

Spring Boot에서 불러오기

스타일 파일(commons.css)을 추가하려면,
1. src/main/resources/static에 폴더 추가(css)
2. commons.css 추가
3. header.jsp에 /css/commons.css 불러오도록 설정

<link rel="stylesheet" type="text/css" href="/css/commons.css">