TIL #10 - CSS

rosarang·2021년 1월 13일
0

CSS

목록 보기
3/3
post-thumbnail

센터 정렬 방법

  • text-align: center;
  • margin: auto; - width 값 필수
  • display: flex;, justify-content: center;, align-item: center; - 상하좌우

margin은 상하로 되지 않음 -> flex를 이용해야함
width를 주면 블록 속성이 없어짐

input 관련 팁

  • input은 기본이 inline이므로 나열되는걸 방지할 경우 div 태그를 씌워 block화

  • input의 기본 border-style: inset;

  • textarea 기본 resize

  • CSS selector - text 타입의 인풋 selector 입력 시
    input[type="text"] {}

CSS selector

selector:first-child {}
selector:last-child {}
selector:nth-child(odd) {}
selector:nth-child(even) {}

표기 방법 중 해당 태그의 첫번째 순서인지, 마지막 순서인지, 홀수/짝수인지 알 수 있는 셀렉터 표기법이 있음

media query

  • 반응형 웹 구현 테크닉. 특정 조건에서 해당 CSS를 적용하라는 규칙을 줄 수 있음

  • @media 으로 작성


    각 파트별 의미

@media only screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}
}

@media - media query 시작
only screen - 스크린이 있는 디바이스에 적용
and (max-width : 480px) - 조건

Font Awesome 이용하는 방법 1

  1. 하단의 링크를 html 파일 <head> 태그에 넣기
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

  2. 사이트에서 원하는 아이콘의 이름 찾기
    https://fontawesome.com/cheatsheet#brands

  3. 아이콘명을 넣은 하단의 태그를 텍스트 입력 하듯 입력하기
    <i class="fas fa-아이콘명">

  4. CSS로 사이즈나 컬러 변경하면 완료!

기타 팁

* {
border: 1px solid red !important;
}
  • 크롬 개발자도구에서 style에 상단의 코드 입력 시 요소별로 보더가 생겨 구분하기가 쉬워짐

  • padding이든 margin이든 어떤 property를 써도 좋음

profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글