16.웹프로그래밍, CSS, 레이아웃을 위한 div 요소 사용하기에 대해서 알아볼께요.

블로그목적

CSS관련 레이아웃을 위한 div 요소에 대해서 공부및 정리 후 공유한다.

​

레이아웃을 위한 div 요소 활용에 대해서.

div 요소를 사용해서 아래와 같은 절차로 레이아웃을 만들 수 있음.

첫째, html 파일을 생성하고 div 요소를 생성

둘째, css style 통해서 요소의 위치 및 색상을 지정

마지막, 원하는 레이아웃 완성

추가적으로,

div 는 블록 수준의 요소이고, 다른 요소를 그룹핑하는데 보통 사용됨.

​

그럼, div 를 사용해서 레이아웃을 실제로 만들어 보자.

목표

그럼 지금 부터 목표로 달려가 보자.

우선, html 파일을 생성 한 후 웹 페이지 내용을 아래와 같이 입력함.

exam0_div_layout.html

웹페이지 실행화면

설명

아직 css 를 작성하지 않아서 실제로 레이아웃이 나눠진 건지 애매모호 하다 ^^

그럼, css 를 통해서 해당 html 페이지에 라이아웃의 생기(?)를 불어넣어보자..

css style 추가

웹브라우저 실행화면

설명

위와 같이 목표와 같은 레이아웃이 만들어 짐을 확인할 수 있음.

추가적으로 설명을 하자면,

div 요소는 블록요소이기 때문에 한줄 전체를 차지하면서 크기에 따라 배치됨.

블록요소는 float 속성에 따라 달라지는데,

위와 같이 nav 은 float 이 left 이고, contents 는 float 이 right 가 되면서 한줄에 왼편/오른편으로 나눠짐을 알 수 있음. 그리고 width 의 비율에 따라 차지하는 영역이 결정됨을 확인할 수 있음.

그리고 footer 는 clear 속성이 both 이기때문에, 한 줄 전체를 차지하게 됨.

​

원하는 레이아웃만들기라는 목표 성공! 감사합니다. ^^

추가적으로, 레이아웃을 생성할 때는 템플릿을 사용하면 손쉽게 자기가 원하는 레이아웃을 만들 수 있음

예) 아래와 같은 무료 HTML5 CSS 템플릿 사이트 활용

https://templatemo.com/

​

결론

div 요소를 사용해서 나만의 layout 을 만들 수 있음.

레이아웃을 만드려면 아래와 같은 절차를 수행하면됨.

첫째, 기본 html 페이지 구성하되 div 요소 사용

둘째, div 요소에 대한 css style 을 적용함.

그리고 위의 추천사이트를 활용하면 좀 더 쉽게 내가 원하는 레이아웃을 만들 수 있음.

오늘도 div 요소를 활용한 나만의 layout 만들기에 대한 마술(?) 한가지 획득완료! 감사합니다. ^^

---

오늘의 명언 한마디

인생은 일괄거래다. 다시 말해 원하는 것만 주고받을 수 없고 고통이나 슬픔등도 모두 내가 살고 있는 삶에 포함되어 있으며, 내가 이 인생을 사는 한 모두 떠안고 가야 한다는 것이다.

인생의 잔인하고 혹독한 불공정함과 놀라운 공명정대함에 모두 마음을 열때, 우리는 있는 그대로의 삶을 평화롭게 살아갈 수 있다.

캔드럭 지음, "인생의 진정한 법칙" 중에서..

---

오늘의 영어 한마디

She likes to listen to the radio.

그녀는 좋아해 / 듣는 것을 / 라디오를

설명

"to listen to the radio" 는 라디오를 듣는 것이다.

"like" 는 ~을 좋아하다라는 동사임.

즉 그녀는 라디오를 듣는 것을 좋아하는 것을 의미함.

---

오늘의 민법 한마디

제1편 총칙 / 제5장 법률행위 / 제3절 대리

제129조(대리권소멸후의 표현대리)

대리권의 소멸은 선의의 제3자에게 대항하지 못한다.

그러나 제3자가 과실로 인하여 그 사실을 알지 못한 때에는 그러하지 아니하다.

---

목표

- 나의 강점을 바탕으로 나의 일을 잘해냄으로써 타인과 사회를 아릅답게 만든다.

- 현재 내가 가진 능력으로 누군가에 도움이 될 수 있을까? 에 대해서 항상 생각하기

- 나는 블로그 생태계에서 IT 테크관련 파워블로거및 인플루언서가 반드시 된다!

​

목표를 이루기 위한 실천방안

- 꾸준한 블로깅/기록법/독서법으로 넘버원이 아닌 온리원이 되보자.

- 천사불여일행(千思不如一行)을 항상생각하며 체화 및 각인시키자.

- "천번 생각하는것보다 한번 행동하는 것이 더 중요하다."

- 기기일약 불능십보(騏驥一躍 不能十步) / 노마십가 공재불사(駑馬十駕 功在不舍)

- 천리마도 한번에 열걸음을 뛸 수 없고, 느리고 둔한말이라도 열흘이면 하룻길을 간다.

- 모든 실수에는 마술이 숨어 있다. 따라서 나는 실수하면 실수할수록, 그런 실수에서 더 많이 배울수록 삶에서 더 많은 마술을 갖는다.