기억하기 위한 기록

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 컬러가 사라진것을 볼 수 있다. 이유는 ? 자식요..

1. ul > li > 로 텍스트와 이미지를 넣어준다, ▼ 1번 결과 2. main section과 동일하게 width 값은 1400px로 변경해준다. 3. 가운데로 오게끔 margin 값을 조정해주고 margin { 0 auto; } , 함께 행복한 소비생활 h2가 가운데로 올 수 있도록 text-align:center; 해준뒤, 아래의 ul과 여백을 주기 위해 h2에 margin-bottom:50px;준다. ▼ margin-bottom :50px 한 결과값 4. ul은 section happy의 width인 1400px에 꽉 찰 수 있도록 100%를 준다. 5. 보기 편하도록 li를 float : left로 정렬해준다. 정렬하고 나니 우리가 4번에서 적용한 ul이 날라간것을 볼 수 있다. (yello..

- 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*/ 페이지가 ..