Git repository

210927

삼성전기index css_header 까지
기업사이트선정 > 홍루이젠

210928

삼성전기index css완료

css 스프라이트 이미지 사용 시 유용한 속성
background-position-x / background-position-y 로 x 또는 y좌표만 이동

홍루이젠 레이아웃

210929

삼성전기index 완료(js까지)

홍루이젠index html완료, css진행중

210930

정사이즈 풀스크린 캡쳐하기(집컴)
크롬 80%캡쳐 후 figma 1/2
웨일 > 전체페이지 캡쳐 > figma에서 1/2 크기로(폭:1920px)

ul을 화면 가운데로 오게 정렬하기(.gnb 등)
width:100%;text-align:center;

211001

html분리하기

JavaScript(JQuery)로 분리한 html 링크
$("#header").load("header.html");
분리 후 JQuery 경로 변경
// $("div.btn_srch").click(function(){});
$(document).on("click","div.btn_srch",function(){});
// $(".gnb>ul>li>a").bind("mouseover focus",function(){});
$(document).on("mouseover focus",".gnb>ul>li>a",function(){});

php로 분리한 html 링크(호스팅 후에 확인 가능, php버전에 따라 달라서 실패..
경험해보고싶었는데.. see you next time!)
<? include "header.html"; ?>

css 분리하기

1. import.css(reset.css포함 다른 공통 css파일 @import, html에 먼저 링크)
2. header.css
3. footer.css
4. layout.css(개별css 레이이웃 모두 가져와서 공통부분 제거 후
다른부분은 개별css에 지정하거나~background~ 통합~layout~)
메인페이지와 서브페이지간 레이아웃 차이가 클 경우에
처음부터 class name을 안겹치게 하면 편함

포폴 작성시 w3c 검사 후 캡쳐, 접근성검사는 K-WAH4.4사용
w3c통합검사기
css유효성검사
w3c통합검사기(sub)
css pass안될 경우 바꿔보기
nth-child(1) -> nth-child(0n+1)
nth-of-type(1) -> nth-of-type(0n+1)