프런트 엔드 페이지 개발 단계에 대한 자세한 설명

상사 또는 당사자 A는 수요의 진정한 창시자이자 기본 아이디어의 몽상가입니다. 제품은 수요에 대한 전문적인 분류 또는 효과적인 평가 및 개선을 담당하여 설계되었습니다. 프런트엔드의 업스트림이고, 디자인의 다운스트림은 프런트엔드입니다. 디자인 작업의 목적은 제품의 거시적 사고 결과를 전문적으로 처리하는 것입니다. 왜냐하면 일반적인 습관에 따르면 제품의 최종 결과는 프로토타입 도면이고, 프로토타입 도면은 디자인의 스케치로 이해될 수 있기 때문입니다.

​​​​​​​​​​​​​ , 이 스케치는 너무 단순하거나 사용자의 조작 습관에 맞지 않아 색상 매칭, 레이아웃 분리 등 디자이너의 전문적인 처리가 필요하며 때로는 그것은 또한 사용자가 페이지와 상호 작용할 수 있도록 예약 프로세스를 설정하는 상호 작용 작업의 일부입니다.

그러자 누군가가 "디자인 없이는 작동하지 않나요?"라고 물었습니다. 단순히 프런트엔드가 페이지를 직접 작성하도록 하는 것만으로는 충분하지 않으며, 디자이너가 그림을 만들도록 귀찮게 해야 합니다.

여기에는 비용 리스크 관리라는 개념이 있기 때문에 초기 단계에서는 특히 디자인에서는 이성적 사고보다 주관적인 감정이 더 크기 때문에 매일 결과가 다르기 때문에 디자이너는 이 부분을 주관적으로 소화해야 합니다. 오해가 생겨났고, 그리고 비용 측면에서 일부 장면 디자이너는 코드보다 그림의 변경을 제어하는 ​​것이 더 쉽습니다.

디자이너의 결과물은 여러 레이어를 겹쳐놓은 결과물인 psd파일인 반면, 프론트엔드 작업결과 html페이지는 html을 이용하여 여러 레이어의 효과를 유기적으로 정리하는 과정입니다.

프런트엔드는 변환된 HTML을 다운스트림 서버 개발 엔지니어에게 넘겨주는 역할, 즉 백엔드 개발이라고 불리는 것입니다. 이 HTML에는 일부 대화형 js 파일 등이 포함되어 있습니다. 일반적으로 프런트엔드는 과거와 미래를 연결하는 위치이다. 프런트엔드의 책임을 증폭시켜 프론트엔드 뷰 레이어 페이지 전체의 개발을 담당하는 회사도 있습니다. 이에 대한 장단점은 이전 글에서 다루었기 때문에 나열하지 않겠습니다. 그것들을 하나씩.

배경 속성

배경 속성은 CSS에서 일반적으로 사용되는 중요한 속성으로, 상자에 대한 배경 이미지와 배경 색상을 설정하는 역할을 담당합니다.

　 a. background-color는 배경색을 설정합니다.

　 b. background-image는 배경 이미지 주소를 설정합니다.

　 c. background-repeat는 배경이 반복적으로 배열되는 방식을 설정합니다.

d. position 설정 배경 이미지의 위치

e. background-attachment 배경 이미지를 고정할지 아니면 스크롤바로 스크롤할지 설정합니다.

실제 응용에서는 background 속성을 사용하여 위의 모든 설정 항목을 하나로 묶을 수 있습니다. , 더 높은 성능과 더 나은 호환성을 제공하는 그렇게 하는 것이 좋습니다.

예: background:#f00 url(bg.png) 반복 없음 왼쪽 가운데 고정

　 background:#f00 url(bg.png) 반복 없음 10px 25px 고정

프론트 엔드 페이지 개발 과정

　a. 페이지 프로젝트 디렉토리를 생성합니다.

　 b. Photoshop을 사용하여 렌더링을 잘라내고 웹 페이지 제작에 필요한 작은 그림을 잘라냅니다.

　c. 장식 이미지를 결합하여 스프라이트 이미지를 만듭니다.

　d. Photoshop과 코드 편집기를 결합하고, 렌더링을 참조하고, html 및 css 코드를 작성하고, 페이지를 생성합니다.

위 내용은 프런트 엔드 페이지 개발 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!