[HTML/CSS활용] 웹용 이력서 폼을 만들자 (sample)2탄- 끗

지난 1탄에 이어서, 왼쪽 텍스트를 맞추었으니, 이번에는 오른 쪽  텍스트를 맞추어보자,,, 오른쪽 텍스트 부분과 왼쪽 텍스트 부분을 큰 타이틀끼리 서로 맞추려고 했는데, 아무래도 서로 텍스트 양이 다를 것 같아서 그냥 완벽하게 맞추진 않았다. (결코 못해서가 아님........;;;) 

 

완성된 웹용 프로필 페이지

 

오른쪽 구조의 경우 h5로 About Me, Education, Experience 타이틀을 적어주고, 나머지 상세 내용들은 p태그에 넣어주었다. 다만, h5 태그에 클래스명으로 list를 주어 각 h5끼리 간격은 맞추어 주었음. 오른쪽으로 들여쓰기도 좀 해주고...

 

오른쪽 부분 html 구조

구조 자체는 단순하고 사실 CSS로 위치를 이리저리 왔다갔다 하느라 시간이 좀 걸렸다.... 

CSS에서 오른쪽 콘텐츠 부분(.profile2)에 너비 값을 50%로 주고 float:left로 주어 왼쪽으로 밀어서 마진을 주어서 위치를 조정해 주었다.

.profile2{ width: 50%; float: left; margin-left: 55%; margin-top: -30%; }

그리고 .list로 클래스를 준 타이틀 같은 경우에는, 폰트 사이즈를 설정해주고 패딩을 px로 주었다. 한 10px 정도 주니까 알아서 밀려 내려가고 올라가고 옆으로 땡겨지더라,,,, 

오른쪽 콘텐츠 하위내용부분에는 block처리를 해준다음에 패딩과 마진으로 위치 조정을 해주었다.

폰트사이즈는 .list보다 작게 주었다. 그리고 p태그에 너비값을 줘서 그 너비값만큼 넘쳐나면 아래로 흐르게 만들어 주었다. 텍스트가 얼만큼 올지 감이 안잡힐 때 그냥 너비값을 주어가 아웃라인 쳐서 조정하면 비교적 빠르게 위치를 잡을 수 있다.

이렇게 하면 끄으으읕-! 

물론 매우 기초적이고 다소 허접하긴하나..... 보통 구조는 비슷비슷해서 나중에 참고하려고 연습삼아 만들어 보았다. 

 

/*잡소리 시작

아 드디어 이제 JAVA Script 수업이 시작되었다.... 다행이 변수나 문자열 등 기본적인 문법은 파이썬과 많이 다르지 않아서 알아듣고는 가고 있는데,,,, 모르겠당.... ㅜ.ㅜ 다시 복습하는데 변수명 짓다가 멍만 때렸다.....흐미,,, */