html/css
css, 자기소개 페이지만들기 (feat.포트폴리오 기초단계)
URL 복사 이웃추가
본문 기타 기능
공유하기 신고하기
오늘은 자기소개 페이지
하나를 만들어 보았습니다
실제 포트폴리오는 이거보다
훨씬 복잡하고 많겠지만
초기 단계이기도 하고
페이지 하나만 만들거라
이정도의 코드만 들어갔습니다
이해안되었던 것들
한번 더 보면서 정리해보았습니다
css
html
결과화면
＊＊＊틀렸거나 궁금했던것,
이해가 안되었던 것들
수정하여 다시 되짚어보기
1.profile부분 > p 태그에
hover를 했을 때
p태그가 변화가 되는
(글자가 떨어뜨려짐) 현상을
고쳐보았습니다
이 현상을 고치기 위해서는
width값과 display:inline-block을
넣어야합니다 width는 임의로
결정을 해서 적당하게 넣어주면 되고
inline-block이 들어가는 이유는
inline-blcok의 특성이
기본 너비값이 컨텐츠 값이라
늘어나는 대로 (크기가 커지는대로)
같이 커져야하기 때문에 그렇습니다
제가 이해한건 이렇습니다
2.이 사진을 어떻게
중간으로 오게하나 >
일단, header영역을
구분하기 위해 색을 잠시 줘보았습니다
이렇게 구분한 후
밑에 또 다른 상자(div)를 생성해주어
거기에다가
text-ailgn:center을 준 후에
모양을 변형시켜주었습니다
header에다가는 negative margin을
주었습니다 이때 negative margin값은
임의로 주면 됩니다
3.inner 박스의 위치
section을 주어 대영역을 만들어준후에
안의 역할에 대한 셀렉터 이름을
지어주고(상자를 만들어주고)
또하나 inner라는 상자를
하나 더 만들어 주어야합니다
이때 역시 inner 값은
임의로 주면 됩니다!
margin:0 auto를 주어
중간으로 오게한후에
모든 inner의 영역들을
중간정렬이 되게끔 하였습니다
태그
취소 확인
`
공감
이 글에 공감한 블로거 열고 닫기댓글 쓰기 이 글에 댓글 단 블로거 열고 닫기
인쇄
댓글쓰기
1/1
이전 다음
이 블로그 html/css 카테고리 글
전체글 보기html/css글 목록글 제목작성일
화면 최상단으로 이동
이 블로그 인기글
이 블로그 인기글글 제목작성일
화면 최상단으로 이동
이 블로그 인기글
화면 최상단으로 이동