본문 바로가기

2024/05

html_이미지 삽입, 링크 태그
html_이미지 삽입, 링크 태그 2024. 5. 31. 이미지 삽입 태그 : 단일태그 img src="그림파일명" / alt="설명글"(화면 리더기를 사용하는 경우 접근성을 높일 수 있다.) / title="풍선도움말로 텍스트가 나옴" / width="200px" : 이미지 가로 / height="400px" : 이미지 세로./ : 같은 폴더에서 꺼내겠다 원하는 폴더 엔터 - 이미지 엔터alt 는 설명 gif 는 색상이 단순한 애니메이션 파일 title : 해당 이미지의 설명으로 이미지에 커서를 가져다 대면 설명이 나오게 된다. 이미지에 대한 경로를 제대로 설정하지 않으면 깨진 이미지로 표시 되고 지정한 이름만 뜨게 된다.width : 이미지의 가로 크기 설정 / 이때 세로는 따로 설정하지 않는 이상 가로의 크기에 맞게 설정된다.이미지 태그는 inline태그..
html_개요
html_개요 2024. 5. 30. 시작 끝(문단) 현재는 자동으로 끝이 지정되는데 그러지 않게 설정 (자동으로 설정해 놓으면 코딩내용이 길어지다보면 꼬이게 된다.)마우스 휠을 사용해 크기조절 설정폴더를 오픈한 상태에서 해야 작업이 진행된다. (라이브 서버에서 열리도록 하여서 작업 상황을 확인할 수 있도록) - HTML 문서 저장시 주의할 점파일저장시 영문만 사용 (소문자) - 서버에서 인식을 하지 못해서 오류가 발생할 수 있다.숫자로 시작하면 안된다. (ex_1test.html / 111.html - X)띄어쓰기하지 않는다. (ex_test 1.html - X / test_1.html - O)특수문자 사용해선 안된다. (ex_test^^.html - X)사이트의 첫번째 문서는 index.html로 저장해야 한다.저장한 파일이 열리게 되면..
HTML_기본 설정
HTML_기본 설정 2024. 5. 29. 코딩 프로그램 Visual Studio Code 편하게 작업 하도록 하기 위한 프로그램부터 셋팅한다. - live server (현재 진행중인 작업을 바로 확인이 가능하다)- Auto Rename Tag (태그를 자동으로 보여주는 프로그램) 왼쪽 하단 설정 버튼으로 기본설정 vs 코드 - 로컬 컴퓨터에서 디자인 한걸 웹으로 구현 > 리모트 서버에 업로드 하여야 다른 사람들도 확인이 가능해진다. 닷홈 :  무료로 ip를 받아서 사용 할 수 있다. 작업한 html 파일을 올려 (index, sub...) 사이트를 제작할 수 있다. FileZilla - 만든 html 파일을 local컴퓨터에서 나의 사이트에 바로 올릴 수 있게 할 수 있다. 다만 처음 시작할때 폴더를 연결 해두어야 오류없이 사이트가 연결이 된..
05.26_피드백 이후 수정본
05.26_피드백 이후 수정본 2024. 5. 26.
와이어 프레임
와이어 프레임 2024. 5. 24. - 피그마를 사용해 와이어 프레임 만들기 임의로 프레임을 생성 후 프레임에서 와이어프레임을 선택해 영역을 넓혀 준다. 그리고 만들고자 하는 용도에 따라 중앙선을 넣어주거나 레이아웃 그리드를 생성해 준다. 픽셀 단위의 그리드나 칼럼 그리드등 다양하게 생성이 가능하다. 중앙선을 넣어줄 거기 때문에 센터로 선을 넣어준다.내용을 입력할 때 여백을 남기기 유용하도록 auto layar 로 만들어 준다.먼저 글을 하나 배치해준 후 오토 레이어로 만들고 주변의 여백을 모두 0으로 만들고 alt를 눌러 원하는 여백만큼 띄워 배치한다. 그리고 Ctrl + D를 눌러 주면 처음 설정했던 여백만큼 띄워지면서 복사가 된다. 그리고 글자를 전체 한번 묶어서 오토 레이어로 만들어 주고 글자를 변경하면 글자에 따라 여백을 자동적으..
피그마를 이용해 아이콘 제작
피그마를 이용해 아이콘 제작 2024. 5. 21. 피그마를 사용해 아이콘을 제작하게 되면 svg 파일로 제작 하게 되는데, svg 아이콘 하나만 제작하면 여러가지 반응형에도 적용할 수 있다. 용량이 작고 크기를 원하는대로 늘려도 이미지가 깨지지 않기 때문에 이미지 관리에 용이하다. (백터 방식이기 때문에 가능함) 피그마는 백터방식 기반이라 가볍고 ui 작업에 유용한 툴포토샵으로 합성이나 이미지 생성을 하고 피그마로 레이아웃을 잡는다. 툴은 포토샵과 유사하며 툴 사용법이 간편한 편이다. 색상 채우기 선 채우기등 다양한 선택지가 있다. (오른쪽에 +,-를 선택해 기능을 넣거나 뺄 수 있다.) 'frame'은 포토샵에서 캔버스와 비슷한 개념을 가지고 있다. 작업한 컨텐츠들은 모두 frame 안에 있어야 외부로 출력할 경우 모두 가져 올 수 있다. 툴을 사용해..
랜딩 페이지 디자인
랜딩 페이지 디자인 2024. 5. 20. 랜딩 페이지 > 반응형이 주된 트렌드모바일 사용자가 늘어나는 추세이기 때문에 반응형이 필요하다. 여기에 코딩이 더해지기 때문에 어려워 진다.반응형 웹 모음 사이트브라우저 크기에 따라 레이아웃이 변경되게 설정하고 디자인 하는게 반응형 디자인 (모바일, 태블릿, pc ...) brack point (중단점)반응형으로 변경할 때 바뀌는 부분을 이야기 한다.  (pc : 1024 + / 태블릿 : 1023 - 768 / 모바일 : 767 - 320 (375))기본적으로 모바일과 태블릿 둘다 세로상태를 기준으로 한다. - 랜딩 페이지 : 1페이지 짜리 홈페이지, 브랜드나 상품의 명함이라고도 할 수 있다. 판매자가 원하는 정보를 사용자에게 좀 더 직접적으로 전할 수 있도록 허고 사용자가 여러번 찾는것이 아닌 한번에..
~05.20 (피드백)
~05.20 (피드백) 2024. 5. 20. - 배너 디자인 (자유주제) _ 나이키 여름 세일 광고디자인인스타 : 신발의 그림자 약하게 하기 (글자가 파묻히게 된다.), 세일 외의 글자 무채색으로 바꾸기 (색이 너무 많아서 시선이 분산되어 가독성이 떨어진다.), 나이키 글자 크기 줄이기 (세일이 주된 내용이기 때문에 다른 글자를 줄이고 세일에 힘을 주는 것이 맞다.)네이버 롤링보드 :  'only online' 가 라인에 걸쳐져 있어 가독성이 떨어지고 시선이 막히기 때문에 위치 변경, 'only online' 글자색 변경, 전체적인 보조색 무채색으로네이버 타임보드 : 라인을 빼고 디자인의 통일성을 위해서 원을 넣어주기 글자색 무채색 (nike는 빼는것도 괜찮을지도?)- 배너 디자인 (가구페어)오타 수정, 오른쪽 'naturous' 위치 해당 부분의..
상세페이지
상세페이지 2024. 5. 17. - 상세페이지디자인은 가로가 기준이 된다. (기본 960 정도)보통 카드 디자인이나 크기가 작은 디자인들은 3등분법을 사용하지만 상세페이지는 세로가 길기 때문에 칼럼 그리드를 (12,16등) 사용한다. 그리드를 만들어 주는 사이트도 있다. 입력값(나누고자 하는 그리드 수, 컨텐츠 크기, 사이 여백)을 넣게 되면 계산을 해주는데 이때 컨텐츠 width와 full width 가 나오는데 여백을 잡지 않는 것과 잡은 값을 알려준다. '이벤트 페이지 제작'에서 나왔던 칼럼 그리드 설정 방법을 사용해 기본적인 베이스 그리드를 만들어 준다.- 화살표 만드는 방법 도형툴로 사각형을 그려준 후 path 수정툴을 눌러 원하는 꼭짓점을 누르고 우클릭 하여 Delect Anchor Point를 누르면 삼각형으로 만들어진다...
카드 디자인
카드 디자인 2024. 5. 16. - 카드 뉴스  : 이미지와 텍스트가 결합되어 배너 형태로 만들어진 '배너형 기사'  - 기본 구성 _ 표지 1장 본문 2-10장  마지막장 1장표지는 메인 타이틀 첫 페이지인 만큼 첫인상을 결정 흥미를 유발하는 타이틀을 작성해야함타이틀이 잘 보이게 끔 복잡하지 않게 배경이미지를 선택해야 하고본문은 제목, 내용, 배경 이미지 등을 구성하여 디자인 관련있는 이미지를 사용하고 본문 페이지인 만큼읽기 편안하고 가독성이 높은 폰트로 작성마지막 장은 생략 되기도 하지만, 기업/브랜드를 알릴수 있는 홍보문구, 전달하고자 하는 메세지 등을 넣어마무리 하면 좋은 인상을 줄 수 있다. - 제작시 주의 사항 - 가독성이 낮은 폰트 금지 - 적당하게 행간 조절 (1.5-1.2배 정도 / 모바일은 1.6-1.7배 까지도 가능..

티스토리툴바