neda의 블로그

웹사이트 파일 구조 웹사이트를 구성하는 파일은 html, css, javascript, images 등이 있다. index.html : 웹사이트의 최상위의 기본이 되는 파일 images 폴더 또는 resources 폴더 : 이미지 파일 저장 styles 폴더 : css 파일 저장 scripts 폴더 : javascript 파일 저장 웹사이트 파일 이름 많은 서버는 대소문자를 구분한다. myimage.jpg ≠ MyImage.jpg 공백은 브라우저, 서버, 프로그래밍 언어에 따라 다르게 처리될 수 있다. 따라서 공백이나 언더바(_) 보다는 하이픈(-)을 사용하여 파일 이름을 작성하여야 한다. my_image.jpg (X) / my image.jpg (X) / my-image.jpg (O) 따라서 파일 이름..

1. 계획하기 무엇에 대한 웹사이트인가? 무엇에 대해 어떤 정보를 제공하는가? 2. 디자인하기 대략적인 레이아웃을 구상하기 3. 에셋 선택하기 제공해야 할 텍스트, 이미지, 영상 등의 정보 디자인을 위한 테마 색상 -> 색상 선택을 위한 색상 선택기 디자인을 위한 글꼴 -> 구글 글꼴

prototype은 실제 제품을 만들기 전 디자인을 테스트하는 것이다. 정적인 wireframe mockup와 달리 동적으로 사용자가 시뮬레이션이 가능하다. 프로토타입은 의도한 대로 작동하는지를 확인할 수 있으며, 다른 개선점을 찾을 수도 있다. fidelity(충실도)는 최종 제품과 얼마나 비슷하게 만들어내는지를 나타낸다. 충실도는 design, content, interactivity의 구현 정도에 따라 달라진다. 일반적으로 low-fidelity, high-fidelity로 나눌 수 있다. low-fidelity prototype 빠른 프로토타입을 위해 핵심적인 일부만을 구현 가장 일반적인 것으로 종이를 통한 제작이 있음 장점 -> 빠르고 저렴한 구현, ->종이와 같은 쉬운 방식을 통해 누구나 접근..

html요소는 content + padding + border + margin로 이루어져 있다. content는 html요소의 내용이 들어가는 곳이다 padding은 content영역과 border 사이의 빈 공간이다. border는 요소의 가장 바깥 테두리이다. margin은 테두리밖 즉, 요소의 바깥 공간이다. 다른 요소와 간격을 두기 위해,혹은 요소의 위치를 움직이기 우해 사용한다. 크기 설정 속기형 순서 위부터 시계방향 4개 top right bottom left 3개 top (right-botton) bottom 2개 (top-bottom) (right-bottom) Box-sizing 기본값은 box-sizing: content-box 이때 요소의 크기는 width(height) + paddi..

css는 Cascading Style Sheets의 약자로 html태그의 시각적 효과를 준다. 기본적으로 선택자와 속성으로 구성 selector { property: value; } html파일에 import하기 html태그안에 인라인으로 작성하기 Hello css

bold글씨입니다 bold글씨가 아닙니다

html 첫 포스트