티스토리 뷰

HTML+CSS

HTML CSS 기초 / day09 /25.04.11

one-dy 2025. 4. 14. 09:55

(day08오전 수업내용 결석해서 못 들음. 복습정리)

모서리 둥글기 속성 : 박스의 모서리를 둥글게 만드는 속성으로 웹 페이지 디자인에서 많이 사용된다. 

  /* 둥글기를 %로 적용하는 경우 - 정원(반드시 넓이 높이가 동일해야함.) */
  .box4 {
  border-radius: 50%;
  border-radius: 100px; /* 넓이 높이의 반 이상의 수치*/
  }
  /* 직사각형에 %로 둥글기를 적용하는 경우 */
  .box5 {
  /* 직사각형으로 바꾸기 */
  width: 300px;
  height: 150px;
  line-height: 150px;
  /* 퍼센트 적용 (타원) */
  border-radius: 100%;
  }

<style>

/*div공통 속성*/

div {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: sandybrown;
margin: 15px;
}

/*모든 모서리에 동일한 둥글기*/

.box1 {
border-radius: 20px;
}

 

/*모서리마다 각각 다른 둥글기*/

.box2 {
border-radius: 10px 40px 20px 3px;
}

border-radius : 숫자px 숫자px 숫자px 숫자px ;

:속성값이 4개로 나눠질 경우 왼쪽 상단 모서리를 기준으로 시계방향으로 돌아가며 적용된다.

즉, 왼쪽상단-오른쪽상단-오른

 

/*대각선 방향으로 동일한 둥글기*/

.box3 {
border-radius: 0px 20px;
}

 

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
</body>

1. 모든 모서리에 동일하게 둥글기를 적용할 때

border-radius : 숫자px 또는 숫자%

2. 모서리마다 각각 다른 둥글기를 적용할 때 

border-radius : 숫자px 숫자px 숫자px 숫자px;

:속성값이 4개로 나눠질 경우 왼쪽 상단 모서리를 기준으로 시계방향으로 돌아가며 적용된다.

즉, 왼쪽상단-오른쪽상단-오른쪽하단-왼쪽하단 순으로 적용된다. 

3. 대각선 방향으로 동일한 둥글기를 적용할 때 

border-radius : 숫자px 숫자px;

:값이 2개로 나눠질 경우 왼쪽상단-오른쪽하단 / 오른쪽상단-왼쪽하단에 각각 동일한 둥글기가 적용된다.

 

박스의 여백을 지정하는 margin, padding속성

이미지, 글자, 여백 : 웹페이지 구성요소

 

마진속성은 컨텐츠 사이의 간격을 지정하는 바깥쪽여백을 말함.

패딩속성은 컨텐츠를 여유롭게 보여줄 수 있도록 지정하는 안쪽여백을 말함.

패딩은 width와 height의 바깥쪽에 생기며 컨텐츠영역을 침범할 수는 없다.

마진은 css박스모델의 가장 바깥쪽에 위치하며 컨텐츠 사이를 떨어트려 여유로운 레이아웃을 만들 때 사용한다.

 

기본형

값을 1개만 선언할 경우 박스의 사방에 동일한 여백이 지정된다.

margin : 숫자px(%,vw,vh...);

padding : 숫자px

 

2. 값을 2개로 나눠 선언할 경우 첫번째 자리는 상/하 자리, 두번째 자리는 좌/우의 자리 (%,vw,vh와 같은 단위 사용가능)

margin : 숫자px 숫자px 

padding : 숫자px

 

3. 값을 3개로 나눠 선언할 경우 첫번째 자리는 상/하 자리, 두번째 자리는 좌/우의 자리이고 세번째 자리로 bottom부분을 다시 선언한다. (%,vw,vh와 같은 단위 사용가능)

 

4. 값을 4개로 나눠 선언할 경우 top 기준으로 시계방향으로 적용되며 각각 다른 여백을 지정할 수 있다. 

 

5. 박스의 일부분에만 여백을 지정하고자 하는 경우

margin-top

margin-top

margin-top

margin-top

 

★box-sizing속성 

width, padding, border 영역을 매번 계산하는 번거로운 과정을 줄여주는 속성 

border-box, content-box값(기본값)을 사용할 수 있다.

border-box는 미리 지정된 width, height안쪽으로 padding, border까지의 영역을 밀어 넣어주는 속성이다.

즉, 미리 선언한 width값과 margin영역만 고려하여 계산하면 되기 때문에 굉장히 유용한 속성이다. 

 

Tip content-세로 사이즈는 무한,가로는 유한. 

웹사이트 만들 때 가로스크롤이 생기지 않아야 한다. 

더보기

-큰 구조에서 작은 구조 순서로 만들기 

-이미지를 클릭하면 넘어가게 만들던지(그럼 이미지를 a태그가 감싸고 있어야한다.)

-타이틀 클릭하면 링크 넘어가게 만들고싶다(그럼 타이틀을 a태그가 감싸고 있어야한다.)

-카드 전체 영역을 클릭하면 넘어가게 만들면 사용자편의성 올라간다.

-컨텐츠가 들어가는 모든 공간, 전체영역을 container라고 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>레이아웃 실습</title>
    <!-- css -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .card {
        width: 430px;
        height: auto;
        background-color: brown;
      }
      a {
        text-decoration: none;
        color: #333;
      }
      /* hex #000 검정색인데 촌스러워서 쓰지 않는다. 검정색과 비슷한 회색 계열을 써주는게 좋다.
      6개 반복되는 경우 3개로 축약해서 쓸 수 있다. */
      /* text-decoration: none; ->글자 꾸밈 없애기 */
      /* 팁! card영역이 어디까지인지 알기 위해 만드는 과정에서 backgroud color를 넣어본다. 나중에 뺀다. */
      .img_top {
        width: 100%;
        height: fit-content;
        /* fit-content는 자식요소의 높이에 맞춘다는 뜻 */
        margin-bottom: 20px;
      }
      img {
        width: 100%;
        /* 부모영역의 100%를 채워라 */
        border-radius: 20px;
      }
      .text {
        /* 박스영역은 항상 넓이 높이가 있어야하므로 스타일 지정해준다.  */
        width: 100%;
        height: auto;
      }
      h2 {
        margin-bottom: 10px;
      }
      span {
        color: #777;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <a href="#">
        <!-- 이미지영역 -->
        <div class="img_top">
          <img src="./img/jb_bank.jpg" alt="ui이미지" />
        </div>
        <!-- 이미지 주소 복사해서 써도 된다. -->
        <!-- 글자영역 -->
        <div class="text">
          <h2>JB금융그룹 'Season II'...</h2>
          <span>2025-04-07</span>
        </div>
      </a>
    </div>
  </body>
</html>
더보기

*단축키는 한방에 눌러야 인식한다.

톱니바퀴 설정 들어가서 블록속성을 가진 태그들 가로로 배치하는 방법

단축키 키 바인딩 누르고 원하는 대체 단축키 조합 만들어서 enter

태그 바로 옆에 주석처리 하는 단축키 변경함 : shift alt / 한번에 누르기 

 

float속성(배치속성)

 <body>
    <!--
  float속성(배치속성)
  ======================================
  웹페이지에서 레이아웃을 배치할 때 CSS 포지셔닝이 굉장히 중요하다.
  CSS포지셔닝은 박스들을 원하는 위치에 배치하는 것을 말한다.

  float속성은 block속성을 가진 박스 태그들을 가로로 정렬하는 역할을 한다.
  float 사전적 의미 : '떠오르다' '떠다니다'라는 뜻이 있다.
  float속성을 적용한 해당 박스는 브라우저로부터 앞으로 살짝 떠오르게 되고, 박스가 뜨면서 비워진 공간은
  아래쪽에 있는 박스가 밀려 올라오는 현상이 생긴다. 이런 현상을 '치고 올라오다'라고 표현한다.
  -->
    <a><!--  --></a>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
  </body>
 <!--
  float속성(배치속성)
  ======================================
  웹페이지에서 레이아웃을 배치할 때 CSS 포지셔닝이 굉장히 중요하다.
  CSS포지셔닝은 박스들을 원하는 위치에 배치하는 것을 말한다.

  float속성은 block속성을 가진 박스 태그들을 가로로 정렬하는 역할을 한다.
  float 사전적 의미 : '떠오르다' '떠다니다'라는 뜻이 있다.
  float속성을 적용한 해당 박스는 브라우저로부터 앞으로 살짝 떠오르게 되고, 박스가 뜨면서 비워진 공간은
  아래쪽에 있는 박스가 밀려 올라오는 현상이 생긴다. 이런 현상을 '치고 올라오다'라고 표현한다.
  -->

float 속성값

1. left : 해당 박스를 왼쪽으로 배치

2. right : 해당 박스를 오른쪽으로 배치 

3. none : 기본값으로 박스를 배치x

clear속성 

float속성으로 배치를 하다보면 아래에 있는 박스가 계속 위로 치고 올라오는 현상이 생긴다.

이 때 배치를 멈추고 float박스의 아래쪽으로 배치를 초기화하기 위해서는 clear속성을 사용한다. 

clear 속성값

1. left : left방향으로 배치된 float속성을 해제

2. right : right방향으로 배치된 float속성을 해제

3. both★: 양방향으로 float속성을 해제 

4. none : 기본값으로 float속성을 해제하지 않는다. 

 

Tip 자식에게 float속성을 쓰면 부모가 자식의 높이를 인식할 수 없게된다. 부모박스한테 반드시 물리적 높이를 줘야한다. (자식높이만큼)높이를 주기 전에는 높이가 0으로 나온다. 

중첩박스의 이해 box_in_box.html

브라우저의 가운데로 컨텐츠영역 놓을 수 있다. 부모박스가 필요!!! 

중첩박스 개념 : html태그 중 block속성을 가진 태그들은 상자의 형태를 가지고 있으며 상자 안에는 상자를 넣을 수 있다. 실제 웹사이트에서는 유기적으로 연결된 박스들이 컨텐츠 라인에 맞춰 중앙에 배치되는 것을 쉽게 확인할 수 있는데 이런 레이아웃을 만들기 위해서는 여러 제약조건이 필요하다.

박스를 가로 중앙으로 배치하기 

컨테이너(부모박스-컨텐츠여러개를 감싸고 있는)를 중앙에 배치하는 코드

                                                    

컨텐츠 영역이나 특정 박스를 부모 영역의 가운데로 배치하고 싶다면 margin속성을 사용한다. 이 때 값을 margin : 상하px auto; 라고 지정하면 영역의 중앙으로 해당 박스가 배치된다. 

margin : 0 auto; 사용 시 반드시 지켜줘야하는 규칙이 있는데, 

1. margin : 0 auto; 적용 시 반드시 해당 박스에 넓이가 있어야 한다. ★ ★ ★ ★ ★

2. 가운데 배치되어야 하는 박스는 반드시 한 개여야한다. 

3. 여러 개의 상자를 동시에 가운데로 보내고자 할 경우 하나의 부모박스로 묶여 있어야한다. 

어떤 속성들은 박스가 한개뿐이어도 떨어지는 속성을 이미 포함하고 있다면

ex) position속성 margin 0 auto가 적용되지 않는다. 

가운데로 보내고 싶은 박스를 마진 0 auto로 줘야한다. 

    <title>중첩박스 실습</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .con {
        width: 1000px;
        height: 700px;
        background-color: orange;
        margin: 0 auto;
      }
      .left {
        width: 600px;
        height: 100%;
        background-color: gray;
        float: left;
      }
      .right {
        width: 380px;
        height: 100%;
        background-color: coral;
        float: right;
      }
      .left .box {
        /* 후손문법은 공백으로 구분한다. left 부모박스 안에 있는 box불러오고싶을 때 */
        width: 200px;
        height: 200px;
        background-color: maroon;
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 200px;
        margin: 250px auto;
      }
      .right .box {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 100px;
        margin: 300px auto;
      }
    </style>
  </head>
  <body>
    <div class="con">
      <div class="left">
        <div class="box">box</div>
      </div>
      <div class="right">
        <div class="box">box</div>
      </div>
    </div>
  </body>
</html>

**margin 0 auto ←auto 좌우 동일한 여백을 주겠다는

중첩박스 코딩결과

'HTML+CSS' 카테고리의 다른 글

HTML+CSS / ★flex속성 6가지 / day11 / 25.04.15  (2) 2025.04.15
HTML+CSS / 레이아웃 만들기 / flex / day10 / 25.04.14  (0) 2025.04.15
CSS 기초 / 블록속성특징 / css박스모델 / day07 / 25.04.09.  (0) 2025.04.13
CSS기초 / day06 / 25.04.08  (1) 2025.04.08
HTML 기초배우기 / day05 / 25.04.07  (0) 2025.04.07