Programming

[면접] Frontend 기술면접 대비3 - CSS 책 정리

꿈나무 김땡땡 2024. 7. 9. 15:54

https://wikidocs.net/book/9136

 

입문자를 위한 CSS3

웹 개발 입문자들을 대상으로 하는 CSS 교재입니다.

wikidocs.net

 

01. CSS 시작하기

01-1. CSS를 소개합니다

CSS란

  • Cascading Stylesheet 줄임말

CSS 스타일 선언문

선택자 {
	스타일 속성: 스타일 속성 값;
}

주석

/* 
 주석 다는 곳
*/

CSS3

https://caniuse.com/ 에서 브라우저의 스타일 지원 여부 확인 가능

01-2. 웹페이지에 스타일시트 추가하기

1. 인라인 스타일

<p style="color: blue;">글자색을 변경해봅시다</p>

 

2. 내부 스타일 시트: HTML 문서 내부에 CSS 코드 작성

  • <head> 태그 내부에 <style></style> 태그 추가해 그 사이에 작성
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>내부 스타일시트</title>
  <style>
    p{
      color: green;
    }
  </style>
</head>
<body>
  <h1>고양이</h1>
  <strong>식육목 고양이과의 포유류</strong>
  <br><br>
  <img src="../cat.jpg" alt="고양이" width="200">
  <p>식육목(食肉目) 고양이과의 포유류에 속하며, 반려묘 또는 고양이과의 총칭.</p>
</body>
</html>

 

3. 외부 스타일 시트: 스타일 시트를 별도의 파일로 저장한 다음 HTML 문서와 CSS 연결

<!-- 파일명 : index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>외부 스타일시트</title>
  <link href="./style.css" rel="stylesheet">
</head>
<body>
  <h1>고양이</h1>
  <strong>식육목 고양이과의 포유류</strong>
  <br><br>
  <img src="../cat.jpg" alt="고양이" width="200">
  <p>식육목(食肉目) 고양이과의 포유류에 속하며, 반려묘 또는 고양이과의 총칭.</p>
</body>
</html>

01-3. 기본 선택자

선택자 유형

  • 전체 선택자: 문서 내 모든 요소 선택
    • * { 스타일 정의 }
  • 태그 선택자: 특정 태그로 만들어진 모든 요소 선택
    • p { 스타일 정의 }
  • 클래스 선택자: 특정 클래스 값이 지정된 모든 요소 선택
    • .클래스 { 스타일 정의 }
    • 태그명.클래스 { 스타일 정의 }
  • 아이디 선택자: 특정 아이디 값이 지정된 요소 선택
    • #아이디 { 스타일 정의 }
    • 태그명#아이디 { 스타일 정의 }
  • 그룹 선택자: 여러 유형의 선택자 한꺼번에 선택
    • h2, p, li { 스타일 정의 }

선택자 우선순위

  1. 선택자 겹치는 경우: 나중에 작성된 것 적용
  2. 선택자 간 우선순위: 아이디 선택자 > 클래스 선택자 > 태그 선택자

02. 박스 모델 이해하기

02-1. 박스 모델이란?

박스 모델 (Box Model)

  • 박스: 너비와 높이를 가지는 개별 요소
  • 박스 모델: 박스를 네 가지 세부 영역으로 나누어 구분한 일종의 디자인 모델
    • 콘텐츠 영역: 요소 내 포함된 콘텐츠를 표시하는 영역. 관련 속성은 width, height
      • px: 화면을 구성하는 단위인 화소(pixel)를 뜻하는 절대 단위
      • %: 부모 요소의 너비 또는 높이를 백분율로 계산해 적용하는 상대 단위
    • 안쪽 여백: 콘텐츠 주변을 감싸는 여백. 관련 속성은 padding
    • 경계선(테두리): 콘텐츠와 안쪽 여백을 둘러싸는 경계선. 관련 속성은 border
    • 바깥쪽 여백: 경계선 바깥을 가맜는 여백. 관련 속성은 margin

 

  • 웹 요소
    • 인라인 요소는 '콘텐츠 크기 만큼만 공간을 차지'하기 때문에 width, height 속성 따로 적용 X
    • 블록 레벨  요소는 박스 모델 적용

02-2. 경계선 관련 속성 지정하기

경계선 스타일 지정하기

  • border-width: 경계선의 두께
    • thin: 얇게
    • medium: 중간
    • thick: 두껍게
  • border-style: 경계선의 모양 (점선, 실선, 겹선 등)
    • none: 경계선 표시 안함 (기본값)
    • solid: 실선
    • dotted: 점선
    • dashed: 짧은 직선
    • double: 이중선
    • groove: 홈이 파인 듯한 입체적인 형태
  • border-color: 경계선의 색상
  • border: 단축 속성. 경계선의 두께/모양/색상 한꺼번에 지정

border 적용 순서

  • border-width: 전체
  • border-width: 위아래 왼오
  • border-width: 위 왼오 아래
  • border-width: 윗 오 아래 왼
  • border-radius
    • px
    • %

02-3. 여백 관련 속성 지정하기

  • padding: 안쪽 여백 추가
  • margin: 바깥쪽 여백 추가

width, height의 적용 방법을 결정하는 box-sizing

  • box-sizing: width, height가 박스 모델의 영역 중 어떤 영역까지의 크기를 결정할 것인지 지정
    • 기본값: content-box
    • content-box : width, height가 콘텐츠 영역의 크기를 결정하도록 함. 안쪽 여백이나 테두리 크기를 추가 적용하면 요소의 크기가 더 커짐
    • border-box : width, hetight가 안쪽 여백과 테두리까지의 크기를 결정하도록 함. 안쪽 여백이나 테두리 크기를 추가 적용하면 콘텐츠 영역의 크기가 좁아지게 됨

02-4. 박스에 배경 추가하기

  • background-color
  • background-clip: 배경 색상의 요소 내 적용 범위 지정
  • background-image
  • background-origin: 배경 이미지의 요소 내 적용 범위 지정
  • background-size: 배경 이미지의 크기(너비와 높이) 지정
  • background-position: 배경 이미지의 위치
  • background-repeat: 배경 이미지의 반복 여부 및 방식

03. 텍스트 꾸미기

03-1. 글꼴 정하기

  • font-family
    • p { font-family: 글꼴1, 글꼴2, ... }
  • 웹폰트: google font

03-2. 텍스트 꾸미기

  • font-size
    • px: pixel. 화면을 구성하는 단위인 화소(픽셀)를 뜻하는 절대 단위
    • pt: 포인트. 일반 문서에서 많이 사용하는 절대 단위
    • %: 부모 요소의 글자 크기를 백분율로 계산해 적용하는 상대 단위
    • em: 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
    • rem: 루트 요소의 글자 크기를배 수로 계산해 적용하는 상대 단위 
      • 루트 요소: 문서의 시작 부분. 일반적으로 <html> 태그를 의미
  • font-weight: 글자의 두께
    • 100-900: 글자 두께를 100단위로 조절
    • normal: 기본 두께. 400과 동일
    • bold: 두껍게 표시. 700과 동일
    • lighter: 부모 요소의 글자보다 얇게 표시
    • bolder: 부모 요소의 글자보다 두껍게 표시
  • font-style
    • normal
    • italic
    • oblique: 기울임
  • line-height: 각 행의 높이 조절
    • 절대 단위: px, pt
    • 상대 단위: %, em (기준 값은 부모 요소가 아닌 태그 자신의 글자 크기)
    • 수치 적용: 태그 자신의 글자 크기의 배수
  • text-align: 문단에서 텍스트의 위치 정렬
    • left
    • right
    • center
    • justify: 양끝 정렬
  • text-decoration
    • none
    • underline: 밑줄
    • overline: 윗줄
    • line-through: 취소선

03-3. 색 정하기

  • color
    • p { color: red; }
    • 영어 단어
    • rgb 함수: rgb(값1, 값2, 값3)
    • hsl 함수: hsl(값1, 값2, 값3)
    • 16진수 값: #000000; (black)
  • opacity: 투명도 조정
    • opacity: 0.5;

03-4. 요소 유형 바꾸기

display

  • none: 요소를 화면에 표시하지 않음
  • block: 요소를 블록 레벨 요소로 표시
  • inline: 요소를 인라인 요소로 표시
  • inline-block: 요소를 인라인 요소로 표시 + 블록 레벨의 특성 추가
    • 콘텐츠 크기만큼만 공간 차지 (inline)
    • 스타일시트를 이용해 너비/높이 변경 가능
    • 옆으로 나란히 요소를 배치하는 상단 메뉴, 상품 목록 등을 만들 때 유용
  • flex: 요소를 블록 레벨 요소로 표시 + 내부 레이아웃 방식을 flex로 변경
  • inline-flex: 요소를 인라인 요소로 표시 + 내부 레이아웃 방식을 flex로 변경
  • 요소 정리
    • block: 자신이 속한 영역의 가로 길이를 통째로 차지하는 요소
      • 부모 컨테이너의 전체 가로 너비 차지
      • 항상 새로운 줄에서 시작
      • 너비/높이 설정 가능
      • 마진/패딩 설정 가능
      • 다른 block 요소와 수직으로 쌓임
    • inline: 콘텐츠 크기만큼만 공간을 차지하는 요소
      • 콘텐츠 가로 너비만큼 차지
      • 새로운 줄 만들지 않음
      • 너비/높이 설정 불가능
      • 마진/패딩은 수평 방향만 설정 가능
      • 다른 inline 요소와 같은 줄에 배치
    • inline-block
      • 콘텐츠의 가로 너비만큼 or 설정 가능
      • 새로운 줄 만들지 않음
      • 너비/높이 설정 가능
      • 마진/패딩 설정 가능
      • 다른 inline, inline-block 요소와 같은 줄에 배치
        • 네비게이션 바, 갤러리처럼 가로로 배치할 때 사용
        • 요소의 크기 자유롭게 조정할 때 사용
        • 모든 방향에 마진/패딩 적용하면서 가로 배치 할 때 사용
        • 복잡한 레이아웃 구성에 사용

요소 내부의 레이아웃 변경하기 (display: flex;)

  • 플랙스 컨테이너: 플랙스박스 방식으로 레이아웃을 결정할 요소
  • 플랙스 아이템: 플랙스 컨테이너 내부에서 플랙스박스 방식으로 배치되는 요소
  • 지정
    • display: flex;
    • inline 레벨 flexbox: display: inline-flex;

display: flex;

  • flex: 요소를 블록 레벨로 표시
  • inline-flex: 요소를 인라인으로 표시
  • flex, inline-flex는 주축(default: 가로), 교차축을 가지고 있음

 

  • flex-direction: 플랙스 컨테이너의 주축, 플랙스 아이템의 진행 방향 지정
    • row: 가로축, 왼쪽 -> 오른쪽 (기본값)
    • row-reverse: 가로축, 왼쪽 <- 오른쪽
    • column: 세로축, 위 -> 아래
    • column-reverse: 세로축, 위 <- 아래
  • flex-wrap: 플랙스 아이템 정렬시 줄바꿈 여부 지정
    • no-wrap: 주축 방향으로 한 줄 배치 (기본값)
    • wrap: 주축 방향으로 여러 행에 걸쳐 배치
    • wrap-reverse: 주축의 역방향으로 배치
  • flex-flow (단축 속성): flex-direction + flex-wrap
    • flex-flow: row-reverse wrap; --> 2개 함께 제공
  • justify-content: 플랙스 컨테이너의 주축 위에서 플랙스 아이템의 배치 방법 지정 (컨테이너의 주축 길이보다 아이템의 길이 총합이 더 짧은 경우에, 아이템 사이의 남는 공간 어떻게 배치할 것인지 결정)
    • flex-start: 아이템이 주축의 시작점에서 순서대로 배치
    • flex-end: 아이템이 주축의 끝점에서 순서대로 배치 (끝점부터 붙음. 순서는 그대로 유지)
    • center: 아이템이 주축의 중심부에서 순서대로 배치
    • space-between: 아이템이 일정한 간격을 둔 채 양끝 정렬 방식으로 배치
    • space-around: 아이템이 각자 동일한 여백 갖도록 배치 (아이템 간 동일 여백)
    • space-evenly: 아이템 사이의 모든 간격 동일하게 유지된 채 배치 (양 끝 포함 모든 여백 크기 동일)
  • align-items: 플랙스 컨테이너의 교차축 위에서 플랙스 아이템의 배치 방법 지정
    • stretch: 아이템이 교차축 길이에 맞춰 늘어남 (width, height 지정되어 있으면 효력 사라짐)
    • flex-start: 아이템을 교차축의 시작 부터 순서대로 배치
    • flex-end: 아이템을 교차축의 끝 부터 순서대로 배치
    • center: 아이템을 교차축의 중앙에 배치
    • baseline: 아이템을 텍스트의 기준선에 맞춰 배치
  • align-self: 플랙스 컨테이너의 교차축 위에서 플랙스 아이템의 배치 방법 각 아이템에 개별 지정

반응형 웹 만들 때 사용

  • flex-grow: 플랙스 아이템이 기본 크기보다 커질 수 있는지 결정, 컨테이너 내부에서 할당 받을 수 있는 공간을 상대적으로 정의
    • 음수 불가. 양의 정수/실수 가능 (1이면 커질 수 있음)
  • flex-shrink: 플랙스 아이템이 기본 크기보다 작아질 수 있는지 결정, 컨테이너 내부에서 할당 받을 수 있는 공간을 상대적으로 정의
    • 음수 불가. 양의 정수/실수 가능 (1이면 작아질 수 있음)
  • flex-basis: 플랙스 아이템의 초기 크기 지정(콘텐츠 박스 크기). 기본값은 auto
  • flex: flex-grow flex-shrink flex-basis 세 가지 속성을 정의할 수 있는 단축 속성
  • order: 플랙스 아이템의 배치 순서. 지정한 숫자에 맞춰 오름차순으로 배치. 같은 값이면 코드 상의 순서대로 배치 (코드는 그대로. 순서만 변경)

Grid Layout (display: grid;)

격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식

  • 그리드 컨테이너: 그리드 방식으로 레이아웃을 결정할 요소
  • 그리드 아이템: 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소
  • 지정
    • display: grid;
    • display: inline-grid;
  • 컨테이너에 행(row)과 열(column) 제공

 

  • grid-template-columns: 열(column) 트랙 내 아이템 크기 지정
    • none: 기본값
    • 수치: 길이를 나타내는 음수가 아닌 값 지정
    • 그 외: 다양한 키워드나 css 함수 사용 가능
    • 예시
      • grid-template-columns: 100px 100px; (100px 짜리 width 가진 컬럼 2개 생성)
      • grid-template-columns: 100px 1fr 1fr; (fr : 남은 공간에서 해당 비중만큼 차지)
      • grid-template-columns: 10% 1fr 2fr; (fr : 남은 공간에서 해당 비중만큼 차지)
  • grid-template-rows: 행(row) 트랙 내 아이템 크기 지정
    • none: 기본값
    • 수치: 길이를 나타내는 음수가 아닌 값 지정
    • 그 외: 다양한 키워드나 css 함수 사용 가능
    • 예시
      • grid-template-rows: 200px 200px 200px; (3개 행이 200px height 가짐)
  • gap (grid-gap) : 아이템 사이의 간격 지정
    • row-gap, column-gap의 단축 속성
    • normal: 기본값
    • 수치: 길이를 나타내는 값
    • 예시
      • gap: 10px; (아이템 사이 간격 10px)
      • grid-gap: 10px;
      • gap: 20px 10px (행 20px, 열 10px 간격)
  • 트랙(행,열) 관련 함수: 그리드 컨테이너의 트랙 크기 지정 시 사용
    • repeat() : 반복되는 값 자동으로 처리
      • grid-template-columns: repeat(5, 100px); (칼럼 5개 반복)
      • grid-template-rows: repeat(5, 1fr); (행 5개 반복)
    • minmax() : 최솟값, 최댓값 각각 지정
      • grid-template-columns: repeat(5, minmax(100px, 200px)); 
    • auto-fill & auto-fit : 반응형 고려해 사용 가능한 키워드들
      • grid-template-columns: repeat(auto-fill, 100px); 
        • 컨테이너의 빈 공간을 남김
      • grid-template-columns: repeat(auto-fit, 100px); 
        • 컨테이너의 빈 공간을 아이템이 채움
  • grid-column & grid-row : 그리드 컨테이너의 줄 번호를 이용해 아이템 배치
    • grid-row: 1 / 3; (1행 - 3행까지 차지)

 

  • grid-row-start: 줄 번호 시작
  • grid-row-end: 줄 번호 끝
  • grid-column-start: 줄 번호 시작
  • grid-column-end: 줄 번호 끝

 

  • grid-template-areas: 그리드 영역(아이템)의 이름을 이용해 레이아웃의 형태 정의 (아이템 여러번 쓸수록 차지하는 영역 커짐)
    • [예시]
      grid-template-areas:
      " 거 거 호"
      " 다 다 청"
      "고 고 고"; (빈 공간은 . 으로 표시)
    • [예시2]
      li:nth-child(1){ grid-area: 거; }
      li:nth-child(2){ grid-area: 호; }
      li:nth-child(3){ grid-area: 다; }
      li:nth-child(4){ grid-area: 청; }
      li:nth-child(5){ grid-area: 고; }
  • justify-items: 수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때. 아이템에 할당된 열 방향 너비가 기준
    • stretch: 기본값. 그리드 아이템들이 트랙 너비만큼 확장
    • start: 트랙 상단으로부터 하단을 향해 배치
    • end: 트랙 하단으로부터 상단을 향해 배치
    • center: 할당된 공간의 중심부에 배치
  • justify-self: 개별 아이템 속성
  • align-items: 그리드 컨테이너 행 트랙의 높이를 기준으로 그리드 아이템의 배치 결정
    • stretch: 기본값. 그리드 아이템들이 트랙 높이만큼 확장
    • start: 트랙 상단으로부터 하단을 향해 배치
    • end: 트랙 하단으로부터 상단을 향해 배치
    • center: 할당된 공간의 중심부에 배치
  • align-self: 개별 아이템 속성
  • justify-content: 그리드 컨테이너의 수평축에서의 아이템 정렬 방식 결정 (트랙의 여유 공간 있을 때 사용)
    • start: 트랙 시작점으로부터 끝점을 향해 배치
    • end: 트랙 끝점으로부터 시작점을 향해 배치
    • center: 트랙의 중심부에 배치
    • space-between: 트랙에서 일정한 간격을 둔 채 양끝 정렬 배치
  • align-content: 그리드 컨테이너의 수직축에서의 아이템 정렬 방식 결정 (트랙의 여유 공간 있을 때 사용)
    • start: 트랙 시작점으로부터 끝점을 향해 배치
    • end: 트랙 끝점으로부터 시작점을 향해 배치
    • center: 트랙의 중심부에 배치
    • space-between: 트랙에서 일정한 간격을 둔 채 양끝 정렬 배치

구분: Flexbox - Grid

공통점 둘 다 CSS 레이아웃 시스템 둘 다 CSS 레이아웃 시스템
  레이아웃과 정렬에 유용한 도구 레이아웃과 정렬에 유용한 도구
  부모 요소에 적용 부모 요소에 적용
  가변적인 레이아웃 구성 가능 가변적인 레이아웃 구성 가능
     
차이점    
레이아웃 차원 1차원 (행 또는 열) 2차원 (행과 열)
주요 목적 주로 간단한 레이아웃이나 항목 정렬에 사용 복잡한 레이아웃 구성에 적합
정렬 방식 주 축(main axis)과 교차 축(cross axis) 기반 행(row)과 열(column)을 명시적으로 정의하여 사용
공간 분배 항목 간의 공간을 유연하게 조정 그리드 셀을 기반으로 공간을 정밀하게 분배
구문 예 display: flex; display: grid;
  flex-direction: row; grid-template-columns: repeat(3, 1fr);
  justify-content: center; grid-gap: 10px;
  align-items: center; grid-template-rows: auto;
사용 상황 한 방향으로 항목 배치 및 정렬 시 복잡한 페이지 레이아웃이나 정교한 배치가 필요할 때
브라우저 지원 모든 현대적인 브라우저에서 지원 모든 현대적인 브라우저에서 지원

04. 요소 위치 바꾸기

04-1. 문서의 흐름 이해하기

float

  • 선택된 요소가 문서의 흐름에서 제외되어 부모 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 것
  • none: 기본값. 요소를 일반적인 문서의 흐름에 맞게 배치
  • left: 요소를 부모 요소의 왼쪽에 배치
  • right: 요소를 부모 요소의 오른쪽에 배치
  • '부동 요소'라고 함 (위치를 이동하면서 다른 요소의 공간에까지 영향)

clear

  • 문서에 부동 요소가 있는 경우 부동 요소 이후에 오는 요소가 부동 요소와 공간을 함께 사용할지, 부동요소로부터 받는 영향을 해제할지 결정할 수 있는 속성
  • both: 부동요소의 left, right 양 쪽의 영향 모두 해제
  • left: 부동요소의 left로부터 받는 영향 해제
  • right: 부동요소의 right로부터 받는 영향 해제

04-2. 여러가지 방식으로 위치 정하기

position

  • 요소의 위치를 어떤 방식으로 결정할 것인지를 지정하는 속성
  • static: 기본값. 요소를 일반적인 문서의 흐름에 맞게 배치
  • relative: 문서의 흐름에 맞춰 배치된 자리를 기준으로 요소를 이동
  • absolute: position이 지정된 상위 요소를 기준으로 요소를 이동. 이때 요소는 문서의 흐름에서 제외
  • fixed: 화면을 기준으로 요소의 위치를 고정

위치 이동시 기준점 (보통 top, left 같이 지정)

  • top: 박스의 윗면 기준으로 요소가 얼마만큼 이동할 것인지를 결정
  • bottom : 박스의 아랫면을 기준으로 요소가 얼마만큼 이동할 것인지를 결정
  • left : 박스의 왼쪽 면을 기준으로 요소가 얼마만큼 이동할 것인지를 결정
  • right : 박스의 오른쪽 면을 기준으로 요소가 얼마만큼 이동할 것인지를 결정
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>relative</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      color: white;
      background-color: orange;
    }
    .rel{ 
      background-color: orangered;
      position: relative;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<body>
  <div>1</div>
  <div class="rel">2</div>
  <div>3</div>
</body>
</html>

04-3. 겹치거나 넘치는 요소 다루기

요소의 겹침 현상과 z-index

  • z-index: 요소의 z축 (유저가 바라보는 화면의 방향) 위에서의 순서를 제어
    • stacking context: 유저가 바라보는 화면을 기준으로 z 축을 만들어 HTML 요소를 3차원화 한 개념
  • 정수로 지정. 정수 값이 클수록 사용자 방향에 가까움
  • position 속성이 기본값 외 다른 값으로 지정된 경우에만 적용 가능
  • z-index 수치는 상대적이므로 반드시 1부터 시작할 필요는 없음
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      color: white;
      position: relative;
    }
    .div1{ background-color: orange; z-index: 4; }
    .div2{ background-color: tomato; bottom: 50px; z-index: 3; }
    .div3{ background-color: purple; bottom: 100px; z-index: 2;}
    .div4{ background-color: yellow; bottom: 150px; z-index: 1;}
  </style>
</head>
<body>
  <div class="div1">ORANGE</div>
  <div class="div2">TOMATO</div>
  <div class="div3">PURPLE</div>
  <div class="div4">YELLOW</div>
</body>
</html>

요소의 콘텐츠가 너무 클 때 overflow

  • visible: 기본값. 영역 벗어난 콘텐츠 그대로 보여줌
  • hidden: 영역 벗어난 콘텐츠 잘라냄
  • scroll: 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 하고, 잘려진 콘텐츠 진행 방향으로 스크롤을 만듦
  • auto: 웹 브라우저의 설정 값을 따름. 데스크톱 브라우저에서는 주로 scroll로 처리
  • overflow-x, overflow-y 속성을 따로 지정도 가능
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>overflow</title>
  <style>
    p{
      width: 300px;
      height: 100px;
      border: 1px solid black;
      overflow: hidden scroll; 
    }
  </style>
</head>
<body>
  <img src="../puppy.jpg" width="100" id="two">
  <p>
    프렌치 불독은 실내에서 기르기에 적당한 크기로 명랑하고 움직임이 빠르다. 
    단단한 체력을 가졌으며 활력이 넘친다. 
    장난을 좋아하나 짖는 일이 거의 없어 가정견으로 적합하다. 
    영리하고 용감하여 경비견으로 훈련시키기도 쉽다. 
  </p>
</body>
</html>

05. 사용자 경험 고려하기

05-1. 선택자 더 알아보기

속성 선택자 (Attribute)

  • 태그명[속성명] { 스타일 정의 ... }
  • img[title] { width: 160px; ... }

특정 속성값이 정의 되어 있는 요소 선택하기

  • 태그명[속성명="속성값"] { 스타일 정의 ... }
  • img[title="불독"] { width: 180px; ... }

속성 값에 특정 값이 포함되어 있는 요소 선택하기

  • 태그명[속성명 *= "속성값"] { 스타일 정의 ... }
  • img[title*="귀여운"] { width: 180px; ... }

특정 속성값으로 시작하거나 끝나는 속성이 정의된 요소 선택하기

  • 특정 속성값으로 시작하는 요소
    • 태그명[속성명 ^= "속성값"] { 스타일 정의 ... }
  • 특정 속성값으로 끝나는 요소
    • 태그명[속성명 $= "속성값"] { 스타일 정의 ... }

결합 선택자

  • 둘 이상의 선택자를 결합한 것

하위 요소 선택하기

  • 상위요소 하위요소 { 스타일 정의 }
  • div p { font-size: 0.8em; }

자식 요소 선택하기

  • 부모요소 > 자식요소 { 스타일 정의 }
  • body > p { font-size: 0.8em; }

인접 형제 요소 선택하기

  • 이어지는 형제 요소 중 첫번째 형제 요소만 선택
  • 형제요소 + 형제요소 { 스타일 정의 }
  • img + p { font-size: 0.8em; }

모든 형제 요소 선택하기

  • 이어지는 형제 요소 중 모든 형제 요소 선택
  • 형제요소 ~ 형제요소 { 스타일 정의 }
  • img ~ p { font-size: 0.8em; }

05-2. 의사 클래스와 의사 요소

의사 클래스 (p:pseudo 로 선택)

  • 선택한 요소가 어떤 상태에 머무르고 있을 때 또는 어떤 조건을 만족하는 경우에만 스타일을 적용하기 위해 사용
  • 선택자:의사클래스 { 스타일 정의 }

특정 상태에 대한 의사 클래스

  • hover : 요소에 마우스 포인터가 올려져 있는 상태를 나타냅니다.
  • active : 요소가 클릭되어 활성화되어 있는 상태를 나타냅니다.
  • focus : 요소에 초점이 맞추어져 있는 상태를 나타냅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>의사 클래스</title>
  <style>
    a:hover, a:focus{ color: white; background-color: gray; }
    a:active{ color: white; background-color: black; }
  </style>
</head>
<body>
  <ul class="menu">
    <li><a href="#">사전</a></li>
    <li><a href="#">뉴스</a></li>
    <li><a href="#">증권</a></li>
    <li><a href="#">지도</a></li>
  </ul>
</body>
</html>

 

입력 요소의 상태에 따른 의사 클래스

  • disabled : 요소가 사용 불가 상태임을 나타냅니다.
  • enabled : 요소가 사용 가능한 상태임을 나타냅니다.
  • checked : 체크박스나 라디오버튼 같은 선택 항목이 선택된 상태임을 나타냅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>입력 요소와 의사 클래스</title>
  <style>
    input:disabled{
      background-color: gray;
    }
    input:checked{
      height: 20px;
      width: 20px;
    }
    input:checked + label{
      font-weight: 900;
    }
  </style>
</head>
<body>
  <form method="post" action="fake_server.php">
    <fieldset>
      <legend>이름과 나이</legend>
      <label for="name">이름</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="age">나이</label>
      <input type="number" id="age" name="age" disabled>
    </fieldset>
    <fieldset>
      <legend>좋아하는 음식을 모두 고르세요</legend>
      <input type="checkbox" name="food" id="one">
      <label for="one">제육볶음</label>
      <input type="checkbox" name="food" id="two">
      <label for="two">돈까스</label>
      <input type="checkbox" name="food" id="three">
      <label for="three">순대국밥</label>
    </fieldset>
  </form>
</body>
</html>

 

조건을 만족할 때의 스타일을 지정하는 의사 클래스

  • first-child : 자식 요소 중 첫 번째 요소를 선택합니다.
  • last-child : 자식 요소 중 마지막 요소를 선택합니다.
  • nth-child(n) : 자식 요소 중 n번째 요소를 선택합니다.
  • nth-last-child(n) : 자식 요소 중 끝에서 n번째 요소를 선택합니다.
  • first-of-type : 형제 요소 중 자신의 유형과 일치하는 첫 번째 요소를 선택합니다.
  • last-of-type : 형제 요소 중 자신의 유형과 일치하는 마지막 요소를 선택합니다.
  • nth-of-type(n) : 형제 요소 중 자신의 유형과 일치하는 n번째 요소를 선택합니다.
  • nth-last-of-type(n) : 형제 요소 중 자신의 유형과 일치하는 끝에서 n번째 요소를 선택합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>구조 기반 의사 클래스</title>
  <style>
    /* 
      .info의 하위 요소 중 2번째 형제와 끝에서 5번째 형제 선택! 
      둘은 결국 같은 요소를 지정한 선택자입니다.
    */
    .info :nth-child(2){
      background-color: yellow;
    }
    .info :nth-last-child(5){
      color: purple;
    }

    /* 
      .info의 하위 요소 p 중에서 마지막 형제와 끝에서 1번째 형제 선택! 
      둘은 결국 같은 요소를 지정한 선택자입니다.
    */
    .info p:last-of-type{
      background-color: orange;
    }
    .info p:nth-last-of-type(1){
      color: teal;
    }
  </style>
</head>
<body>
  <h1>페키니즈</h1>
  <div class="info">
    <h2>외모</h2>
    <p>
      사자 같은 모습에 기민하고 영리한 인상을 풍긴다. 
      체구가 작고 균형이 잘 잡힌 견종으로, 적당히 두툼한 체형에서 위엄과 우수한 특성이 느껴진다. 
    </p>
    <h2>성향</h2>
    <p>
      겁이 없고 충성심이 강하다. 주변에 무관심한 편이나 소심하거나 공격적이지 않다.
    </p>
    <h2>관리</h2>
    <p>
      이상적인 체중은 수컷의 경우 5kg, 암컷은 5.4kg을 초과하지 않아야 한다. 
      겉으로는 작아 보이지만 들어보면 굉장히 무거운 특징이 나타나야 한다. 
      두꺼운 골격과 단단한 체형은 페키니즈가 갖추어야 할 필수 요건이다.
    </p>
  </div>
</body>
</html>

 

의사 요소(p::pseudo로 선택)

문서 내에서 기본 선택자로 선택하기 어려운 부분에 스타일을 지정하거나 가상의 요소를 만들어 추가하기 위해 사용하는 키워드

  • first-letter : 블록 레벨 요소 내 텍스트 중 첫 번째 문자를 선택합니다.
  • first-line : 블록 레벨 요소 내 텍스트의 첫 번째 줄을 선택합니다.
  • marker : 목록 요소 내 항목의 마커(기호)를 선택합니다.
  • placeholder : 입력 요소의 플레이스홀더(안내문)를 선택합니다.

가상 요소 만들어 추가하기

  • before / after 사용
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>의사 요소</title>
  <style>
    li.mvp::after{
      content: "MVP";
      font-size: 0.6em;
      padding: 2px;
      border-radius: 2px;
      background-color: blue;
      color: white;
      position: relative;
      bottom: 2.5px;
      left: 5px;
    }
  </style>
</head>
<body>
  <h2>출전 선수 목록</h2>
  <li>김도혁</li>
  <li>홍시후</li>
  <li>민경현</li>
  <li class="mvp">이명주</li>
  <li>델브리지</li>
  <li>이태희</li>
  <p>INFO : 이명주 선수가 이번 경기 MVP로 선정되었습니다!</p>
</body>
</html>

 

05-3. 변형과 전환 효과 추가하기

transform 속성

  • translate(x, y) : 지정한 크기만큼 x축, y축 방향으로 이동합니다.
  • scale(x, y) : 지정한 크기만큼 x축, y축으로 확대 및 축소합니다.
  • skew(x, y) : 지정한 각도만큼 x축, y축으로 비틀어 왜곡합니다.
  • rotate(deg) : 지정한 각도만큼 회전합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>TRANSLATE</title>
  <style>
    .parent{ 
      display: inline-block;
      border: 1px solid orangered; 
      margin: 0 20px;
    }
    .child{
      width: 150px;
      height: 150px;
      background-color: teal;
    }
    .parent:nth-child(1) > .child{ transform: translate(20px, 30px); }
    .parent:nth-child(2) > .child{ transform: translateX(20px); }
    .parent:nth-child(3) > .child{ transform: translateY(30px); }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

 

transition 속성

transform은 축 값을 변경하는 단순한 형태

transition은 복잡한 스타일 변경 가능

  • transition-property : 변화 대상 속성을 지정합니다.
  • transition-duration : 변화가 실행될 시간을 지정합니다.
  • transition-delay : 변화 시작 전 지연 시간을 지정합니다.
  • transition-timing-function : 변화 실행 시 실행 곡선 방식을 지정합니다.
  • transition : 단축 속성으로 변화 속성, 시간, 실행 곡선 등을 한 번에 지정합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>TRANSITION</title>
  <style>
    div{
      width: 100px; 
      height: 100px;
      background-color: orange;

      transition-property: width, height, background-color;
      transition-duration: 1s;
      transition-delay: 500ms;

    }
    div:hover{
      width: 300px;
      height: 200px;
      background-color: orangered;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

 

transition 변화 실행 곡선 지정: transition-timing-function

  • ease : 기본값으로, 점점 속도가 빨라지다가 끝날 때 다시 느려지는 방식입니다.
  • linear : 처음부터 끝까지 같은 속도로 진행합니다.
  • ease-in : 느리게 시작했다가 점점 빨라집니다.
  • ease-out : 빠르게 시작했다가 점점 느려집니다.
  • ease-in-out : 느리게 시작했다가 빨라지고, 끝날 때쯤 다시 느려집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>TRANSITION</title>
  <style>
    body{ 
      display: flex; 
      justify-content: space-around;
    }
    div{
      width: 100px; 
      height: 100px;
      color: white;
      background-color: orange;
      text-align: center;

      transition-property: height;
      transition-duration: 3s;
    }
    body:hover > div{
      height: 300px;
      background-color: orangered;
    }
    div:nth-child(1){ transition-timing-function: ease; }
    div:nth-child(2){ transition-timing-function: linear; }
    div:nth-child(3){ transition-timing-function: ease-in; }
    div:nth-child(4){ transition-timing-function: ease-out; }
    div:nth-child(5){ transition-timing-function: ease-in-out; }
  </style>
</head>
<body>
  <div>ease</div>
  <div>linear</div>
  <div>ease-in</div>
  <div>ease-out</div>
  <div>ease-in-out</div>
</body>
</html>

 

⭐️ transition 관련 속성 한꺼번에 지정하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>TRANSITION</title>
  <style>
    div{
      width: 100px; 
      height: 100px;
      background-color: green;

      transition: background-color 2s 300ms linear,
      width 2s 300ms linear,
      height 2s 300ms linear;

    }
    div:hover{
      background-color: red;
      width: 300px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

 

05-4. 애니메이션 만들기

애니메이션 정의하는 @keyframes

/* 백분율 이용하기 */
@keyframes 식별자{ 
  20%{ …스타일 정의… }
  40%{ …스타일 정의… }
  60%{ …스타일 정의… }
  80%{ …스타일 정의… }
  100%{ …스타일 정의… }
}

/* 키워드 이용하기 */
@keyframes 식별자{ 
  from{ …스타일 정의… }
  to{ …스타일 정의… }
}

 

백분율은 시작할 때가 0% -> 끝날 때가 100%

@keyframes rotate{
  0%{ transform: rotate(0deg);}
  50%{ transform: rotate(180deg);}
  100%{ transform: rotate(360deg);}
}

 

animation 속성으로 애니메이션 적용하기

  • animation-name : @keyframes로 정의한 애니메이션 식별자를 지정합니다.
  • animation-duration : 애니메이션 실행 시간을 지정합니다.
  • animation-delay : 애니메이션 실행 시작 전 지연 시간을 지정합니다.
  • animation-iteration-count : 애니메이션 반복 횟수를 지정합니다.
  • animation-direction : 애니메이션 반복 실행 시 동작 진행 방향을 지정합니다.
  • animation-timing-function : 애니메이션 실행 시 속도 변화 방식을 지정합니다.
  • animation : 애니메이션 관련 속성들을 한꺼번에 지정하는 단축 속성입니다.

animation 진행 방향 (순서) 지정하기: animation-direction

  • normal : 기본값으로, 시작 지점에서 끝 지점으로 진행합니다.
  • reverse : 끝 지점에서 시작 지점으로 진행합니다.
  • alternate : 반복 시 홀수 번째에는 normal로, 짝수 번째에는 reverse로 진행합니다.
  • alternate-reverse : 반복 시 홀수 번째에는 reverse로, 짝수 번째에는 normal로 진행합니다.

animation 관련 속성 한꺼번에 지정하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>ANIMATION</title>
  <style>
    div{
      width: 100px; 
      height: 100px;
      margin: 100px;

      animation: rotate 3s 0s alternate-reverse infinite linear;
    }
    @keyframes rotate{
      from{ 
        transform: rotate(0deg);
        background-color: green;
      }
      to{ 
        transform: rotate(360deg);
        background-color: red;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

 

05-5. 상속과 공용 키워드 이해하기

스타일 상속

  • 스타일 상속 지원 : color, font-size, font-style, font-weight, font-family, text-align, visibility, opacity 등
  • 스타일 상속 미지원 : width, height, margin, padding, border, background, position, float, box-sizing 등

공용 키워드

모든 스타일 속성의 상속 여부를 별도로 제어 가능

  • inherit : 해당 속성의 값을 부모 요소의 값과 동일하게 지정합니다.
  • initial : 해당 속성의 값을 브라우저에서 정한 기본값으로 지정합니다.
  • unset : 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>공용 키워드 추가</title>
  <style>
    .list{

      /* 상속 지원 */
      color: brown;
      font-style: italic;
      font-weight: 900;

      /* 상속 미지원 */
      border: 3px dashed green;
      padding: 0;

    }

    /* 공용 키워드 추가 적용 */
    ul{
      border: inherit; 
    }
    li:nth-child(3){
      color: initial;
      font-style: initial;
      font-weight: initial;
    }

  </style>
</head>
<body>
  <h2>가을에 열리는 마라톤 대회</h2>
  <div class="list">
    <ul>
      <li>대전 3대 하천 마라톤</li>
      <li>대전 대청호 마라톤</li>
      <li>천안 이봉주 마라톤</li>
      <li>춘천 마라톤</li>
    </ul>
</div>
</body>
</html>

 

 

저작자표시