티스토리 뷰

HTML+CSS

CSS 기초 / 블록속성특징 / css박스모델 / day07 / 25.04.09.

one-dy 2025. 4. 13. 23:08
더보기

개발자도구 열기

마우스 우클릭-검사 또는 F12

· 부모태그, 자식태그, 형제태그  태그는 태그를 감쌀 수 있다.

· 선택자 종류 더 있는데 부모 안에 자식 안에 몇 번째 형제 불러와라~ 식으로 쓴다.

  ex) ul, li태그는 부모 자식관계 ul안에 있는 li중 3번째 형제 데리고와라~ 식으로 선택자를 쓴다. 

· 동일한 레이아웃을 만들더라도 코드에 대한 이해도가 높아 효율적으로 짜는게 매우 중요하다. (데이터를 줄일 수 있기 때문)

· id선택자는 java script로 제어 가능. 

★클래스,아이디선택자에는 태그 이름은 쓸 수 없다. 코드로 쓰이는 속성명 또한 사용할 수 없다. 

 <h2 class="title" title은 <a href 태그의 속성(말풍선)이기 때문에 정확히는 쓸 수 없지만, "sec_title", "mainvisual_title"

  등으로 범용적으로 많이 쓰인다.

class 이름은 같은 그룹끼리 동일해야 한다. 

팁♡ 이름을 정했으면 더블클릭으로 선택 복사해서 css에 쓰는게 오류를 줄이고 가장 편하다.

외부스타일 시트 

 

· 페이지별 css파일을 만드는 경우도 있다. 

· sub페이지별로 레이아웃이 비슷하면 css파일 1개만 써도 상관 없다. 

· 정해진 규격 없다.  

· html페이지는 메뉴 갯수만큼 꼭 있어야한다. 

 

div태그 

<div> 공간을 분할하는 투명 박스 태그, block속성의 대표 태그 

예)header,container,footer

시멘틱 태그가 등장하기 이전부터 공간을 나누는 용도로 사용되었고, 지금 현대에도 굉장히 많이 사용되는 필수 태그

태그만 출력 시에는 특별한 디자인은 보이지 않아 반드시 css로 꾸며주어야한다.(너비,높이 지정 가능)

 

<div>컨텐츠내용(이미지,제목,본문 등)</div>

<!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;
    }
    div{
      width: 200px;
      height: 100px;
      background-color:blueviolet;
      margin-bottom: 20px;
    }
   </style>
</head>
<body>
<div>블록디브</div>
<div>블록디브</div>
<div>블록디브</div>
<div>블록디브</div>
<div>블록디브</div>
</body>
</html>

 

margin-bottom: 바깥쪽 여백(아래쪽) 

 

***단축키(복사) : alt shift ↓ 방향키 

<!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;
      }
      /* 모든 div태그들의 공통속성 */
      div {
        width: 200px;
        height: 200px;
        background-color: rgb(243, 168, 243);
      }
      /* 클래스 이름이 box2인 두번째 div에 속성적용 */
      .box2 {
        width: 50%;
        height: 200px;
        background-color: rgb(230, 233, 80);
      }
      /* 인라인 속성을 가진 태그는 넓이 높이가 적용되지 않는다. */
      span {
        width: 200px;
        height: 200px;
        background-color: rgb(51, 204, 171);
      }
    </style>
  </head>

 

CSS박스모델 css에서 박스를 만들 때 사용하는 다양한 속성

block속성을 가진 모든 태그들은 박스의 형태를 가지고 있으며 원하는 위치에 배치하기 위해서는 css를 이용해야 한다. css를 통해 가로(width)세로(height)의 크기를 지정하고 여백(padding)과 배치 형태를 설정하여 원하는 레이아웃으로 만들 수 있다.

1. width-height :

2. padding : 순수한 컨텐츠 영역(width*height)의 바깥쪽으로 컨텐츠를 여유롭게 보여줄 수 있는 안쪽 여백을 말한다. 컨텐츠 밖 영역뿐만 아니라 안쪽 영역에도 padding 줄 수 있다. 가독성이 있으려면 패딩을 사용해야한다.

3. border :  padding의 바깥쪽 border(테두리)=>피그마에서는 stroke라고 부른다. 세련,확장,시원한 느낌 주고 싶을 때 

다양하게 두께, 색상, 스타일을 지정할 수 있다. 

4. margin : border의 바깥쪽 컨텐츠와 컨텐츠 사이의 여백을 지정하는  margin, 바깥쪽 여백이라고 부른다. 

 

padding과 margin 자리,  margin과 border자리 바꿀 수 없다.

 

  • solid : 실선 배경색은 구역을 강조하고 싶을 때 border 세련,확장,시원한 느낌 주고 싶을 때   
  • border 속성 쓸 때 두께, 스타일, 색상 순으로 써준다.
  • padding, border, margin (상하좌우) 원하는 위치에 다른 수치를 줄 수 있으며 top,bottom,left,right로 표기한다. ex)margin-left, margin-bottom

이런 박스 형태인 요소를 스타일 시트에서는 'css박스 모델'이라고 부른다.  

블록 속성 특징

1.출력방향 세로 

2.넓이, 높이 정할 수 있다.

3.넓이가 없으면 (부모가 없으면) 가로사이즈 전체영역을 채움. 

 

넓이, 높이 속성

박스모델에서 컨텐츠 영역의 크기를 지정할 때 width, height를 이용하여 넓이 높이를 지정한다.

css박스 모델에서는 px(픽셀) 말고도 적용할 수 있는 다양한 단위들이 있다. 

[단위]

px 정단위 (PC모니터 가로 1920px). 브라우저의 크기가 변하더라도 바뀌지 않는 크기 
% 백분율. 브라우저 또는 부모박스의 크기에 따라 유동적으로 바뀌는, 문서의 총길이 hight는100%
vw, vh viewport width, viewport height의 약자로 반응형에서 많이 사용되는 단위이다. '눈에 보이는 브라우저의 크기' 즉, 브라우저가 전체화면이든 작게 줄여져 있던 눈에 보이는 크기에서 쓰여진 숫자만큼의 비율을 적용하여 보여주는 단위이다. *viewport(브라우저에서 보이는 영역) 브라우저에서 보이는 만큼의 % 눈에보이는 영역! 폰트 사이즈에도 쓰인다. 
vmin, vmax  디바이스의 가로넓이와 세로높이를 비교하여 더 큰쪽(vmax) 또는 더 작은쪽(vmin)의 지정된 수치만큼의 비율을 채우는 단위이다. 예를 들어 width : 50vmin; 이라고 했을 때 pc환경에서는 디바이스의 세로가 가로보다 크기가 더 작으므로 브라우저의 세로 반을 나눠 50%를 채운다. (방향을 지정할 때 orientation이라고 하는데 orientation에 따라 달라지는...) 모바일 환경에서는 디바이스의 가로가 세로보다 작으므로 디바이스의 가로 50%를 나눠 채운다. 
auto 기본값으로 컨텐츠를 채우고 있는 기본 넓이 또는 높이를 말한다. , width, height 값을 정하지 않았을 경우 예)블록속성(<div>)의 경우 브라우저 또는 부모영역의 가로넓이를 꽉 채우므로 가로 전체가 auto(기본값), 세로 auto는 컨텐츠 크기만큼만 차지한다. border는 none이 기본값. margin, padding 모두 auto 기본값이 있다. inline속성의 경우 글자가 들어 있는만큼의 크기만큼의 넓이와 높이를 가지는  auto 기본값을 가진다.  

따로따로 선언하거나 한꺼번에 선언할 수 있다.

top, bottom, left, right 자리에 일부 적용하거나 동일한 테두리를 사방에 적용할 수 있다. 

border 테두리 속성 block속성을 가진 모든 태그에 적용할 수 있다.

· 테두리 두께(border-width) : 픽셀(px)만 사용 가능!

· 테두리 색상(border-color)

· 테두리 스타일(border-style)

   테두리 스타일 종류 

  • ★solid : 테두리를 실선으로 표시. 
  • ★none : 테두리가 나타나지 않음. 기본값. 테두리가 기본적으로 나오는 태그들이 있는데 그럴 때 없애줄 때 사용함. 
  • hidden : 테두리가 나타나지 않음. border-collapse(한줄로 합치기)일 경우 다른 테두리도 표현되지 않음. 
  • dashed : 테두리를 직선형태의 점선으로 표시. ex)삼성전자 홈페이지 클릭할 때 보여짐.
  • dotted : 테두리를 도트형태의 점선으로 표시.
  • double : 이중실선으로 테두리를 표현. 두께가 3px이상이어야만 보임. 
  • groove : 테두리를 입체적으로 보여줌. 
  • inset : 테두리를 안쪽으로 들어가듯 입체적으로 보여줌. (액자 같은 개념)
  • outset : 테두리를 바깥으로 튀어나오듯 입체적으로 보여줌. 
  • ridge : ↔ groove, 테두리를 창에서 튀어나오는 것처럼 보여주는 효과.

Tip : 태그이름{이름$}*10 복제하려는 갯수 $<-숫자를 순서대로 붙여줘

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

HTML+CSS / 레이아웃 만들기 / flex / day10 / 25.04.14  (0) 2025.04.15
HTML CSS 기초 / day09 /25.04.11  (0) 2025.04.14
CSS기초 / day06 / 25.04.08  (1) 2025.04.08
HTML 기초배우기 / day05 / 25.04.07  (0) 2025.04.07
HTML 기초배우기 / day02-04 / 25.04.02~04  (0) 2025.04.06