강의 정리/퍼블리싱 수업

4주차: 디자인 시안으로 코딩하기

실무에서 처럼 디자인 시안을 받았다고 가정하고 작업했다. bg 사용할 때는 span class="blind"로 텍스트 플라인드 처리하고 이미지 설명 img 사용할 때는 alt 꼭 써주기 > 리더기가 읽기 때문에 디자인 시안 종류 psd는 용량이 크고, 폰트 영역을 잡거나 이미지를 저장할 때 힘들다. 피그마, 재플린, xd는 이미지 1배수, 2배수, 3배수 등 배수 별로 이미지를 다운로드 가능, 폰트도 누르면 바로 카피가 가능하므로 사용이 쉽다. 피그마, 재플린, xd로 시안을 받으면 360 이나 380 포토샵으로 시안을 받으면 640, 720 > 2배수 (해상도 때문) 올바른 태그 사용 영역에 대한 제목 콘텐츠에 대한 제목 문장강조, 게시글 제목 단어강조, 이벤트기간 작성자 작성일 전화번호는 a태그로 전..

2주차: flex, grid

2주차 수업은 flex, grid와 scss를 간단히 배웠다. flex는 중심축과 반대축이 있다. 중심축을 중(j)심의 j라고 외워서 justify-content 사용하는 축 반대축을 바안(a)대의 a라고 외워서 align-items 사용하는 축이라고 외우면 편하다. flex의 특징 (1) float를 사용해서 아이템을 정렬하고 아이템에 패딩을 줄 경우 box-sizing: border-box를 쓰지 않으면 밑으로 떨어졌겠지만 flex는 무조건 한 줄에 들어오기 때문에 (flex-wrap: no-wrap이 기본이기 때문) box-sizing: border-box를 쓰지 않아도 떨어지지 않는다. (2) flex의 아이템들은 높이를 공유한다. align-items: strech가 기본 값이기 때문에 따로 높..

1주차 수업 : float

⏬ 목차 더보기 1-1. 시멘틱 태그란? 1-2. 시멘틱 태그 사용시 장점 1-3. 어디에 사용할지 헷갈리는 시멘틱 태그 2. padding vs margin 3-1. 블록요소 vs 인라인 요소 vs 인라인 블록요소 3-2. 인라인 블록 요소의 여백 4. css 명시도 (우선순위) 5. css 속성 작성순서 6. 성질을 변하게 만드는 속성 7. % 와 px의 차이 8. 가운데 배치 9. 리셋 속성 단축 키워드 10. 기타 css 속성 단축 키워드 11. Emmet 12. vscode 단축키 🚩 이번 수업으로 알게된 점 1주차는 float로 레이아웃 배치하는 것에 대해 중점적으로 배웠다. 지금은 flex를 주로 사용하지만 유지보수 할 때, float으로 정렬된 프로젝트들도 있기 때문에 알아야한다. 시멘틱태..