학습한 내용 중 어려웠던 점 또는 해결못한 것들
이게 그 전부 다 어려웠다고 하면 안되겠죠... 그치만 이거 너무 어렵고 뭐라는지 모르겠아요.
해결방법 작성
솔직히 이거 어디까지 이해했냐면 <열린태그></닫힌태그> 전까지 이해했는데 괜찮나요? 나중에는 다 이해해보도록 노력하겠씁니다
학습소감
웹 프로그래밍이라는 것 자체가 처음이고 해서 진짜 강의 들으면서 한귀로 듣고 한귀로 흘릴 정도로 너무 어려웠어요 근데 인간은 적응의 동물. 조만간 간단한 코딩은 뚝딱하고 만들고 있겠죠.. 아니 근데 있잖아요 저 이거 들으면서 임재범의 너를 위해 중 내 거친 생각과 불안한 눈빛과~~ 가 제 머릿속에서 계속 반복재생 되고 있었어요 진짜 그정도 어려웠다는거 알아주세요
학습한 내용
{웹사이트 제작에 필요한 기초 지식}
(웹사이트를 구성하는 단어)
마우스 커서를 올렸을때 비디오 재생, 메뉴를 클릭시 하단 콘텐츠 정보 바뀌는 움직이는 요소
-시각적인 정보(텍스트,이미지,로고,슬로건) : HTML
-버튼 색상, 폰트 색상 특정구역을 설정, 컨텐르를 꾸며주는: CSS
-마우스 커서를 올렷을 때 어떠한 효과, 메뉴를 클릭시 컨텐츠를 바꾸는 : JavaScript
[웹사이트를 구성하는 요소 3가지 : HTML, CSS, JavaScript]
{웹사이트 레이아웃 종류}
1. 정적인 웹사이트 2. 동적인 웹사이트 3. 적응형 웹사이트 4. 반응형 웹사이트
최근에는 특정 구역을 적응형, 반응형을 섞어서 진행, 위쪽은 적응형, 특정 영역만 리사이즈~~
1.static 특징
브라우저폭 줄이거나 키울때 공간에 대한 변화가 크게없다. 레이아웃구조 자체도 변화없음. 원래형태를 그대로 유지. [정적인 웹사이트]
2.liquid 특징
브라우저폭 줄였을때 공간의 크기가 리사이즈하고있고 브라우저 폭에 맞게 줄어들고 있다. 레이아웃 구조자체는 바뀌지않으나 공간의크기가 유동적으로 바뀜[동적인 웹사이트]
3.Adaptive 특징
브라으저 폭을 줄엿을때 끊겨나가면서 공간의 크기가 달라지고 있고 최종적 레이아웃 형태, 구조도 달라지고 있다. [적응형 웹사이트] 특정 시점에서 공간의 크기가 뚝뚝 바뀜.
4.Responsive 특징
브라우저 폭을 줄였을때 공간이 자연스럽게 리사이즈 되고 있고, 특정 지점에서 적응형과 마찬가지로 모바일 버전 레이아웃으로 형태가 바뀌고 있다.[반응형 웹사이트]
+다양한 웹사이트 종류를 볼 수 잇는 사이트
디비컷(국내 사이트)
-국내의 유명사이트
-다양한 웹사이트 형태
GD웹(국내 사이트)
-국내의 다양한 웹사이트 구경
awwwards (해외 사이트)
-국내외 여러 사이트 확인
-전세계의 개발자, 디자인, 기획자들이 보고 평가.
(우수평가를 받은 웹사이트는 상 수상)
mediaqueri.es (해외 사이트)
-pc,모바일 버전도 한 눈에 확인
bm.straightline.jp -all bookmarks (해외사이트)
-일본 위주 사이트
{웹사이트 개발 용어}
프론트 엔드
-웹사이트, 웹서비스 만들었을때 웹사이틀 제작하고 데이터통신(서버쪽) 연결을 진행, 버튼을 클릭했을때 다양한 인터렉션 효과를구현하는 개발자.
즉 사용자 보는 모든 화면의 페이지 개발.
백엔드
-사용자가 보지 못하는 뒷단의 영역
ex) 로그인할 때 아이디가 등록된 아이디인지, 비밀번호가 맞는지 확인, 또는 고객정보를 안전하게 관리,보관하는 개발자.
크로스 브라우징 용어
-웹사이트를 제작한다했을 때 크롬브라우저, 익스프롤러, 파이어폭스, 오페라, 멕, 사파리
다양한 브라우저에서 동일하게 출력. 기능 자체도 맞춰서 앞단 작업을 하는 것.
웹표준
정보의 성격에 맞는 태그를 사용해 작성
웹접근성
장애인분들이 사용하는데에 무리가 x
FTP
pc와 서버를 연결해주는 채널
라이브러리
웹사이트를 제작할때 텝메뉴 클릭시 콘텐츠가 바뀌는 효과, 이미지슬라이딩. 다른 사람이 만든 결과물으르 가져다 쓰는 것
{웹사이트 개발 도구}
vs code (비주얼 스튜디오 코드) (무료)
HTML, CSS, 자바스크립트 타이핑할때 사용하는 에디터
Sublime Text (서브라임 텍스트) (무료)
HTML, CSS, 자바스크립트, 웹 개발 작업할때 사용하는 에디터
WebStom (웹스톤) (유료)
+Chrome 설치
다른 브라우저와 다르게 프론던트 개발할떄 오류 체크, 개발코드를 확일할때 쉬움
(마우스 오른쪽버튼 > 검사 > Elements 클릭 > 왼쪽 : HTML 작성되어잇는 영역 / 오른쪽 : 특정영역을 클릭시 그와 관련된 디자인 정보 CSS
{독학으로 개발 공부할 수 있는 채널}
생활코딩-(web1 > web2 -CSS, JavaScript)
얄팍한 코딩사전-어려운 개발용어를 쉽게 입문자입장에서 해설.
the new boston(해외유튜버)-(HTML5 Tutorials Playlist, XHML and CSS Tutorials Playlist)
Wes Bos-(JavaScript30)
{텍스트 기반으로 공부}
freecodecamp(프리코드캠프)
W3school
모던 javacript (한국어) - 입문자가 하기엔 난이도 잇음
edwith(에드위드) -네이버에서 제작한 온라인강의, 무료,HTML CSS JavaScript 학습
{웹사이트를 제작할때 알아두면 좋은 서브 사이트}
statcounter-전세계 웹사이트 점유율확인
can i use-내가 사용하는 단어가 어떤 브라우저 버전에서 지원하는지 체크용도
NULI-웹사이트를 제작하는 다양한 노하우들을 정리해놓은 사이트
HTML Validation-HTML언어 코드 구조가 정말 웹표준, 접근성에 잘 작성되었는지 체크
codepen-다른사람이만든 결과물을 공유하고 확인
sublimetext 다운로드 > 바탕화면에 연습용 폴더 생성 / 저장할때 save , 문서저장 ctrl+s
HTML -태그로 구성
<열린태그></닫힌태그>
<열린태그> Hello World </닫힌태그>
<열린태그>
<열린태그></닫힌태그> (컨텐츠)
</닫힌태그>
상단 타이틀 이름 변경
title>HTML, CSS Tutorial / bootstrap agency /
h1>Title 6까지 입력
h1>기업명 또는 서비스명
h1>a href="https://www.never.com/">
img src=""https://img.icons8.com/emoji/452/red-apple.png"" alt="애플"/a>
/h1>
h3>service</h3
h4>srvice 부제</h4
h5>Commerce</h5
h5>Desigm</h5
h5>Security</h5
h3>portfolio</h3
본문 정보
{spen태그 단어만 표기, 문장 안에서 특정 언어의 디자인 적용
style>
p spen color : red; font-size: 20px; background-color: pink;
{
mark { background-color: gray;
{mark태그 특정 단어 강조 ex) 백과,국어사전
p>Nice to meet you</P (공백은 하나만 인식)
spen>사과</spen
p>
spen>동해물<spen과 백두산이 마르고닳도록
/p>
p><mark사과</mark는 사과 나무에서 나는 열매이다.<p
a href+"https://www.never.com/" taget="">네이버<a
<a href+"https://www.never.com/" taget='_self">네이버 (현재텝기준)
<a href+"https://www.never.com/" taget="_blank">네이버 (새텝기준)
<a href+"https://www.never.com/">네이버 (기본값으로 셀프가 들어가잇은)
body> 웹사이트를 접속했을때 보이는 정보를 담아내는 것.
<a href+"https://www.never.com/" taget="">네이버
<a href+"https://www.never.com/" taget='_self">네이버 (현재텝기준)
<a href+"https://www.never.com/" taget="_blank">네이버 (새텝기준)
<a href+"https://www.never.com/">네이버 (기본값으로 셀프가 들어가잇은)
이미지정보 넣을때
img src="apple.png" alt="사과 이미지" width="150px" height="80">
img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지">
-이미지 경로를 지웠을때
img src="" alt="사과 이미지" width="150px" height="80">
주석 : < !-- a, img 태그 소개 -->
{리스트 정보 보여줄때
ol>
li>메뉴1
/ol>
ul>
li>메뉴1
/ul>
ul>
li><a href="#".영화
/ul>
*** ul태그 안에는 항상 li태그 (ol태그도 마찬가지)
팝업 창 확인 닫기
button>닫기</button
button>확인</button
button type="button">닫기</button
button type="submit">확인</button
submit : 입력하는 칸에 정보를 입력할때 서버에게 전달
비디오
video src="sample.mp4" controls>
video src="sample.mp4" controls autoplay muted>자동재생
video src="sample.mp4" controls autoplay muted loop>반복재생
video src="sample.mp4" controls autoplay muted loop width="300px" height="300px"></videp영상크기
오디오
audio src="sample_audio.mp3" controls></audio
audio src="sample_audio.mp3" controls muted loop> 반복재생
상단탭에 나만의 로고 넣고싶을때 팝잇콘 이미지파일생성
naver favicon >오른쪽 버튼 이미지 다운로드 >저장위치 연습용 폴더
link ref="shortcut icon" type="image/icon" sizes="32*32"
href="favicon.ico"
이거 왜 앞에 < 이거 다 빼먹었냐면... 글 작성이 안되더라구요
