목록Front-end (9)
초오오오오오짜개발자의낙서장
Image 요소의 alt 속성
이미지의 alt 속성은 단순 부가 설명이 아니라 여러 중요한 기능을 가지는 속성. - 이미지를 로드할 수 없는 상황에서 대체 텍스트를 제공ex) 네트워크 문제로 이미지가 로드되지 않는 경우, alt 속성의 텍스트가 대신 표시되어 이미지의 의도를 전달할 수 있다. - 접근성 측면에서 큰 도움을 준다. ex)스크린 리더를 사용하는 시각 장애 사용자는 이미지를 직접 볼 수 없기 때문에, alt 속성을 통해 이미지의 내용을 음성으로 듣게 되어 웹 페이지 내 이미지 컨텐츠에 시각 장애 여부와 상관 없이 누구나 접근가능. - SEO 측면에서도 중요한 요소로 작용ex)검색 엔진은 이미지를 시각적으로 분석할 수 없기 때문에, alt 속성에 포함된 텍스트를 기반으로 이미지의 콘텐츠를 이해하고 이를 검색 결과에 반영함..
React Project - NewsList
1주일간 React를 공부하면서 마지막(?) 미니프로젝트로 뉴스 페이지를 구현했다. navLink와 Router를 이용해 카테고리별로 접속하게 만들고, https://newsapi.org/ 의 API 키를 발급받아 데이터를 가져왔다. 컴포넌트의 사용도 어느정도 감을 익혔지만 아직 많이 부족하다, pramas로 인자를 전달받는 것도 js문법 활용도 아직 미숙하다. html과 css 사용도 검색을 많이 하고 레퍼런스 참고도 많이 하였다. 겉으로 보기에도 많이 부족한점이 보이기 때문에 연습이 더 필요하다.
국비 교육으로 배운 html 과 css, JS 를 활용하여 간단한 계산기를 만들어 보았다. HTML과 CSS는 외워서 사용한다기 보다 검색을 통해 기능을 찾는게 많았고 JS의 경우 간단한 기능만 있어 추가적인 구글링이 필요치 않았다. http://wkdnffla3.dothome.co.kr/miniproject/calculate/222.html CalculatorC / * DEL 7 8 9 - 4 5 6 + 1 2 3 = 0 .wkdnffla3.dothome.co.kr
태그 제목 표시하기- 제목 텍스트 표현- 이 가장 큰것 이 가장 작음 태그 - 단락 만들기- 앞뒤에 줄바꿈이 있는 텍스트 덩어리- 로 표기 태그 줄 바꾸기 태그 - 분위기 전환을 위한 수평 줄 넣기- 수평줄을 삽입할때 사용- 가로선이 삽입되는데 css를 이용해 가로선을 없앨 수 있다. - 인용문 넣기- 다른 블로그나 사이트의 글을 인용할 경우 사용- 다른 텍스트 보다 안으로 들여 써진다. - 입력하는 그대로 화면에 표기하기- html 에서는 많은 공백을 입력하더라고 한개의 공백만 표시된다.- preformat의 줄임말이다. 굵게 표시하기- 눈으로는 두개다 강조 표기가 된다.- 화면 낭독기는 strong 이 강조 가 된다. 이탤릭체로 푝기하기- 기울여서 표기- em 은 emphasis..
호스팅 서버 준비하기 html로 웹 사이트를 만들고 그 내용을 다른 사람들이 볼수 있게 파일을 서버 컴퓨터로 옮겨서 호스팅을 해야한다.중요한 파일인 경우 사용자가 백업을 하거나 백업 시스템을 구축해야 한다. - 호스팅 서버의 종류 윈도우 서버 호스팅과 리눅스 서버 호스팅으로 분류윈도우 서버에서는 asp나 asp.net을 사용리눅스 서버에서는 php 프로그래밍 언어를 사용클라우드 서버를 사용한 클라우드 서버 호스팅도 사용 dothome 이라는 무료 호스팅을 제공하는 사이트를 이용 - FTP 프로그램 설치하기 서버에 파일을 올리고 내리기 위해선 FTP 프로그램이 필요하다.File Transfer Protocol의 약자이다.Filezilla를 사용한다. FileZilla는 클라용..
회원가입 페이지를 만드는 도중 이메일 인증 기능을 추가했다. 기존 회원가입 방식은 정보를 html 에서 form에 입력후 submit 하면 입력한 정보들이 모두 전달되는 방식이다. 입력해야 하는 정보는 아이디, 비밀번호, 비밀번호 확인, 이메일, 이메일 인증 이다. 설정에서 위 정보 모두 공란일시 입력하라고 알림이 뜨게 만들었더니 이메일 인증 버튼을 눌러도 위 정보 모두를 입력하라는 알림이 뜬다. 그래서 formaction 이라는 기능을 이용해 분리적용 해보려 한다. 정의 및 특징 태그의 formaction 속성은 폼 데이터(form data)가 서버로 제출될 때 입력 데이터를 처리할 파일의 URL을 명시함. 이 속성은 요소의 type 속성값이 “submit” 또는 “image”인 경우에만 사용할 수 ..
HTML 기본 문서 구조
- 태그는 "" 를 이용해 구분한다.- 예를들어 이미지를 삽입할때 image의 약자인 img를 사이에 넣어 로 만든다.- 어떤 태그를 어느때 사용해야하는지는 명세서에 나와있으니 명세서를 미리 작성해놓는다.태그는 소문자로 작성한다.- HTML 태그는 대 소문자를 구별하진 않지만 HTML5 표준 명세에서는 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사용을 권장한다.권장비권장`src = "image/first.jpg"> 여는 태그와 닫는 태그를 정확히 입력한다.- 여는 태그와 닫는 태그를 "반드시" 입력한다- 여는태그에서 닫는 태그 까지를 태그의 적용 범위로 인식한다.- 나 태그처럼 닫는 태그가 없기도 한다. 적당히 들여쓰기- HTML 태그는 기본 속성상 어러번 띄어쓰기를 하더라도 한칸의 공백으로..