모아보기

종류	특징
블록 요소	1. 줄바꿈이 일어난다. 2. 블록 요소는 인라인 요소를 포함할 수 있다. 3. 블록 요소는 블록 요소를 포함할 수 없다?^* ( `div` 제외 )
인라인 요소	1. 줄바꿈이 일어나지 않는다. 2. 인라인 요소는 인라인 요소를 포함할 수 있다. 3. 인라인 요소는 블록 요소를 포함할 수 없다.

블록과 인라인 요소의 차이점 표

블록 요소

블록 요소는 화면 너비를 100%로 꽉 채우기 때문에 태그를 쓰면 쓸수록 줄바꿈이 일어난다.

첫번째 div ) 블럭태그입니다.

두번째 div ) 이렇게 자동으로 줄바꿈이 된다~

너비를 작게 줄여도 남는 부분은 '여백'으로 채워지기 때문에 줄바꿈은 그대로 유지된다.

블록 요소는 인라인 요소를 포함할 수 있다.

인라인 요소를 사용하여 이렇게 특정 텍스트를 강조할 수 있다. ( mark와 b사용 )

^*그렇다면 블록 요소는 블록 요소를 포함할 수 없을까?

내가 알기로는 당연히 된다. 그런데 수업 중 선생님이 보여주신 자료엔 무조건 안된다는 뉘앙스로 적혀 있어서 조금 당황했다.

수업 중 선생님이 보여주신 자료

(보다시피 위에 있는 표는 이 자료를 받아적은 것이다.)

ul이나 ol은 li만을 자식으로 둘 수 있다. 그런데 셋 다 블럭 요소이다.

W3C에서는 section 안에 헤딩 태그( h1, h2, h3 )를 둠으로써 구분할 것을 권장한다. 그런데 이것들 또한 블럭 요소이다.

이처럼 블럭 안에 블럭 요소를 넣는 경우가 많은데 어째서 불가능하다는 건지 이해가 안 됐다...

하지만 그렇다고 무조건 된다는 건 절대 아니다.

애시당초 초반에 배운 시맨틱 태그를 생각한다면 블럭 안에 블럭 요소를 함부로 포함시키는 짓은 할 수 없겠지...

어느쪽이 맞는 거라고 단정지을 순 없는 것 같다. 선생님께 다시 질문해봐야겠다.

20210809 추가 )

선생님의 답변. html5에서는 더이상 인라인과 블록 요소가 아닌 컨텐츠 모델에 따라 분류 된다고 하셨다.

간단히 말해 시멘틱 태그라는 소리. 참고하라고 주신 블로그 글. HTML5 - Content Model (콘텐츠 모델)

그리고 복잡하게 생각할 필요 없이 유효성 검사를 해보면 된다고 하셨다.
인라인 요소

인라인 요소는 너비를 갖지 않기 때문에 요소가 다음과 같이 나란히 붙는다.
span 태그는 인라인 요소이기 때문에 왼쪽에서 오른쪽으로 나열된다.
정확히는 너비가 컨텐츠에 맞게 조절되는 것 같다.

요소검사를 해보면 블럭 요소는 너비값이 제대로 나오지만 인라인 요소는 auto로 나온다.

span태그 요소검사

인라인 요소는 인라인 요소를 포함할 수 있지만, 블럭 요소는 포함할 수 없다.

자그마한 개구리가 자기 몸집보다 더 큰 거미를 잡아먹을 수 없는 것과 같은 원리이다.
span : 태그로 특정 글자 꾸미기

span으로 특정 텍스트에 영역을 잡아 스타일을 적용할 수 있다.

1
2
3
<p>
A good medicine <span style="background-color: navy;color: oldlace;">tastes</span> bitter. 좋은 약은 입에 쓰다.
</p>
cs

코드 예시 : 예제1

A good medicine tastes bitter. 좋은 약은 입에 쓰다.

예제1 : span 태그로 특정 영역 꾸미기

Vendor prefix란?

새로운 css를 적용하기 위해 속성 앞에 붙이는 접두사다.

아직 표준이 되지 못한 새로운 속성이나, 표준이지만 완벽하게 재정되지 않은 실험적인 기능을 사용하려면 속성 앞에 접두사를 꼭 붙여야 한다.

접두사는 브라우저마다 다르다.

크롬, 사파리	파이어폭스	ie, 엣지	오페라
-webkit-	-moz-	-ms-	-o-

브라우저별 prefix

box-shadow : 요소에 그림자 넣기

요소에 그림자를 넣을 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    div.shadow{
        width: 300px;
        padding: 10px 0;
        text-align: center;
        background-color: #fff;
        color: #f30;
        box-shadow: 4px 3px 20px 5px #c7cbd2;
        }
    /*
       값px, 값px, 값px, 값px color 한세트.
    */
</style>
<body>
    <div class="shadow">
        그림자를 적용해보자.
    </div>
</body>
cs

코드 예시 : 예제2

그림자를 적용해보자.

예제2 : box-shadow 적용하기

뭐가 뭔지 외우기보단 아무렇게나 적용한 후 요소검사로 값을 조정하는 게 젤 편한 것 같다.

border-radius : 모서리 둥글게 하기

요소의 모서리를 둥글게 만든다. 값은 px이나 %로 조정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    div.shadow{
        width: 300px;
        padding: 10px 0;
        text-align: center;
        background: violet;
        border: 1px solid #000;
        border-radius: 30px;
        /*
            값 1개: 네 모서리  적용
            값 2개: 위, 아래 모서리 적용
            값 4개: 좌측 상단부터 시계방향 적용
        */
        color: white;
    }
</style>
<body>
    <div class="radius">
        모서리를 둥글게 해보자.
    </div>
</body>
cs

코드 예시 : 예제3

모서리를 둥글게 해보자.

예제3 : border-radius

작성 시 유의사항

예제에도 적혀있듯이 background-color나 border가 적용되어 있어야 보인다.

span 요소의 사용과 특정 글자 꾸미기

Vegetables fit for use are recognized by the small sprout.
쓸모있는 야채는 어린 싹으로 알 수 있다. 될성 싶은 나무는 떡잎부터 알아본다.

박스 그림자 효과 만들기

box-shadow: 박스 모델의 그림자 효과를 적용합니다.; offset-x offset-y blur-radius spread-radius color 값을 지정합니다.

둥근 모서리 만들기

border-radius: 박스 모델의 둥근 모서리를 만들때 사용합니다.; background-color, border 속성으로 배경 색상이나 테두리를 적용해야 확인할 수 있습니다.

모아보기

블록 요소

인라인 요소

span : 태그로 특정 글자 꾸미기

Vendor prefix란?

box-shadow : 요소에 그림자 넣기

border-radius : 모서리 둥글게 하기

작성 시 유의사항

span 요소의 사용과 특정 글자 꾸미기

박스 그림자 효과 만들기

둥근 모서리 만들기