멋사 프론트엔드 스쿨 5기 TIL - HTML & CSS - 3월 3일

크롱·2023년 3월 3일

after margin nth-child padding

멋쟁이사자처럼 프론트엔드 스쿨 5기 - HTML & CSS

목록 보기

4/11

책 추천 - 성능최적화
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=304371832

📒 폰트

구글폰트에서 링크로 넘겨오면 다른컴퓨터에서도 잘 보임
개발자 도구 - computed 에서 보면 네트워크 리소스이기 때문이다
여러 폰트사용할경우 class 로 지정해서 적용하고싶은 태그에 넣어주면된다

@font-face

@font-face {
    font-family: "폰트이름";
    src: url("폰트경로") format("woff");
    font-weight: 400;
    font-style: normal;
}

📒 텍스트 꾸미기

font-weight

normal, bold, lighter, bolder, 100 - 900

text-align

텍스트의 가로정렬

left, right, center
justify : 양쪽정렬 l..........l
참고📍 word-break:break-all 도 적용하면 좋다
https://www.codingfactory.net/10658
justify-all: justify랑 같다.마지막 줄까지 적용

vertical-align

텍스트의 세로정렬
주로 큰이미지와 글을 나란히 배치했을때 서로 높이가 맞지 않을 때 사용한다.

display: inline, inline-block 및 테이블 셀 요소에만 적용

🧀 display : inline, inline-block, block

inline: 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치
inline-block : 내 크기만큼 차지 ex. <input>,<button>
inline 처럼 줄바꿈 없이 한 줄에나란히 배치
block 처럼 width 와 height, margin과 padding 상하 간격 지정가능
block : 한 행을 전부 차지 ex. <div>
출처: https://www.daleseo.com/css-display-inline-block/ 매우 자세히 설명되어있음

word-break

텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 경우 줄바꿈 여부를 지정
normal : 기본 줄 바꿈 규칙
break-all : 글 넘침을 방지하기 위해서 문자 사이에 줄바꿈이 발생 (한중일 텍스트는 제외)
keep-all : 한중일 텍스트에서 줄을 바꿀 때 단어를 끊지 않습니다. 비 한중일 텍스트에서는 normal과 동일합니다

text-overflow

텍스트가 넘칠때 표시방법
ellipsis: 말줄임

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste ducimus sapiente quidem! Velit et officia, temporibus ad natus quo. Quae at similique deserunt modi minima ipsum debitis blanditiis ipsa facere!</p>

p { 
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 }

👉 결과:

멀티로 ellipsis 하게되면

.multi-ellipsis {
  overflow:hidden;  
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; <!-- 어디까지 보여줄껀지 -->
}

👉 결과:

📒 ul, ol, dl

ol

숫자 목록
type: 항목을 셀 때 사용할 카운터 유형
- 1: 숫자(기본값)
- a: 소문자 알파벳
- A: 대문자 알파벳
- i: 소문자 로마 숫자
- I: 대문자 로마 숫자
start: 항목을 셀때 시작할 수 (숫자만 가능)
reversed: 순서 역전
순서가 중요한 목록에 적용
ex) 레시피, 브레드크럼

ul

정렬되지 않은 목록
순서가 중요하지 않는 목록에 적용

li

목록의 항목
단독으로 사용X
ol, ul 의 자식요소로만 사용

dl

이미 정의 되어 있거나 설명이 정해져 있는 경우에만 사용
메뉴 혹은 form에 사용NO

📒 CSS 선택자

📌 가상 클래스 선택자

:nth-child()

공백 유무에 따라 자식/형제 선택
div :nth-child () 자식요소 👇

div:nth-child () 형제요소 👇

:first-child

형제 요소 중 첫 번째 요소

:last-child

형제 요소 중 마지막 요소

:nth-child

/* 2번째 li, 0번째라는개념이없음*/
li:nth-child(2) {
  color: lime;
}

/* 홀수번째 li */
li:nth-child(odd) {
  color: lime;
}

/* 짝수번째 li */
li:nth-child(even) {
  color: lime;
}
/* 2n+1번째 li */
li:nth-child(2n+1) {
  color: lime;
}

:nth-of-type

형제 그룹 안에서 위치를 기반으로 형제 요소 선택

<p></p>
<p></p>
<strong></strong>
<p></p>  --> color:blue 작용됨

p:nth-of-type(3){
  color:blue;
}

:only-of-type

형제가 하나라도있으면 적용안됨. 유일해야 적용이됨

:not

부정 선택자

/* li 중 첫번째가 아닌 li */
li:not(:first-child){
	margin-top:20px;
}

:root = html

전역 변수를 선언할때 사용합니다.

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

p{
color: var(--main-color);
}

📌 가상 요소 ::

선택자에 추가하는 키워드
특정 요소의 일부분에만 스타일 적용

::after, ::before

선택한 요소에 자식을 생성합니다
보통 content 속성과 짝을지어 요소에 장식용 콘텐츠를 추가할때 사용합니다.
display: inline-block 을 같이 넣어야할수도잇음.
빈태그 img br input 에는 적용할 수 없습니다.

::placeholder

자리표시자
input, textarea 요소에 정보를 제공합니다.

input::placeholder {
 color: red;
}

📒 CSS Box Model

element, padding, border, margin
- element: 텍스트, 사진 등 보여줄 대상
- padding: 요소 주변 영역을 감쌉니다.
- border: 요소와 패딩을 감싸는 테두리
- margin: 테두리 밖의 영역을 감쌉니다.

📌 padding

padding-top padding-right padding-bottom padding-left 순으로 작성

p{
	padding: 10px; /* top, right, bottom, left 모두 10px */
	padding: 10px 20px; /* top, bottom :10px,  left, right:20px */
	padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
	padding: 10px 20px 30px 40px;
}