CSS 관련
-
border-radius속성을 이용하여, 테두리 곡선 가능
(참고 사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/border-radius#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%ED%98%B8%ED%99%98%EC%84%B1) -
말 줄임 속성 (공식)
white-space: nowrap(자동 줄바꿈 없이 잘려서 나옴)text-overflow: ellipsis(너비 이상 넘어가면 생략 부호 표시)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 ~
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.