웹 퍼블리싱 1주차

▶퍼블리싱 기본 개념 : Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것.

▶퍼블리싱에 대한 개념 :

• 마크업 : HTML을 통해 기본 뼈대를 만듭니다.
• 스타일링 : CSS로 마크업에 색상 등의 속성을 입혀 스타일을 지정합니다.
• 부가 기능 : Javascript로 특정 요소에 기능을 만들어 부여합니다.

▶HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.

• head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
• 페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. 나중에 body 작업을 하면서 필요한 정보들을 넣어보겠습니다.
• body 안에 들어가는 대표적인 요소들!
• 이 외에도 아주 많으며, 개발자들도 모두 외우고 있지 않습니다. 필요할 때마다 찾아서 넣어보세요! 코딩은 구글링이 필수랍니다!

▶CSS 기초

• 태그를 바로 가리켜서 꾸며주기
• 이름표를 붙이고 꾸며주기

▶CSS 트랜지션 기본 개념

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

 

▶미디어 쿼리란? : 주로 화면 크기가 다른 장치(PC, 태블릿, 스마트폰) 마다 다른 디자인을 보여주기 위해 사용됩니다.

▶개발자 도구 (Inspector) 란? : 크롬을 비롯한 사파리, 엣지, 파이어폭스, 오페라 등에서 제공하는 기능이며 이 도구를 통해 헤당 웹 페이지가 어떤 구조로 이루어져 있는지를 손쉽게 파악할수 있습니다.