기억하기 위한 기록

기본 레이아웃 작성 1. header _ html 2. css header는 고정될수 있도록 position : fixed ; 해준다 - 로고가 센터에 위치할 수 있도록 해주는것 header의 height 과 동일한 값으로 line-heigh의 값을 매겨주면 , 태그가 가 센터로 위치하게 된다. - 로고를 제외한 nav요소들이 오른쪽으로 올 수 있도록 float : right ; 해주면 오른쪾으로 오는것을 볼 수 있다. - 아래로 떨어진 메뉴들을 정렬해준다. ㄴ> li는 block속성으로 block속성을 유지하면서 + inline 속성이 여으로 나열 될 수 있도록 inline-block으로 지정해주겠다. block속성은 한줄을 다 차지하는데, inline 속성은 옆으로 나열이 되기 때문에 완성본의 결과와..

1. news section html코드를 작성한다. ㄴ> div로 두 영역을 잡아주고 issue 로 클래스명을 동일하게 묶어줌 2. news 영역의 width 값을 1400으로 주고, height는 자동으로 준다. 영역이 가운데로 올 수 있도록 margin 0 auto 를 준뒤 나란히 정렬될 수 있도록 보기 쉽게 green으로 영역을 표시해준뒤 작업한다. 3. issue 들을 전체 영역인 news에서 덜어트려 주기 위해 margin-top을 주고, width값을 준다. div마다 영역이 할당될 수있도록 49%로 일단준뒤 왼쪽으로 정렬하기 위해 float : left ;를 준다. ㄴ> issue에 작성해주고 난 처음에 먹여준 section.news에 bg 컬러가 사라진것을 볼 수 있다. 이유는 ? 자식요..

- 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 ..

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