기억하기 위한 기록

- main에 맨 왼쪽에 위치하던걸 오른쪽으로 가져오고, 위에서 50%정도에 위치시켜준다. main에 position:relative를 두고 may는 position : absolute; 로 한뒤 top 에서 50% 떨어지게 위치시켜줬다. .may {position:absolute; width:185px; height:300px; top:50%; background:green; right:300px; } - .may를 .title과 비슷한 위치로 올리기 transform:translateY(-50%); 를 이용해 title과 같은 위치로 끌어올려준다. - 완성본을 보면 .may 안에있는 a태그에 주황색 st로 원이 들어가져있다. 일단 정사각으로 영역을 만들어준다. width : 145px; height ..

display 속성은 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본 값이 다릅니다. - none : 보이지 않음 - block : 블록박스 - inline : 인라인 박스 - inline-block ; block과 inline의 중간 형태 1. none : 요소를 렌더링 하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한것과 달리, 영역도 차지하지않습니다. 2. block : 기본적으로 가로 영역을 모두 채우며, block요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음줄에 표시되던 것과 비슷한 맥락입니다. width , height속성을 ..

잘난 웹디님 강의를 통해 퍼블리싱을 위한 웹페이지를 제작 과정을 공부하고 있습니다. 오늘은 한국소비자원의 메인페이지를 제작하는 강의를 들으며 실습을 하였고, 실제로 페이지를 제작하는 2강부터 포스팅을 하겠습니다. 한국소비자원 웹사이트 제작 강의에서는 HTML5 markup문서구조정의와 구글폰트 import하는 법, css3속성을 이해하며 Layout Design적용하는법, Block과 Inline속성, position에 대한 이해와 적용, 다양한 효과 (hover나 focus등..), 개발자도구 활용법에 대해 공부할 수 있으며, 2강에서는 메인페이지의 헤더영역을 제작하였고 그에 대한 공부한 내용입니다. 공부하며 개념을 다질 수 있는 내용 위주로 (혼자 기억하기위함) 올립니다. /*reset*/ 페이지가 ..

* 잘난웹디님과는 다르게 이클립스로 실습했음 이클립스로 실습시 순서 1. window > preference > encoding > UTF-8로 변경후 작업환경 세팅 2. dynamic web project > 프로젝트 생성 > webcontent > index.html 생성 후 코드 작성 3. 서버 생성 후 포트넘버 변경 예제 완성본 전체를 div.wrap 으로 감싼 wrap > div.contents 예제를 담아본다. contents 안에는 제목 : 지금 꼭@ 읽어야할 이야기 내용 : 안에 안에 총 3개로 나눠준다. li 안에 또 하나의 div로 텍스트들을 담아준다. div.imgBox > background 이미지로 사진을 넣을 예정 - link를 걸어 style.css를 불러온다. 영역 안에 - ..