4일차_css(여러 속성들)

먀메·2023년 6월 20일

[새싹x코딩온] 웹 퍼블리싱

목록 보기
4/24

본격적으로 꾸미기를 해보자!!!

글꼴, 문자

  • font-weight :글자의 두께

    • 400이 기본 700은 볼드 두꺼움
    • bolder는 상위요소보다 더 두껍게 lighter은 상위요소보다 더 얇게
    • 100~900 숫자를 직접 사용해서 두께 설정할 수 있음

  • font-size :폰트 사이즈

    16px=1em=1rem 기본 사이즈

    • % 부모 요소의 폰트 크기에 대한 비율
    • smaller,larger
    • xx-small,xx-large :가장 작은 크기~ 가장 큰 크기

  • line-height : 한 줄의 높이, 행간과 유사

  • font-family:글꼴1, "글꼴2", ... 글꼴계열; :글꼴을 설정하는 것으로 여러개 가능

    글꼴계열은 필수로 작성 글꼴을 찾을 수 없을때 대신 사용하는 용도이기 때문!!



구글폰트, 눈누폰트

  • 적용방법

  • link방식은 해당 코드를 head태그 안에 넣어준다.
  • import 방식은 코드를 style태그나 css에 넣어준다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 문자와 글꼴 </title>
<link rel="stylesheet" href="./attribute01.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Diphylleia&display=swap" rel="stylesheet">


</head>
<body>

    <span class="font-link">안녕하세요!!!</span>
    <br />
    <span class="font-import">구글폰트 임포트 방식</span>
    <br />
    <span class="noonnu-font">누눈 폰트 적용 방식</span>

  • color: 글자의 색상

  • text-align: 문자의 정렬 방식

    left 왼쪽, right 오른쪽
    center 가운데, justify 양쪽

  • text-decoration: 문자에 선 추가






박스 모델

요소를 감싸는 네모난 상자를 의미함

display : 요소가 화면에 보여지는 특성을 의미함

  • inline 요소 ex)span

    • 요소가 수평으로 쌓임 (줄바꿈 x)
    • inline 안에 inline요소는 가능, block 불가능
    • width,height 적용 X (콘텐츠의 크기에 따라 자동으로 맞춰짐)
    • margin : 외부 여백, padding :내부 여백

  • block요소 ex)div

    • 요소가 수직으로 쌓임 (줄바꿈 o)
      • inline 안에 inline요소, block요소 둘다 가능
    • width,height 적용 (부모 요소의 크기만큼 자동으로 늘어나고, 콘텐츠 크기만큼 자동으로 줄어듬)
    • margin : 외부 여백, padding :내부 여백

  • inline-block
    둘의 특징을 합쳐서 만들어진 것으로, 요소를 수평으로 쌓으면서 width와 height를 적용하고 싶을 때 사용

margin값을 다르게 설정할때

  • inline ,inline-block : margin20과 margin30이 만나면 더해진다
    ➡ margin50

  • block : margin20 과 margin30 이 만나면 큰 값으로 변함
    ➡ margin30





margin과 padding


  • magin : 요소의 외부 여백 공간을 지정하는 속성

    • 음수를 사용할 수 있으며 auto를 사용하는 경우엔 자동으로 가운데 정렬을 해줌
    • margin 개별 속성 : magin-top magin-bottom
      magin-left magin-right
    • margin 단축 속성 (아래 그림)

  • padding :요소의 내부 여백을 지정하는 속성

    • padding 을 크게 설정할 수록 요소의 크기도 커짐
    • 단축 속성(아래 그림)
  • max-width,height :요소가 최대로 커질 수 있는 가로/세로 너비
  • min-width,height :요소가 최소로 작아질 수 있는 가로/세로 너비
  • line-height :영역 요소 내부 컨텐츠 글자의 줄 높이

단위

  • px : 픽셀
  • % : 상대적 백분율
  • em : 요소의 글꼴 크기
  • rem : 루트 요소(html)의 글꼴 크기
  • vw vh: 뷰포트 가로/세로 너비의 백분율 (뷰포트는 현재 보여지는 화면을 의미함)
  • clac(): 사용자가 원하는 크기 값을 계산하여 적용함, 연산기호 앞뒤로 공백을 반드시 넣어줘야 함! ex) Calc(100vh – 20vw)

테두리

border: 선-두께 선-종류 선-색상;

  • border-width: 선 두께 (아래 두개도 사진과 같음)

  • border-style: 선 종류

  • border-color: 선 색상

  • 요소의 테두리 선을 방향마다 다르게 설정 할 수도 있음.


    <style>
        .nemo1{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 10px ;
        }

        .nemo2{
            width: 100px;
            height: 100px;
            background-color: pink ;
            border: 5px solid hotpink;
            border-right-width: 10px;
        }

        .nemo3{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 5px solid hotpink;
            border-bottom-color: brown;
        }

    </style>
</head>
<body>
    <div class="nemo1">1</div>
    <div class="nemo2">2</div>
    <div class="nemo3">3</div>
  • border-radius: 요소의 모서리를 둥글게 깎음

그외

  • box-sizing :요소의 크기 계산 기준을 지정
    • padding을 설정하는 경우 요소의 크기도 커지지만 box-sizing 으로 사이즈를 지정하면 그 안에서 해결하게 해준다.
      • content-box

      • border-box
    <h2> box-sizing </h2>
    <div class="square box-sizing content-box"></div>
    <div class="square box-sizing border-box"></div>
.box-sizing{
    padding: 20px;
    border: 15px solid red;
    background-color: tomato;
}

.content-box{
    box-sizing: content-box;  /*기본 값이라 바뀌지 않는데 편하라고 넣어줌*/
}

.border-box{
    box-sizing: border-box;
}

  • opacity :요소투명도, 0~1 사이
    • opacity :모습만 숨기는 방법. 속성과 자리 모두 남아있음.
    • visibility : hidden :모습과 속성을 숨기는 방법. 자리는 남아있음.
    • display : none:아예 없애는 방법. 자리 사라짐.
    <h2> 모습 숨기기 </h2>
    <div class="square">original</div>
    <div class="square d-none">d-none</div>
    <div class="square invisible">invisible</div>
    <div class="square opacity-0">opacity-0</div>
    <div class="square">original</div>
    <div class="blue"></div>

  • overflow : 요소의 크기 이상으로 내용이 넘쳤을때, 보여짐을 제어하는 단축 속성
    • visible :넘친 내용을 그대로 보여줌
    • hidden:넘친 내용을 잘라냄
    • scroll:스크롤바 무조건 생성
    • auto:넘친 내용을 잘라주고 스크롤을 생성함
    • overflow-x,overflow-y : 요소가 크기 이상으로 내용이 넘쳤을때, 보여짐을 제어하는 개별 속성

🍎🍎🍎🍎🍎

    <!--    .d-block{block $}*4 -->
    <div class="d-block">block 1</div>
    <div class="d-block">block 2</div>
    <div class="d-block">block 3</div>
    <div class="d-block">block 4</div>
profile
먀메
나는 생각한다 고로케 존재한다
이전 포스트

3일차_CSS

다음 포스트

5일차_css(position, background)

0개의 댓글