June, 28
하나씩 시도해보면서 당연한 것들을 알아가는 중이다. 새로운 세계에 무지한 나지만 하나씩 알아가며 조금씩 나를 채워나가는 모습에 이 모든 과정이 감사하다. 다음은 오늘 메모했던 내용인데, 너무 기본적이고 기초적이라 남기기 부끄러울 정도이나 추후에 내가 혼자서 하려면 아무것도 아닌 이야기부터 차근차근 남겨놔야 알아먹을 것 같아 이렇게 쓴다. 힘겹게 모인 나의 날들이 쌓여 어딘가 도움 되는 곳에 쓰일 수 있기를 :)
html : 움직임 요소 (시각적인 정보), 텍스트,
이미지(로고, 슬러건) _ 설계도면(정보)
css : 버튼 색깔, 폰트색상다르게적용, 공간 특정구역설정
디자인적 영역 _내부인테리어
javascript :
마우스 올렸을 떄 나타다는 효과
메뉴 클릭했을때 콘텐츠가 달라지는 '기능' 담당
_지문인식 등 기능
layer 종류
검색/ treehouse which layout (static liquid)
첫번째 나오는 링크(블로그?)클릭
web 사이트의 4가지 종류/데모들 클릭
1):정적인 웹사이트(과거)
공간의 크기가 변해도 레이아웃이 변화 x
2):동적인 웹사이트
레이아웃의 구조는 바뀌지 않으나 공간의 크기가
유동적으로
3):적응형 웹사이트
공간에 따라 사이즈 달라지고, 레이아웃 구조도변화
사용자의 웹 접속 기기가 다양해 져서 나타남
4)반응형 웹사이트
공간 바뀌면 자연스러운 리사이즈
특정 시점에서 모바일 버전으로 변하는
웹사이트 종류를 접할 수있음
국내사이트 : 디비컷 접속 / gdweb
등록되어있는 다양한 국내외 웹사이트 확인가능
해외사이트 :
awards
다양한 웹사이트 확인가능
- 전세계의 개발자, 디자이너, 기획자가 평가할 수 있음
우수평가 받으면 상을 받을 수도 있음 / 수상작 참고
mediaqueri.es
pc버전, 모바일버전 확인가능
bm.straightline.jp (all book mark 써져있는링크)
일본사이트 위주
*웹표준 / 웹 접근성
웹표준: html 언어를 사용해서 정보의 성격에 맞는 태그를 설정해
줘야한는데, 정확한 태그에 맞춰서 쓰는거
웹 접근성: 장애우를 고려
*FTP
결과물을 서버에 올려야 사람들이 볼 수 있는데
pc와 서버를 연결해주는 채널의 역할
*라이브러리
다른사람들이 만들 기능의 결과물
ex 탭메뉴 라이브러리, 팝업 라이브러리 ... 검색 후
사용법 익힌 후 웹 사이트 제작 할 수 있음
visual studio
sublimetext.com
검사 누르고 위는 html 아래쪽은 디자인영역 정보(css)
webstorm(유료)
- 독학 공부 채널
youtube :
생활코딩 / 코딩수업 web1 2 html, css,java시청
얄팍한 코딩사전
the new boston / html tutorial,
css tutorial(xhtml는 무시하고)
wes bos / javascript 30
text :
freecodecamp.org /
w3school (try it your self 누르고 연습)/
모던 자바스크립트 튜토리얼 (입문시엔 난이도있음)/
edwith/
- 서브 사이트
satecounter/ 전세계 웹사이트 점유율 알 수 있는 사이트
웹사이트 기획자, 고객이 explore 7 까지 맞워서 사이트 제작
해달라 했을때 브라우저 점유율 보고 클라이언트 설득가능
ex) 0.5%도 안되는 고객을위해서 만드는 것이 맞는지?
can i use/ 어떤 브라우저까지 가능한지 호환성
NULI / 웹사이트 제작 노하우 정리해놓은
CODEPEN/ 다른사람이 만든 코드 확인하고 공유할수있는
보고 내가 바로 쓸 수 있을듯,,
*html 문서
만들때 파일-뉴파일 : untitle
file - save - 확장명(주의)index.html/(ctl+ + 확대)
<!DOCTYPE html>
<head>는 간단한 정보가 담겨지는 영역
=웹사이트 요약정보 등
넣을 수 있는 요소
<body>
=웹사이트 화면 정보를 담아내는 영역
html은 태그로 구성
<열린태그> 주요텍스트정보 </닫힌태그>
<열린태그>
<열린태그></닫힌태그>
<닫힌태그>
<열린태그="속성값">
<열린태그></닫힌태그>
<닫힌태그>
몇몇태그는 닫힌태그가 없는 경우도 있음
<meta name="description" content="Web Tutorial">
: 간단 요약정보
<meta name="keywords" content="html, css, tutorial, Web">
: 웹사이트와 관련된 간단한 단어정보들
ps 블로그 키워드와 같은 의미 잘 달면 구글엔진에 뜰 확률 높아짐
<meta name="author" content="Jiwon Park">
사이트 만든사람 이름(포폴 등)
/ 외주 받았을 시 클라이언트 이름
<title>HTML, CSS Tutorial</title> 창에 뜨는 타이틀 변경
link 는 닫힌태그 없음
문서저장 ctl + s /alt +s
아이콘 만들떄 favicon
<a> 웹사이트에서 메뉴버튼 클릭했을 때 이동시키는것
<a href="https://www.naver.com/" target="_self">네이버</a>
: 현재 창에서 오픈
<a href="https://www.naver.com/" target="_blank">네이버</a> : 새창에서 오픈
*타겟 속성 없을 시 기본값으로 self 되어있음
1:44:20
git 강좌
https://youtu.be/JZJQ4_8XoPM
ing 태그에서 width/ height 비율 다르게 해도 사진은 잘리지 않음
alt 목적?
1. 시각장애인위해서
2. 이미지 자리에 어떤 정보가 들어갔는지 표시하기 위해서
정리?
클릭했을때 다른 페이지로 넘어가는 효과 a 태그
이미지 정보 넣을떄 img 태그
탭 메뉴제목넣는거 title
-> html 태그는 고유의 역할에 맞는. 정확히 입력하는 것을
웹 표준
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<!-- a, img 태그 소개 -->
```주석의 예
지금까지 태그를 끼워넣으면 지금까지의 것들이
띄지 않음. 오류 체크 시 혹은 중간중간 마킹 할 때 주석 사용
주석처리 주의점. 주석 안에는 주석 못넣음
(아래쪽 주석이 깨짐)
<h1>Title</h1> - 1)가장 중요한 정보를 담고있다
기업명또는 서비스명을 쓰는게 일반적
하나의 문서에서 한번만 사용된다.
회사로고 보통 메인페이지로 넘어가는 효과가 대부분
ex)
<h1>
<s href="http://www.naver.com/">
<img src="http://img.icons8.com/emoji/452/red-apple.png" alt=애플">
*
<h2>Title</h2>
<h3>Title</h3>
:service / portfolio / about = 홈페이지 동급 메뉴
<h1>Title</h4>
:<h1>service 부제</h4>
주의사항 : h3로 작성했다면 그다음 부제는 h4
그후 각각은 h5 순서대로 해야 함
본문정보 담을때쓰는 태그
p 태그
ex) <p>Nice to meet you<p>
띄어쓰기 여러개 해도 공백은 한칸으로 인식
태그 입력하고 탭버튼 누르면 자동완성
<spam> 태그 단편적으로 '단어'를 표현 할때
문장 안에서 특정 단어 디자인을 넣고자 할때
<mark> 배경색이 노란색
바꾸고싶으면 css에서 ..
list 태그
<ol>
order the list 순서 표기되는 리스트(예. 목차)
<ul> <li>
순서 없는 리스트(예. 우선순위 없는, 순서에영향을 받지 않는
홈페이지 메뉴 등 등급이 없는 경우)
<a>
주의) ol, ul 태그 안에는 무조건 <li>태그가 먼저 나와야 함
@ bootstrap agency
start bootstrap
@helpak
버튼
<button>클릭</button>
서비스 내에서 팝업 열기/닫기 등을 표시하는 태그
mark 태그와 동일한 디자인이 있으나, css에서 변경 가능
ex)
<button type="button">닫기</button>
<button type="button">확인</button>
데이터 통신으로 해야한다-> button, type으로 submit 지정
<button type="button">닫기</button>
<button type="submit">확인</button>
video 태그
ex)
<video src"sample.mp4" controls></video>
<video src"sample.mp4" controls autoplay></video>
<video src"sample.mp4" controls autoplay muted></video>
autoplay와 함께 사용하려면 muted가 필요
영상 반복재생하고싶다 -> loop
ex)
<video src"sample.mp4" controls
autoplay muted
loop></video>
width, height 사용하면 화면크기 조절 가능
ex)
<video src"sample.mp4" controls
autoplay muted
loop
with="300px"
height="300px"></video>
*youtube 영상 가져가고싶을때
공유-> 퍼가기-> 코드 copy and paste
<iframe>
*audio 파일 (sample audio)
<audio src="sample_audio.mp3" controls></audio>
<audio src="sample_audio.mp3" controls
autoplay muted></audio> : mute 해도 자동플레이 안됨.
<audio src="sample_audio.mp3" controls
autoplay muted loop></audio> : 반복재생
메인페이지는 index.html 로 작업한다. 기억할 것
2회차)
입력칸 생성
<label>이름</label>
<input type="text">
<label for="name">이름</label>
<input type="text" id="name">
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요" id="mail"> : placeholder 안내문구
필수정보에서는 required 꼭 기입
ex)
<label for="name">이름</label>
<input type="text" id="name" placeholder="이름을 입력하세요." required>
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요" id="mail" required>
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자, 최대 12글자" required>
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력">
* select : 옵션만 기입
<select name="job">
<option selected disabled>직업을 선택해 주세요.</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>
today's work
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
tr, td, th { border: solid 1px #000000; }
</style>
</head>
<body>
<!--
<form method="post">
<label for="name">이름</label>
<input type="text" id="name" placeholder="이름을 입력하세요." required
minlength="2" maxlength="8">
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요" id="mail" required>
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자, 최대 12글자" required
minlength="10" maxlength="15">
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력"
min="10" max="40" step="5">
<label for="upload"파일 업로드></label>
<input type="file" id="upload" accept="image/png, image/jpg, image/gif">
<button type="submit">제출</button>
</form>
-->
<!--
<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="country" value="중국">
--->
<!--
<label for="n1">한국</label>
<input type="radio" id="n1" name="country" value="한국" checked>
<label for="n2">일본</label>
<input type="radio" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="radio" id="n3" name="country" value="중국">
-->
<!--
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>
-->
<!--
<select name="job">
<option selected disabled>직업을 선택해 주세요.</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
--->
<!--
<table>
<caption>상품 정보</caption>
<thead>
<tr>
<th>상품</th>
<th>색상</th>
<th>가격</th>
</tr>
</thead>
</tbody>
</tr>
<td>맥북 프로 16인치</td>
<td>그레이</td>
<td>3000원</td>
</tr>
<tr>
<td rowspan="2">아이패드 프로 12인치</td>
<td>레드</td>
<td>1000원</td>
</tr>
<tr>
<td>블루</td>
<td>1000원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td= colspan="2"> 총 가격</td>
<td>5,000원</td>
</tr>
</tfoot>
</table>
</select>
</body>
</html>
--->
<!--
<header>
<h1>
<a href="#">
<img>
</a>
</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<main role="main">
</main>
<section>
<h2>service</h2>
</section>
<section>
<h2>service</h2>
</section>
<article>
<h2>article title</h2>
<p>Nice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet you</p>
</article>
</main>
<aside></aside>
<footer></footer>
<div></div>
</body>
</html>
--->
