[LG유플러스]유레카 SW

[Day3] CSS 기초 & bootstrap

옝옹 2025. 1. 22. 23:04
css 강의는 새로 알게된 개념과 면접에서 필요한 개념 위주로 정리해보았다.

 

CSS Box model

- 디자인과 레이아웃을 설명할 때 사용된다.

- box model은 본질적으로 모든 html 요소를 감싸는 상자이다.

  • Content - 텍스트와 이미지가 나타나는 상자의 내용
  • Padding - 콘텐츠 주변 영역을 지웁니다. padding은 투명합니다.
  • Border - 패딩과 콘텐츠를 둘러싼 테두리
  • Margin - 테두리 밖의 영역을 지웁니다. margin은 투명합니다.

** 요소의 총 width와 height를 계산하려면 padding과 border도 포함해야 한다. **

 

css outline

: border 바깥쪽에 그려진 선

 

CSS Font

.p1 {
  font-family: "Times New Roman", Times, serif;
}
  • font-family 속성은 브라우저/운영 체제 간의 최대 호환성을 보장하기 위해 "대체" 시스템으로 여러 글꼴 이름을 보유해야 합니다.
  • 두번째, 세번째 글꼴은 첫 번째 글꼴을 찾을 수 없는 경우를 대비한 백업

CSS Links

상태에 따라 link의 스타일이 다르게 지정될 수 있다.

  1. a:link- 일반적인 방문하지 않은 링크
  2. a:visited- 사용자가 방문한 링크
  3. a:hover- 사용자가 마우스를 올리면 링크가 표시됩니다.
  4. a:active- 클릭하는 순간 링크

** a:hover는 a:link와 a:visited 뒤에 와야 하며, a:active는 a:hover 뒤에 와야 합니다. **

 

CSS Display

화면에 어떻게 드러날지를 결정

block 기본값
width가 100%가 되게함 -> 전체 너비를 차지한다.
inline 새 줄에서 시작하지 않는 컨텐츠만 감쌀 정도의 크기
inline-block inline 속성을 갖지만 임의로 크기 변경 가능
none 화면에서 사라짐
display : none OR visibility : hidden
  • display: none 
    • 요소가 숨겨지고 페이지는 요소가 없는 것처럼 표시
  • visibilty : hidden
    • 요소가 숨겨지지만 레이아웃에는 있는 것처럼 영향을 미침

CSS Position

문서 상에 요소를 배치하는 방법

static 작성된 순서대로 브라우저에 표시
static 으로 위치한 요소는 위쪽, 아래쪽, 왼쪽, 오른쪽 속성의 영향을 받지 않습니다.
relative 원래 위치를 상대적으로 배치
fixed 특정 부분에 고정
absolute 배치 기준을 가장 가까운 위치에 지정된 상위요소에서 찾음
부모 요소를 기준으로 속성 적용
sticky 사용자의 스크롤 위치를 기준으로 요소가 배치됨
즉, 스크롤링할 때 효과를 봄

 

CSS Float

float 속성

: 콘텐츠의 위치와 형식을 지정하는 데 사용

오른쪽, 왼쪽으로 객체를 띄어서 정렬하는 속성

사진에 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 둘러싼 형태가 된다.

  • left- 요소는 컨테이너의 왼쪽에 떠 있습니다.
  • right- 요소가 컨테이너의 오른쪽에 떠 있습니다.
  • none- 요소는 떠다니지 않습니다(텍스트에서 발생한 위치에만 표시됩니다). 이는 기본값입니다.
  • inherit- 요소는 부모의 float 값을 상속받습니다.

img { float: right;}

 

사진 주위로 글자가 따라 붙지 않게 하려면 ?

-> clear 속성

: float바로 아래에 있는 요소(오른쪽이나 왼쪽이 아닌)를 원할 경우 해당 속성을 사용해야 한다.

  • none - 기초값, clear를 설정하지 않는 것과 같음
  • left - 요소는 왼쪽에 떠 있는 요소 아래로 밀려납니다. (왼쪽 취소)
  • right - 해당 요소는 오른쪽에 떠 있는 요소 아래로 밀려납니다. (오른쪽 취소)
  • both - 해당 요소는 왼쪽 및 오른쪽 플로팅 요소 아래로 푸시됩니다. (오른쪽 왼쪽 취소)
  • inherit - 요소는 부모로부터 명확한 값을 상속받습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

clear를 사용하지 않았을 때 vs 사용했을 떄

 

CSS Pseudo-classes (가상 클래스)

: 요소의 특별한 상태를 정의하는 데 사용된다.

 

예를 들어,

  • 사용자가 마우스를 요소 위로 가져갈 때 요소 스타일을 지정할 때
  • 방문한 링크와 방문하지 않은 링크의 스타일을 다르게 지정할 때
  • 포커스가 맞춰지면 요소에 스타일을 지정할 때
  • 유효한/잘못된/필수/선택 양식 요소 스타일
가상 클래스 하는 일
:first-child 자식요소 중에 가장 첫번째를 선택하는 가상클래스
:last-child 자식요소 중에 가장 마지막을 선택하는 가상클래스
:nth-child() 자식요소 중에 형제 요소 중 n번째를 선택하는 가상클래스
:nth-child(odd)  -> 홀수 선택 , even(짝수)

 

CSS Pseudo-element(가상 요소)

: 요소의 특정 부분에 스타일을 지정하는 데 사용

 

예를 들어, 

  • 요소의 첫 글자 또는 줄에 스타일 지정
  • 요소 앞이나 뒤에 콘텐츠 삽입
  • 목록 항목의 마커 스타일 지정
  • 대화 상자 뒤에 있는 뷰박스 스타일 지정

Syntax

selector::pseudo-element {
  property: value;
}

 

가상 요소 하는 일
::first-line  텍스트의 첫 번째 줄에 특별한 스타일을 추가한다
::first-letter 텍스트의 첫번째 글자에 스타일 추가
::before 요소의 내용 앞에 어떤 내용을 삽입하는 데 사용
::after 요소의 내용 뒤에 일부 내용을 삽입하는 데 사용

 

CSS Combinators

  • 후손 결합자(space)
  • 자식 결합자 (>)
    • 지정된 요소의 자식인 모든 요소
  • 다음 형제 결합자 (+)
    • 특정 요소 바로 뒤에 있는(바로 뒤에 배치된 첫번째) 요소
  • 후속 형제 결합자 (~)
    • 지정된 요소의 다음 형제인 모든 요소

 

CSS Flexbox

  • Flexbox는 Flexible Box Layout 모듈의 약자
  • 항목을 행이나 열로 배열하는 레이아웃 방법
  • Flex를 사용하면 float를 사용하지 않고도 유연하게 반응형 레이아웃 구조를 디자인할 수 있음

구성요소

  • Flex container - 부모(컨테이너) <div> 요소
  • Flex Items - 컨테이너 내부의 항목 <div>

강사님이 알려주신 아래 웹 게임으로 flexbox에 대해

적용해보며 이해할 수 있었다 

어렵다면 한번씩 해봐도 좋을거같다 ~

https://flexboxfroggy.com/#ko 

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

Bootstrap5

  • Bootstrap5는 반응형 모바일 웹사이트를 만드는데 가장 인기있는 부트스트랩의 최신 버전
    • Bootstrap 이란 ? 더 빠르고 쉬운 웹 개발을 위한 무료 프런트엔드 프레임워크
    • 반응형 웹 이란 ? 작은 휴대폰에서 대형 데스크톱까지 보기 좋게 보이도록 자동 조정되는 웹 사이트
  • Bootstrap 3, 4와 주요 차이점은 Bootstrap 5가 jQuery 대신 vanilla JavaScript로 전환했다는 것

Bootstrap 장점

  • 사용이 간편 : HTML과 CSS에 대한 기본 지식만 있다면 사용 가능
  • 반응형 기능 : 휴대폰, 테블릿, 데스크탑에 맞게 조정
  • 모바일 우선 접근 방식
  • 브라우저 호환성 : 모든 최신 브라우저와 호환됨. 하지만 IE11이하에 대한 지원이 필요한 경우 BS4 또는 BS3 사용

Bootstrap 5 CDN

: bootstrap5를 직접 다운로드하고 싶지 않다면 CDN에 포함하여 작성

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

 

Bootstrap5 Containers

컨테이너 내부의 내용을 채우는데 사용된다.

  1. 클래스 .container는 반응형 고정 너비 컨테이너를 제공
  2. 클래스 .container-fluid는 뷰포트의 전체 너비에 걸쳐 전체 너비 컨테이너를 제공

 

Fixed Container

클래스를 사용해 .container 반응형 고정 너비 컨테이너를 만든다.

** 화면 크기에 따라 max-width가 변경 된다는 점을 유의 ! ** 

  Extra small
< 576px		 Small
>= 576px		 Medium
>= 768px		 Large
>= 992px		 Extra Large
>= 1200px		 XXL
>= 1400px
max-width 100% 540px 720px 960px 1140px 1320px

 

Fluid Container

항상 화면 전체 너비에 걸쳐져 있는 전체 너비 컨테이너를 생성한다. (width is always 100%)

 

Container Padding

container는 왼쪽 오른쪽 패딩이 있고, 위 아래는 패딩이 없다. 패딩이 필요할 때 간격 유틸리티를 .pt-5를 사용해 적용시킨다.

<div class="container pt-5"></div>

 .pt-5는 'paddint-top'을 의미한다.

 

Responsive Container

  • .container-sm|md|lg|xl 클래스를 사용하여 컨테이너가 언제 반응해야 하는지 결정할 수 있다.
  • max-width 컨테이너의 는 다양한 화면 크기/뷰포트에서 변경된다.

 

Bootstrap 5 Grid System

  • flexbox를 기반으로 구축되었으며 페이지 전체를 최대 12개의 열로 나눠어 생각
  • 12개의 열을 모두 개별적으로 사용하고 싶지 않으면 열을 그룹화하여 더 넓은 열을 만들 수 있습니다.

 

Grid Classes

  • .col-(매우 작은 기기 - 화면 너비가 576px 미만)
  • .col-sm-(소형 기기 - 화면 너비가 576px 이상)
  • .col-md-(중간 장치 - 화면 너비가 768px 이상)
  • .col-lg-(대형 기기 - 화면 너비가 992px 이상)
  • .col-xl-(대형 기기 - 화면 너비가 1200px 이상)
  • .col-xxl-(xxlarge 장치 - 화면 너비가 1400px 이상)

 

Three Equal Columns

.col 클래스 사용

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

 

 

Responsive Columns

(ex1) 초대형 데스크톱으로 확장되는 4개의 동일 너비 열을 만드는 방법

<!-- 모바일 폰이나 너비가 576px 미만인 화면에서는 열이 자동으로 서로 위에 쌓인다-->
<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

(ex2) 두 개의 다양한 너비의 열을 가져오는 방법

 

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

: col-sm-3 : sm크기가 되면 반응형

 

Bootstrap5 Text/Typography

- Bootstrap 5는 기본값 font-size는 1rem(기본값 16px)을 사용하며 이는 line-height는 1.5이다.

 

<h1> ~ <h6>

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

 

Display Headings (.display-1 ~ .display-6)

: 일반 헤딩보다 더 눈에 띄도록 사양됨 -> 글자 크기가 더 크고 글꼴 두께가 더 가벼움

<div>
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
  <h1 class="display-5">Display 5</h1>
  <h1 class="display-6">Display 6</h1>
</div>

 

<small>

모든 제목에 더 작고 보조적인 텍스트를 생성

<h1>h1 heading <small>secondary text</small></h1>

<mark>

노란색 배경과 약간의 패딩으로 스타일이 지정됨

<p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>

 

etc.

<abbr> 점선 밑줄 쪽에 마우스를 올리면 물음표가 있는 커서로 지정
<blockquote> 다른 출처의 콘텐츠 블록을 인용할 때 클래스를 a에 추가
"from WWF's website" 같은 출처를 지정할 때는 .blockquote-footer 사용
<code> html 요소 스타일 지정
<kbd>

 

저작자표시 비영리 변경금지 (새창열림)