배꼽파지 않도록 잘 개발해요

[코드잇] CSS 핵심개념 ① - 기본개념, 자주 쓰는 CSS 속성, 박스모델 본문

코드잇 Codeit/Front-End

[코드잇] CSS 핵심개념 ① - 기본개념, 자주 쓰는 CSS 속성, 박스모델

꼽파 2023. 12. 17. 18:50

  • 1. 기본개념

  • 2. 자주 쓰는 CSS 속성

  • 3. 박스 모델

    • 1. 기본개념

    관심사의 분리 (Separation of concerns)

    HTML코드와 CSS를 분리하여 작성함.

     

    HTML

    <h3>우도</h3>
<h3>한라산 국립공원</h3>
<h3>성산 일출봉</h3>

     

    CSS

    h3 {
	color: #f56513;  // color는 속성, #f56513는 속성값
}

     

    CSS 규칙

    · 선택자(h3), 선언(color: #f56513;)

    · 위 예시에서는 h3과 중괄호로 감싼 코드 

    아이디

    · 아이디 이름은 중복해서 쓸 수 없음.
    · id 선택자로는 요소 하나만 선택 가능함.

     

    HTML

    <h3 id="hallasan">한라산 국립공원</h3>

    CSS

    #hallasan {
	color: #f56513;
}

    클래스

    · 여러 개를 한번에 스타일링을 하고 싶을 때 사용

    · 아이디와 클래스 선택자 중 어떤 걸 써야할지 모르겠으면 클래스를 쓰자.

    <h3 class="place">우도</h3>
<h3 class="place" id="hallasan">한라산 국립공원</h3>
<h3 class="place">성산 일출봉</h3>
<h3 class="place">군산 오름</h3>
    .place {
	font-size: 16px;
	font-weight: 400;
}

    CSS 파일

    vscode에서 같은 폴더에 'style.css' 파일 생성

    <html>
<head>
	<link rel="stylesheet" href="style.css">
</head>

    위 예시는 같은 폴더에 있어서 경로를 따로 지정해주지 않음.

    다양한 색상 단위

    색상 이름 (Color Names)
    · 빨강, 노랑, 하양처럼 색상에 이름을 붙인 것
    · 영어로 된 색상 이름 (red, yellow, white)
    · 세세한 색깔 이름을 나타내기 힘들어서 잘 사용 안 함

    색상 코드 (Color Codes)
    · 가장 많이 사용하는 방식
    · #으로 시작, 숫자랑 문자 (a~f)로 조합한 여섯 자리
    · #ff0000, #ffff00 ...

    · 빨강, 초록, 파랑의 세기를 각각 두 자리씩 (00~ff) 표기

    ex. ffff00 (빨강 최대, 초록 최대, 파랑 X)

    색상을 만드는 방법
    · 물감(CMYK) : Cyan, Magenta, Yellow
    · 빛(RGB) : Red, Green, Blue
    · 모니터에서 보여지는 색상 (빨강, 초록, 파랑)

     

    RGB
    · 16진수 대신 평소에 쓰는 10진수로 각 빛의 세기를 표시
    · 0 ~255 사이의 값을 씀

     

    RGBA
    · RGB 표기에다가 불투명도(Alpha)를 추가한 것
    · 불투명도는 0~1사이의 소수점 숫자
    · rgba(255, 0, 0, 1), rgba(255, 0, 0, 0.5)반투명 빨강색
    · rgba(255, 0, 0, 0) 흰색

    다양한 크기 단위

    • 절대적인 단위 : 픽셀(px), PPI(Pixel Per Inch), 해상도 (Resolution)

    • 상대적인 단위 : 퍼센트(%), em, rem

     

    픽셀(px)
    · 화면을 표시하는 기준이 되는 가장 작은 정사각형
    · 10px = 정사각형 10개의 길이

    PPI(Pixel Per Inch)
    · 모니터에서 1인치 정사각형 안에 픽셀이 몇 개나 들어가는지
    · 촘촘한 모니터일수록 세밀한 표현

    해상도 (Resolution)
    · 화면에 가로로 몇 px, 세로로 몇 px을 보여주는지
    · 해상도가 달라도 모니터에 따라 보여주는 크기는 조금 다를 수 있음.

     

    퍼센트(%)
    · 부모 태그에 대해서 상대적인 크기
    · 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 됨
    ex. 

    부모 태그 너비 200px, 높이 100px
    자식 태그의 너비 : 50% = 100px
    자식 태그의 높이 : 50% = 100px

    em, rem
    · 글자 크기를 기준으로 상대적인 크기 정하기
    · 인쇄에서 전통적으로 대문자 M의 크기

     

    em
    · 1em = 부모 태그의 font-size
    ex. 

    부모 태그 글자크기 16px
    font-size : 2em → 16 * 2 = 32px

    rem (렘, 알이엠)
    · 1rem = 최상위 태그의 font-size
    · 1rem = <html>태그의 font-size

    ex. 

    <html>에 font-size : 8px;
    2rem은 8 * 2 = 16px;

     

    html {
	font-size: 16px;
}

h1 {
	font-size: 2rem;
	margine: 1rem 0;
}

    글자 크기만큼 여백을 주고 싶을 때에도 사용할 수 있음.

    코멘트

    · 방식 : /* 코멘트 내용 */
    ·필요성 : CSS선택자를 고칠 때 이해하기 힘들 것 같을 때

    CSS 버전

    ·   CSS는 항상 옛날 버전을 지원하면서 다음 버전으로 넘어감
         = 하위 호환성(backwards compatibility)을 지원함
    ·  CSS 전체를 하나의 버전으로 발전시키는 게 아니라 비슷한 기능들끼리 모듈이라는 이름으로 모아서 발전

    2. 자주 쓰는 CSS 속성

     

    텍스트 스타일링 정리

    줄 높이 line-height

    · 줄과 줄 사이의 간격을 조절할 때 CSS에서는 줄의 높이로 조절

    · 이때 높이는 단위 없이 쓰는 글자 크기에 상대적인 값임.

    ex.

    font-size가 16px

    line-height: 1은 16px * 1 = 16px

    line-height: 1.5는 16px * 1.5 = 24px

    .loose {
    font-size: 16px;
    line-height: 1.7; /* 16px * 1.7 = 27.2px */
  }

     

    텍스트 꾸미기 text-decoration

    · 텍스트에 밑줄을 넣거나, 취소선을 넣거나 하는 데 사용하는 속성

    · 속성 값으로는 none, underline, line-through 등

    · none은 <a> 태그에 기본으로 들어 간 밑줄을 없애는 데 많이 사용

      .none {
    text-decoration: none;
  }

  .underline {
    text-decoration: underline;
  }

  .line-through {
    text-decoration: line-through;
  }

     

    글자 굵기 font-weight
    · 100, 200, 300, ..., 900까지 100 단위로 지정함.

        .bold-text {
      font-weight: bold;
    }

    .custom-weight {
      font-weight: 600;
    }

    배경 이미지: background-image

    .card {
  background-image: url('pizza.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  line-height: 1.7;
  margin: 40px auto;
  padding: 40px;
  width: 480px;
}

    여기서 url('파일 주소나 경로');
    따옴표는 없어도 괜찮지만, 특수한 문자가 있으면 따옴표가 필요함.
    배경 이미지는 바둑판식으로 깔림.

     

    background-position
    · top, bottom, left, right, center, 픽셀, 백분율

    · left top (지정하지 않았을 때의 기본값)

     

    background-size

    · contain : 이미지가 잘리지 않는 선에서 최대 크기 (왜곡 X)
    · cover : 요소에 이미지를 최대한 크게 보여줌 (왜곡 O)

    · 100% : 요소와 동일한 크기 

     

    background-repeat

    ·  repeat (기본값), no-repeat

     

    배경이미지는 여러개 삽입 가능함

    background-image:
  url('a.png'), /* 제일 위에 보이는 이미지 */
  url('b.png'),
  url('c.png');

    순서대로 위 아래 깔리는 구조

    그라디언트: linear-gradient 

    background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0));

    기본 방향의 각도는 180도 (위에서 아래로 내려오는 방향), 단위는 deg

    코드 만들어서 갖다 붙이는게 나음

     

    배경 위에 반투명한 그라디언트 겹치기

      background-image: 
    linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0)),
    url('pizza.png');

    작성 순서가 중요함 (그라디언트 → 이미지)

    그림자: box-shadow

    가로, 세로, blur, spread, 색상

    .card {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 10px 15px 20px 5px rgba(0, 0, 0, 0.4);
}

    그림자가 가로로는 10px, 세로로는 15px 아래에 생김
    흐려지는 경계의 크기 (blur) 20px, 그림자가 퍼지는 크기 (spread) 5px

    요즘에는 디자이너들의 프로그램에서 그림자에 해당하는 CSS 코드도 알아서 만들어주니까 협업할 때는 보통 복붙해서 쓰면 됨.
    헷갈리면 MDN 사이트에서 찾아보기
    구글 box shadow generator 검색해서 코드 생성 가능함.

     

    불투명도: opacity

    · 요소 전체를 반투명하게 만들고 싶을 때 사용

    ·  배경을 반투명하게 만들고 싶으면 back-ground

    ·  0에서 1 사이의 소수 값으로 단위 없이 사용함. (0: 투명, 1: 불투명)

    .order {
  background-color: #f13030;
  color: #ffffff;
  font-weight: 800;
  opacity: 0.5;
  padding: 6px 16px;
  text-decoration: none;
}

    3. 박스 모델

    박스 모델

    박스 모델은 각각 너비와 높이를 가지는 개별적인 요소를 '박스'로 지칭하는 디자인 모델입니다. 

    이 모델은 박스를 네 가지 세부 영역으로 나누어 구분하며,

    각각의 영역은 내용(Content), 안쪽 여백(Padding), 테두리(Border), 그리고 바깥 여백(Margin)으로 정의됩니다.

     

    다양한 padding margin 표기법

    padding
    영역 안쪽 여백

    padding: 8px; /*상하좌우 모두*/
padding: 16px 8px; /*상하 좌우*/
padding: 16px 8px 24px;  /*상 좌우 하*/
padding: 16px 8px 24px 10px; /*상 우 하 좌*/
    padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;

     

    Margin
    영역 바깥쪽 여백
    좌우 바깥은 요소의 width 속성이 정해져 있어야 auto로 자동채우기 가능

    margin: 8px; /*상하좌우 모두*/
margin: 16px 8px;  /*상하 좌우*/
margin: 16px 8px 24px;  /*상 좌우 하*/
margin: 16px 8px 24px 10px; /*상 우 하 좌*/

width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */
margin: 16px auto;
    margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;

    border와 border-radius

    border

    border: 10px dotted #dedede;

    굵기, 모양, 색상
    모양 : dotted(점선), solid(실선), dashed(대쉬)

     

    border-radius (모서리 둥글게 만들기)

    border-radius: 8px;
    border-radius: 50%;  /*타원 모양*/
border-radius: 9999px;  /*알약 모양*/

     

    border가 없더라도 border-radius 사용 가능함

    .terms-content {
  background: #f4f3f8;
  border-radius: 8px;
  font-size: 12px;
  height: 324px;
  overflow: scroll;
  padding: 24px;
}

    영역의 모서리가 동그랗게 됨.

    box-sizing

    기본적으로 브라우저는 요소의 크기를 계산할 때, 테두리(Border)와 안쪽 여백(Padding)을 포함하지 않고, 오직 내용(Content) 영역만을 고려함. 이를 "content-box" 모델이라고 함.

     

    width: 100px;을 설정했을 때

    · box-sizing: content-box; : content 영역에만 적용

    · box-sizing: border-box; : 테두리와 안쪽 여백이 포함된 크기로 적용

     

    #box {
  margin: 20px;
  padding: 30px;
    width: 100px;
}

    여기서 실제 box의 너비 = 30 * 2 + 100

    content 부분만 100px이 되고 싶게 하려면 content-box 대신 border-box 지정

    (box-sizing: border-box;)

     

    박스의 크기 계산이 테두리와 안쪽 여백을 포함하여 이루어짐
    요즘엔 일반적으로 모든 요소에 이걸 추가함. 

    * {
	box-sizing: border-box;
}

     

    overflow

    요소의 내용이 요소 자체의 크기를 벗어날 때

    overflow: hidden; /*감추기*/
overflow: auto; /*넘치면 스크롤*/
overflow: scroll; /*항상 스크롤*/
overflow: inherit; /*부모에게 상속받은 속성*/
white-space: nowrap; /*줄바꿈 되지 않고 가로 스크롤*/

    마진 상쇄

    마진 상쇄(margin collapse)
    · 서로 이웃하는 요소끼리 세로로 마진 상쇄가 일어남.
    · 부모 자식 간에도 세로 마진이 겹칠 수 있음
      (부모 요소의 padding이나 border가 있으면 괜찮음)

    728x90

    '코드잇 Codeit > Front-End' 카테고리의 다른 글

    [코드잇] HTML 핵심 개념 ① - 링크, 텍스트, 리스트, 테이블  (0) 2023.12.20
    [코드잇] CSS 핵심개념 ② - Display, 선택자, 스타일 계산하기  (0) 2023.12.18
    [코드잇] 모던 자바스크립트 ② 자바스크립트 문법과 표현, 내부 기능, 모듈  (0) 2023.12.17
    [코드잇] 모던 자바스크립트 ① 모던 자바스크립트 이해, 동작원리, 함수 다루기  (0) 2023.12.14
    코드잇 웹 퍼블리싱 - ① 웹 퍼블리싱 시작하기  (0) 2023.05.05
    '코드잇 Codeit/Front-End' Related Articles more