웹사이트 따라만들기 코딩일지#3 - 배너영역

 

완성된 모습 

그동안 혼자 배우고 따라연습하던 부분들을 복습하는 차원에서 삼천리 사이트를 따라 만들어보고있다.

아직은 복잡한 사이트들은 만들기 어려워서 좀 간단해 사이트 위주로 따라해보고있다!!

 

이부분이 조금 익숙해지고 이해가 된다면 리액트 도 배워볼 생각이다.

 

이번에는 코드들을 보면서 가장 중요하게 알고있어야할 개념은 ! 

 

* 인라인 요소 vs 블럭요소 개념 정리 

• 인라인 요소는 height가 적용되지 않는다.
• 인라인 요소는 width가 적용되지 않는다.
• 블록 요소는 vertical-align 이 적용되지 않는다.
• 블록 요소는 text-align이 적용되지 않는다.

1. 블록요소 (block element)

블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블룍 요소 다음에는 줄바꿈이 이루어 집니다.

display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있습니다.

div {display:inline}

▲ 모든 DIV태그를 inline요소로 변경함

HTML5의 블록요소 종류

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

2. 인라인 요쇼 (inline element)

인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있습니다. 그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 됩니다. 그래서 임의로 width, height로 변형을 줄 수가 없습니다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 종앙, 좌,우측 정렬을 할 수 있습니다. 그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 됩니다.

display:block CSS명령어로 인라인 요소를 블록 요소의 속성으로 변경 할 수 있습니다.

div {display:block}

 

▲ 모든 DIV태그를 inline요소로 변경함

div {display:inline-block}

 

▲ inline-block으로 인라인 요소와 블록요소의 속성을 모두 갖는 속성으로 변경이 가능합니다.

HTML5의 인라인 요소 종류

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var