Dev log - 6, CSS #5

CSS 관련

  1. white-space: nowrap (자동 줄바꿈 없이 잘려서 나옴)
  2. text-overflow: ellipsis (너비 이상 넘어가면 생략 부호 표시)
  3. overflow: hidden (너비 만큼 자르기)
  • 모바일 웹은 HTML 문서에 다음과 같은 태그 필요
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>

  • sprite image : 웹에서 필요한 이미지들을 한장의 이미지로 묶는 기법, 웹 로딩 절약
    참고 사이트(https://www.toptal.com/developers/css/sprite-generator/)

  • text-indent 속성으로 겹쳐진 글을 안보이게 할 수 있음

  • display: table 속성일 때, 자식 태그에 display: table-cell 속성을 설정해야 테이블 형태가 완성됨 (테이블 속성은 표이기 때문에, 균등 정렬이 되어 있음)

  • vertical-align 속성은 inline 또는 inline-block 속성에서만 사용가능 한 수식 정렬 속성

형제 선택자

  • 같은 형제 태그를 선택하여 속성을 적용하는 선택자
  • 형제1 + 형제2 (인접 형제 선택자, 바로 뒤에 오는 첫 번째 동생 태그만 선택함)
  • 형제1 ~ 형제2 (형제 선택자, 모든 동생 태그를 선택할 수 있음)

label 메뉴

  • HTML, CSS만 이용하여, 해당 메뉴가 선택되게 만들 수 있음

  • input type="radio" 속성은 동그란 체크 모양을 설정

  • :checked 가상 선택자를 이용하여, if 상태를 만들 수 있음

예) 기본 설정으로 보이지 않게 하고, :checked 가상 선택자를 이용해서 보이게 함

input:nth-of-type(1) ~ div:nth-of-type(1) { display: none; }
input:nth-of-type(1):checked ~ div:nth-of-type(1) { display: block; }

Do it! 웹 표준의 정석 322p ~

대구AI스쿨 2기 JS 2일차
[Docker]portainer설치, 오류해결

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage