[230303] 텍스트 꾸미기 | 목록 태그 | 가상 클래스 선택자 | 가상 요소 선택자 | CSS 선택자 우선순위 | 블록 레벨 요소 vs 인라인 레벨 요소 | CSS Box Model

윤지수·2023년 3월 3일
CSShtml멋쟁이사자처럼
0

멋쟁이사자처럼 프론트엔드스쿨💻

목록 보기
4/51
post-thumbnail

HTML/CSS 두 번째 시간:)
유지보수와 관련된 개념을 알게될 때가 재밌는거 같다ㅎㅎ
똑똑하게 코드 짜는 연습 많이 해야겠다!!

🎨 텍스트 꾸미기

text-shadow

offset-x | offset-y | blur-radius | color

text-align

  • left
  • right
  • center
  • justify : 양쪽정렬
  • justify-all: 양쪽정렬(마지막 줄 적용)

vertical-align

텍스트의 세로정렬을 설정한다
인라인, 인라인 블록 및 테이블 셀 요소에만 적용된다
vertical-align

line-height

letter-spacing

word-spacing

text-indent

문단 첫째줄 빈 공간(들여쓰기)의 길이를 설정한다

word-break

  • normal
  • break-all
  • keep-all

text-overflow

말줄임 처리할 때 자주 사용한다

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

.multi-ellipsis{
  overflow: hidden;  
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

📝 목록 관련 태그

ol

  • type: 항목을 셀 때 사용할 카운터 유형
    • 1: 기본값
    • a
    • A
    • i: 소문자 로마 숫자
    • I: 대문자 로마 숫자
  • start: 항목을 셀때 시작할 수. 아라비아 숫자만 가능.
  • reversed: 순서 역전
    ex) 레시피, 브레드크럼(사이트구조나 페이지 계층구조를 목록으로 나타낸 것)

ul

li

💡 ol,ul의 자식요소로는 li만 사용할 수 있다!

ol의 자식요소 li 특성

  • type: 넘버링 타입. ol 요소에 지정하는 유형을 덮어쓴다
    • 1
    • a
    • A
    • i
    • I
  • value: 항목의 현재 서수 값을 나타내는 정수

dl/dt/dd

definition list의 약자로 설명 목록을 나타낸다
dt(용어), dd (용어설명)
ex) 용어사전, 메타데이터(키-값 쌍의 목록)

🎨 list-style(단축 속성)

  • list-style-image list-style-position list-style-type
    • position : inside, outside
    • type: disc, circle, square, decimal …
  • @counter-style

🎨 CSS 선택자

가상 클래스 선택자

기존에 존재하는, 특별한 상태인 요소를 선택한다

:first-child

:last-child

:nth-child()

/* div 자식 요소 중에 3번째 */
div :nth-child(3) {}

:nth-of-type()

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

/* p의 형제 중 3번째 p */
p:nth-of-type(3) {}

:only-of-type()

동일한 유형의 형제가 없는(형제 요소 중 유일하게 사용된) 태그를 선택한다

:not()

:root

<html> 태그를 선택한다
전역 CSS 변수를 선언할때 사용한다

💡 전역 CSS 변수를 사용하면 유지 보수에 용이하다!

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

가상 요소 선택자

기존에 존재하지 않는 가상의 요소를 만들어 선택한다
특정 요소의 일부분에만 스타일을 입힐 수 있다

::after, ::before

선택한 요소에 자식을 생성한다
보통 content 속성과 짝을지어 요소에 장식용 콘텐츠를 추가할때 사용한다
빈태그 <img> <br> <input> 에는 적용할 수 없다

::placeholder

🎨 CSS 선택자 우선순위

  • 후자우선의 원칙

  • 구체성(명시도)의 원칙
    1. inline 스타일(1000점)
    2. id 선택자(100점)
    3. class 선택자, 가상 클래스 선택자, 속성 선택자(10점)
    4. 타입 선택자, 가상 요소 선택자(1점)
    5. 전체 선택자(0점)

  • 중요성의 원칙
    !important: 이 선언은 다른 CSS의 어떤 선언 보다도 우선합니다.

    💡 important 사용은 좋지 못한 습관입니다.
    CSS의 자연스러운 상속을 깨트리기 때문에 오류/버그 발생 시 수정을 어렵게 만듭니다.

📝 블록 레벨 요소 vs 인라인 레벨 요소

block

블록요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소 안에 중첩될 수 있다(a 태그는 가능)
width, height 크기를 지정할 수 있다
padding, border, margin 속성을 사용할 수 있다

inline

width, height 크기를 지정할 수 없다
padding, border, 좌우 marigin 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없다

🎨 CSS Box Model

width

  • auto: 기본값. 브라우저가 계산하여 지정(요소의 부모 크기 기준으로 가득 채우기)
  • min-content: 최소 너비
  • max-contnet: 컨텐츠 내용의 선호 너비
  • fit-content: auto나 max-contnet 속성을 가진다

기본값은 콘텐츠 영역의 너비이지만 box-sizing 속성을 사용하여 테두리 영역의 너비를 설정할 수 있다

height

box-sizing

  • content-box : 기본값. width, height에 border, padding을 포함하지 않는다
  • border-box: width, height에 border, padding을 포함한다
    • width = 콘텐츠 너비 + border + padding

padding(단축 속성)

margin(단축 속성)

마진병합 현상[Margin Collapsing]

  1. 요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 margin 값이 적용되는 현상
  2. 부모 요소와 자식 요소가 존재하는 경우 자식 요소의 margin-top 혹은 margin-bottom 값이 부모의 높이에 영향을 미치지 않는 현상

마진병합 현상 해결방법

  1. 부모 요소에 overflow 속성 값 적용
  2. 부모 요소에 display: inline-block 값 적용
  3. 부모 요소에 border 값 적용
  4. 부모 요소에 display:flow-root 사용
    (IE 지원 불가, 모바일 브라우저 대응까지 확인)

💡 굳이 마진병합 현상을 해결할 필요 없이 마진 병합 현상을 알고 작업하면 된다. 그래서 보통 여백을 줄 때 padding을 사용한다.

border(단축 속성)

border-width border-style border-color

overflow, overflow-x, overflow-y

border-radius(단축 속성)

border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

profile
윤지수
이전 포스트

[230302] 스니펫 | HTML 주석 | CSS 선택자 | CSS 상속 | 텍스트 태그 | 텍스트 꾸미기

다음 포스트

[230306] CSS Box Model | display | 이미지 태그 | 이미지 비율 유지 | position

0개의 댓글