14.웹프로그래밍, CSS, 웹페이지의 레이아웃(layout) 대해서 알아볼께요..^^

블로그목적

CSS관련 웹페이지의 레이아웃에 대해서 공부및 정리 후 공유한다.

웹페이지의 레이아웃(layout) 이란?

웹페이지 레이아웃에는 HTML 요소의 위치, 크기등이 포함되어 있음.

예를 들면, 쉽게말해서 집을 새로 사기위해서 계약금, 중도금, 잔금을 치르고나서 등기를 치고, 새집에 들어가게되면, 집안에 TV, 가구, 냉장고 등등을 배치하게되는 상황과 유사하다고 해야 할까? 암튼 그렇다..^^;

박스모델(Box Model)에 대해서 알아볼까요?

박스모델이란?

웹 브라우저가 각 요소를 화면에 그릴 때는 무조건 사각형으로 간주한다는 것을 말함.

사각형을 이루는 요소는 아래와 같음.

패딩(padding)

내용과 테두리 사이의 간격

눈에 보이지 않음.

테두리(border)

내용과 패딩 주변을 감싸는 테두리를 말함.

마진(margin)

테두리와 이웃하는 요소사이의 간격

눈에 보이지 않음.

내용(content)

텍스트 or 이미지가 들어있는 박스의 실질적인 내용부분임.

박스모델을 확인하려면, 아래 CSS 를 추가하면 볼 수 있음.

전체소스

웹브라우저 실행화면

크롬에서 개발자도구(F12)를 실행하면, 위와 같이 박스모델을 확인할 수 있음.

그럼, 블록요소 / 인라인요소에 대해서 알아보자.

HTML 요소는 블록요소 or 인라인 요소 중의 하나에 속함.

블록요소

화면의 한줄을 전부차지함.

요소

h1

p

ul

li

table

blockquote

pre

div

form

header

nav

예시

웹브라우저 실행화면

설명

위와 같이, 블록요소는 한줄에 하나씩 배치된다는 것을 확인할 수 있음.

인라인요소

한 줄에 차례대로 배치됨.

즉, 현재줄에서 필요한 만큼의 너비만을 차지함.

요소

a

img

strong

em

br

input

span

예시

웹브라우저 실행화면

설명

위와같이 인라인요소는 한 줄안에 차례로 배치됨을 확인할 수 있음.

블록요소 / 인라인 요소의 혼합

일반적으로 웹페이지는 위에서 설명한 블록요소와 인라인요소가 혼합되어 있음.

즉, 블록요소가 나타날때까지 인라인 요소는 같은 줄에 배치되어지게 됨.

예시

웹브라우저 실행 화면

설명

위와 같이, 인라인 요소는 같은 줄에 배치되지만, 블록요소은 h1 요소는 새로운 줄에 배치됨을 확인할 수 있음.

그럼, 해당 블록/인라인 속성을 CSS로 변경할 수 는 없을까?

정답

가능하다.

그럼 어떤 속성이 있는지 확인해보자.

속성

display

block

블록요소처럼 배치됨.

inline

인라인요소처럼 배치됨.

none

문서의 흐름에서 해당 요소를 완전히 배제하고 할 때 사용함.

hidden

문서의 흐름에서 요소가 제거 되지 않지만 보이지는 않는 상태로 변경할때 사용함.

예시

일반적인 리스트

블록요소

웹브라우저 실행화면

설명

리스트가 블록요소이므로 추가 될 수 록 새로운 줄에 배치가 되어짐을 확인할 수 있음.

블록요소 -> 인라인요소로 변경해보자.

display : line 으로 설정

인라인요소로 변경

웹브라우저 실행화면

설명

위와 같이, 리스트가 블록요소이지만, CSS 로 display 속성에 inline 을 설정하고 나서는 인라인요소가 되었음을 확인할 수 있음.

​

결론

웹페이지 레이아웃에는 HTML 요소의 위치, 크기등이 포함되어 있음.

박스모델은 웹 브라우저가 각 요소를 화면에 그릴 때는 무조건 사각형으로 간주한다는 것을 말함.

구성요소는 패딩, 테두리, 마진, 내용 이 있음.

HTML 요소는 블록요소 or 인라인요소 중 하나에 속함.

CSS를 통해서 블록/인라인요소의 속성을 변경가능 함.

display 속성을 사용.

오늘도 웹페이지의 레이아웃 지식에 대한 마술(?) 한가지 획득완료! 감사합니다. ^^

---

오늘의 명언 한마디

중금속은 납, 카드뮴, 비소, 크롬, 수은등 물리적으로 조밀한 천연원소다.

중금속은 뇌에 독성을 지니며, 두통에서 피로, 신경퇴행까지 다양한 뇌 건강 문제를 유발하는 것으로 알려졌다.

카드뮴과 납은 학습장애 및 지능지수(IQ) 감소와 연관이 있다.

납에 노출되면, 또 충동성과 폭력적행동도 부추길 수 있다.

수은은 주의력결핍장애, 학습장애, 기억력 손상, 운동기능 장애와 관련된다.

어떤 중금속이든 대량으로 1회만 노출되어도 뇌 손상에 영향을 미친다는 상관관계를 뒷받침하는 연구들이 많다.

아무리 소량이라도 수십년에 걸쳐 지속적으로 중금속에 노출되면, 마찬가지로 해로운 영향을 미친다.

더구나 몇 가지 중금속에 복합적으로 노출되면, 극소량으로도 우리 건강에 악영향을 미칠 수 있다.

톰 오브라이언지음, "당신의 뇌를 고칠 수 있다." 중에서....

---

오늘의 영어 한마디

It'll break your mother's heart.

어머니의 마음을 찢어지게(매우 슬프게) 할 것이다.

if you tell her you're going to give up college.

만일 네가 그녀에게 말하면 / 네가 포기할 것이라고 / 대학에 가는 것을

해설

심장(heart)은 마음을 상징, 마음을 산산 조각나게 한다는 것은 누군가를 슬프게 하는 것.

왜냐하면, 어머니가 상심하면 마음속에 품고 있던 기대, 희망이 상심하기 이전 모습과 매우 다르게 됨.

물건이 원래 있던 모습과 분리되거나 단절되면 " break" 의미가 됨.

---

오늘의 민법 한마디(for real estate)

제1편 총칙 / 제3장 법인

제48조(출연재산의 귀속시기)

1. 생전처분으로 재단법인을 설립하는 때에는 출연재산은 법인이 성립된 때로부터 법인의 재산이 된다.

2. 유언으로 재단법인을 설립하는 때에는 출연재산은 유언의 효력이 발생한 때로 부터 법인에 귀속한 것으로 본다.