레이아웃을 구성하는 CSS 박스 모델 5 - 웹 요소의 위치 지정하기

눈이 조금 감기지만 이 내용만 학습하고 취침하려고 한다. 강의도 다 들었고 이제 정리하면서 학습을 진행해보려고 한다. 그래도 공부하는 것이 정말 재미있어졌다.

웹 문서에서 위치나 글씨를 원하는 위치에 넣고 싶은데 생각만큼 쉽지 않다. 이럴 때 position 속성을 사용하면 웹 문서에서 요소의 위치를 자유롭게 정할 수 있다.

---

 

 

 

 

1. 웹 요소의 위치를 정하는 left, right, top, bottom 속성

position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정한다.

 

 

 

텍스트 요소 자유롭게 배치하기

 

---

 

 

 

 

2. 배치 방법을 지정하는 position 속성

웹 문서 안의 요소를 자유자재로 배치해 주므로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하다. 이 속성을 이용하면 텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다.

 

 

 

position 속성으로 요소 위치 지정하기

 

 

# relation-2는 원래 위치에서 오른쪽으로 100px 이동하고 위로 50px 올라간 만큼 겹쳐서 배치되었다. position: absoute는 부모 요소나 상위 요소를 기준으로 해당 위치를 지정해 배치한다.

다음의 실습을 진행해보면 이 개념이 좀 더 잡힐 것 같다.

---

 

 

 

 

DO IT 실습 - 배경 위에 글자 표시하기

배경 위에 표시된 CSS3글자를 배경 이미지 영역을 벗어나지 않으면서 화면 오른쪽 아래에 옮겨볼 것이다.

 

 

1단계 : HTML 파일과 DSS 파일 나란히 놓기

---

 

 

 

2단계 : CSS 파일 수정하기

---

 

 

 

 

3단계 : HTML 파일 확인하기

HTML 파일에서 마우스 오른쪽 버튼을 누른 후 Open with Live Server를 선택한다. 그러면 CSS 파일에 추가한 텍스트가 브라우저 창의 오른쪽 아랫 부분에 나타난다.

글씨가 표시되는 건 배경 이미지에서 한참 떨어진 곳이다. 이건 전체 화면을 기준으로 위치가 지정된 것이다.

---

 

 

 

4단계 : 부모 요소에 position 속성 추가하기

기준이 되는 요소를 지정해야 한다.

 

 

이제 배경 위에 글씨가 잘 표시되었다.

---

 

 

 

 

 

학습을 마치고

8장의 내용을 모두 학습하였다. 이제 연습문제를 푸는 것만 남았는데 이건 내일 이어서 학습해보려고 한다. 벌써 1시가 넘은 시간이지만 열심히 공부하다보니 시간 가는 줄 몰랐다.

HTML과 CSS가 되지 않으니 JSP/Servlet도 자바스크립트도 프로젝트도 별도 재미가 없었던 것 같다. 난 뭐든지 기초가 잘 잡혀야 그 다음 단계로 넘어갈 수 있는 사람임을 이번에 더욱 확실히 알게 되었다.