본문 바로가기

IT/웹코딩기초8

[웹사이트_리디자인] 화면설계 - 와이어프레임, 메인페이지, 스토리보드 레이아웃 잡는 방법 1. 화면 설계를 위한 와이어프레임 - 1920x1080 기준으로 작업하되 화면설계&화면구현 시 컬러감이 들어가지 않는게 좋다. - 디자인 레퍼런스 참고를 위해 자주 방문하는 Pinterest 에 '와이어프레임'이라고 검색해보았다. 2. 웹사이트 메인페이지 레이아웃 화면설계 및 구현 중요점 기능 : - 사이트 명확한 목표 메시지 전달 - 사이트 전체 정보 파악 / 명확한 정보 구분 - 우선 순위 콘텐츠 강조 - 우선 순위별 시각 흐름 - 핵심 콘텐츠 : 강조(선택과 집중) 표현 : - 사이트의 시각 정체성(주제, 성격) 전달 - 강렬한 룩 앤 필 - 신뢰 할 수 있는 그래픽 퀄리티 3. 웹사이트 메인페이지/타이틀(서브페이지) 스토리 보드 작성방법 스토리 보드 1단계 ＃ 메뉴 구성도 만들기 전체적인 메뉴 .. 2023. 5. 23.
[HTML/CSS] 제주 게스트하우스/펜션민박집 - 메인 웹페이지 리디자인(화면설계 과정/파일코드공유) 안녕하세요. 오늘은 메인 웹페이지 리디자인 기초를 정리해볼까 합니다. "제주 게스트하우스 요안도라 메인 웹페이지 만들기"인데요! HTML/CSS 과정 초보가 따라해보기 좋은 작업입니다. ▼ 화면 설계 과정과 하단에는 전체 파일 코드와 사진까지 공유하고 있으니 참고하시어 연습해보심 좋을 것 같아요. ^^ 그럼 시작하겠습니다. 1. 화면설계(구조/요소 분석하기) - 가로 1000px - 헤더 300px - 내비게이션 50px - section width 70% - aside width 30% (section float 사용해서 배치) - footer 이렇게 화면설계를 위하여 구조를 분석하고 값을 지정해주었습니다. 2. 바디 Container 박스안에 Header 작성하기 Joandora 가장 제주다운 수산리.. 2023. 5. 15.
[CSS] Transition Animation 광주시 마우스 닿으면 위로 올라가며 바뀌는 로고 애니메이션 효과/HTMl 파일 공유 [CSS] Transition Animation 광주시 마우스 닿으면 전환되는 애니메이션 효과 오늘은 경기광주시청 홈페이지 내에 있는 애니메이션 전환 효과를 알려드리고자 해요. 들어간 효과가 어떤 것인지 살펴볼까요? 위 영상에서 보이는 것처럼 1. 박스에 닿을 때 박스가 올라가는 애니메이션 효과 2. 박스에 닿을 때 박스 색이 바뀌는 효과 3. 박스에 닿을 때 로고와 텍스트가 올라가고 내려가는 전환 효과 4. 그림자 효과 등이 있을 것 같아요. 그럼 순서대로 정리해보도록 해요! 하나씩 하나씩 기본 구조를 먼저 작성해보고 스타일을 적용해볼게요~ 1. body 기본구조 타이틀 적기 광주시에 오신 것을 환영합니다. 2. 폰트 연결 딱 봐도 지마켓 산스 폰트길래 폰트링크를 가져와주었어요. /*G마켓 폰트 CDN.. 2023. 5. 12.
[HTMl/CSS] 헤더, 메인, 푸터 섹션 나누기 / 시멘틱 태그 레이아웃 예제 1. Header (헤더;머릿말) 제목, 영상,이미지 등을 넣어서 이 페이지가 어떤 사이트인 지를 파악하게 하는 역할 - 가장 공을 많이 들이는 부분 - 그래픽이 중요한 역할을 함 2. Main (메인;본문) 실제 내용, 핵심 컨텐츠를 담음 3. Footer (푸터;꼬릿말) 웹사이트 내의 하단 영역 브랜드 로고부터 사이트 맵, 필수 페이지에 대한 링크, 소셜 정보, 저작권 표기, 언어 설정 등의 기능을 모아놓은 영역 1. html 작업 오늘 해볼 시멘틱 태그 레이아웃 예제는 다음과 같다. 이름을 지어주는 이유는 css에서 불러오기 위해서 씀. 2. CSS 추가 모든 요소 공통사항으로 폰트와 보더박스를 지정해주었다. * { /*모든 요소 공통 사항 */ font-family: 'Gothic A1', san.. 2023. 5. 10.
[HTML/CSS] div요소와 box안에 box이미지 넣어서 반응형 데스크탑 모바일 페이지 만들기 [HTML/CSS] div요소와 box안에 box이미지 넣어서 반응형 데스크탑 모바일 페이지 만들기 오늘 만들어볼 예제는 다음 사진과 같다. 더보기 먼저, 예제를 분석해보자. 왼쪽은 데스크탑형이고 오른쪽은 모바일형이다. 1. 반응형 때문에 HTML의 table 표 태그를 사용하는 것보다 CSS로 만드는 것이 좋겠다. 2. 박스안에 박스를 만들고 그 박스안에 이미지와 텍스트를 넣어야한다. div 태그들을 사용해서 박스안에 박스를 만들어주고자 한다. 1. HTMl 기본 형식을 갖추고 body에 div 태그를 통해 이미지를 불러와주었다. - div class=box로 묶어서 css에서 스타일을 한번에 적용할 수 있게 만들어주었다. - 이미지폴더 안에 p1~p6을 음식사진으로 지정해두고 이미지를 불러왔다. 삼겹.. 2023. 5. 9.
[CSS] 링크선택자와 가상 클래스 선택자 요소와 순서 정리 1. 링크 선택자 사용방법 선택자:link :link로 링크가 걸린 요소들을 선택한다. 사용법) a:link(눌러보지 않은 a링크에 삽입) a:link { color: Blue; } 태그 중 링크가 걸려있는 요소를 파란색으로 적용한다. :visited로 방문했던 링크가 걸린 요소들을 선택한다. a:visited { color: Blue; } 태그 중 방문한 적이 있는 요소를 파란색으로 적용한다. 2. 가상 클래스 선택자 (pseudo-class) 가상 클래스 선택자(pseudo-class)는 HTML 문서에 작성된 요소에 가상의 클래스를 생성할 수 있다. - 가상클래스 가상요소는 상황에 대한 스타일을 이야기하며 스타일을 잘 사용하려면 이것을 꼭 알고 가야한다! - 많이 쓰이는 것은 굵게 밑줄 표기해두었다.. 2023. 5. 8.
[HTML] 초보자에게 유용한 비주얼 스튜디오 코드 단축키 태그 정리 초보자에게 유용한 HTML에 필요한 비주얼 스튜디오 코드 기본 단축키 및 초보자에게 HTML 태그를 정리해서 소개해드릴까 합니다. 비주얼 스튜디오 & HTML 코드 단축키 1 비주얼 스튜디오 기본 단축키 및 HMTL 태그 정리 [alt+L], [alt+O] : 실시간 보기 [ctrl+H] : 문서내용 바꾸기 [alt+shift+방향키(위/아래)] : 복사 ctlr+] : 들여쓰기 태그 : 줄바꿈, 종료태그가 없음. ex) 한줄한줄 끊어낼 때 쓰임 태그 : 단락, 새로운 단락을 만듬. 앞뒤로 감싸서 태그를 만들어줌. ex) 새로운 단락을 만듭니다. ~ 태그 : 제목 태그 1~3번까지만 거의 쓰임 ** 기본 픽셀은 16px(12pt)이다 ** ※ 섹션에서 제목은 h2, 섹션에서 내부 내용은 h3을 많이 쓴다.. 2023. 5. 5.
[코딩기초] VisualStudioCode 비주얼 스튜디오 코드 다운로드 및 꼭 해야하는 기본설정 & 셋팅방법 오늘은 Visual Studio Code(비주얼 스튜디오 코드) 프로그램 설치 방법 및 코딩 작업 시 미리 해야하는 기본설정 및 셋팅방법에 대해 알려드릴게요! 1 먼저, 구글에서 Visual Studio Code(비주얼 스튜디오 코드)를 검색하여 사이트를 들어갑니다. 아래 Download를 먼저 들어가도 바로 다운로드 사이트로 이동할 수 있어요. 2 상단 오른쪽에 Download를 눌러주고 WIndow or Mac을 선택해주고 ↓ 다운로드 버튼을 눌러주어 설치를 시작합니다. 3 next를 눌러 계속해서 설치를 진행해주시고 완료가 되었으면 시작하기 전 설정을 해주시면 좋습니다. ※ 기본 셋팅 Extension 확장 2가지를 설치하시고 가시면 유용합니다! 1. 비주얼 스튜디오 코드를 열었을 때 왼쪽 마지막 .. 2023. 5. 1.

티스토리툴바