카테고리 없음

CSS 블록 레벨 요소, 인라인 레벨 요소, 클래스 셀렉터의 활용

김딸기* 2024. 7. 27. 15:51
  • 작업 순서 정립하기

1. 기본 html, css 세팅

2. 덩어리 확인해 레이아웃 구성하기

- div 내에서의 레이아웃 덩어리는 3가지(헤더, 컨텐츠, 푸터)로 나뉜다

3. 각 데이아웃안에 컨텐츠를 삽입

 

div{
    background-color: #ddd;
    width: auto;/*auto: 브라우저가 창 너비만큼 자동으로 계산해주는 값*/
    height: auto;/*내부 컨텐츠 크기만큼 자동 계산*/
}

-각 레이아웃 덩어리를 구분하기 위해 backgraound 색을 지정해 시각화한다

 

/*css 리셋*/
body{
    margin: 0;
}

-body에 margin이 임의의 값으로 설정되 어 있을 수 있으므로 margin을 0으로 초가화해준다

 

margin auto

margin속성에 대한 값을 auto로 지정하는 기법
auto: 브라우저가 자동으로 계산 해주는 값입니다.
요소의 가용공간을 해당 요소의 여백으로서 자동 계산 해줍니다.

 

블록 컨테이너 상에서

가용 공간 = 컨테이닝 블록의 너비 - 명시적으로 지정된 너비

명시적으로 지정된 너비라는 것은 width 또는 max-width를 명시적으로 지정 했다는 의미입니다.
블록 컨테이너 상에서의 가용 공간은 해당 요소의 가로 기준으로만 주어집니다.
즉, margin-left: auto와 margin-right: auto를 통해 이 가용 공간을 자동으로 여백화 할 수 있습니다.
해당 요소의 상하단에는 다른 블록 박스가 들어갈 수 있는 영역이기 때문에 margin-top: auto, margin-bottom: auto는 항상 0으로 계산 되어 집니다.

.wrapper { 
  width: 600px; /* 명시적으로 지정된 너비 */ 
  margin-left: auto; 
  margin-right: auto; 
}

이 예시에서 .container의 가용 공간은 컨테이닝 블록의 너비에서 명시적으로 지정된 너비인 600px을 뺀 값이 됩니다. margin-left: auto와 margin-right: auto는 이 가용 공간을 양쪽 여백으로 자동으로 분배하여 요소를 수평으로 중앙에 배치합니다.

 

div{
    background-color: #ddd;
    width: 800;/*auto: 브라우저가 창 너비만큼 자동으로 계산해주는 값*/
    margin: 0 auto;
    /*너비의 800px만 사용하고 나머지 오른쪽 영역은 가용공간
    위아래 여백은 0, 좌우 여백을 auto로 하여 중앙정렬한다*/

}

 

-div 내에서의 레이아웃 덩어리는 3가지로 나뉜다

*div는 시각적인 덩어리, 즉 묶음으로 의미가 없다. 

-상단의 프로필은 header, 중앙부분은 main contents, 아래의 영역은 footer이라 한다

 

        <div>
            <div>Header</div>
            <div>Contents</div>
            <div>Footer</div>

        </div>

-div내부의 덩어리들을 div로 구분한다

 

클래스

-같은 유형의 요소에 클래스를 구분지어 다른 속성을 부여한다.

-각 div에 별칭을 부여해 구분한다

->클래스 명은 

타입 셀렉트와 클래스 셀렉터를 붙여 div이면서 header인 것을 명시한다

 

        <div>
            <div class="header">Header</div>
            <div class="contents">Contents</div>
            <div class="footer">Footer</div>

        </div>
div.header{
    background-image: url(background.gif);
}

div.footer{
    background-color: white;
}

 

class selector

클래스 셀렉터는 HTML 요소의 class 속성을 기반으로 요소를 선택하는 CSS 셀렉터 기법

<div class="highlight">이 텍스트는 강조됩니다.</div>

.highlight {
  color: orangered;
}
  • .(마침표)로 시작하며, 그 뒤에 클래스 이름이 옵니다.

특징

  1. 재사용성: 여러 요소에 동일한 클래스명을 적용할 수 있습니다.
  2. 다중 클래스: 하나의 요소에 여러 클래스명을 적용할 수 있습니다.
  3. 유연성: 태그의 타입에 관계없이 동일한 스타일을 적용할 수 있습니다.
  4. 셀렉터 특정성 점수: 타입 셀렉터보다 높은 셀렉터 특정성 점수를 가지고 있습니다.

타입 셀렉터와 클래스 셀렉터의 결합

p.important {
  font-size: 1.2em;
}

클래스명이 important인 p요소를 선택합니다.

 

img.profile{
    margin-top: 70px;/*이미지 위에 여백 설정*/
    border: 6px solid white;
    border-radius: 50%;/*테두리를 원으로 만듦*/
    width: 140ㅔㅌ;

}

 -모든 이미지에 속성이 적용될수 있으니 해당 이미지에 클래스를 부여한다

 

 

 

 

 

 

  • background속성 활용하기

 

 

 

 

 

  • box-shadow속성 활용하기