기억하기 위한 기록

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

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