본문 바로가기

HTML

(6)
웹 접근성을 고려한 구성 웹 개발에 있어서 접근성이란, "사람들의 능력이 어느 정도 제한이 되어 있더라도 가능한 많은 사람들이 웹사이트를 사용할 수 있도록 하는 것이다" 라고 mdn에서 정의하고 있다. 보통 접근성이란 장애인을 돕기 위한 휠체어 접근과 같이 편의 시설을 성명하는 데에 많이 쓰이고 이러한 개념으로 웹 사이트로 확장될 수 있다. "그들의 하드웨어, 소프트웨어, 언어, 문화, 위치 또는 신체적 혹은 정신적 능력이 무엇이든지 간에, 웹은 근본적으로 모든 사람들을 위해 일하도록 설계되어 있습니다. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 인지 능력을 가진 사람들에게 접근할 수 있습니다." W3C - Accessibility Accessibility - W3C The power of the Web ..
html에서 자바스크립트 불러오기 - script async 와 defer의 차이점 HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 좋은지 async와 defer의 차이점을 알아두면 효율적으로 사용할 수 있다. head 안에 포함되어 있을때 html 읽기(title까지) - script 다운로드 - script 실행 - 나머지 html 읽기 먼저 사용자가 html 파일을 다운로드하였을 때 브라우저는 그것을 한줄한줄 분석한다. 그러다가 스크립트를 만나면 그 스크립트를 다운로드하여야 된다고 읽기 때문에 html을 파싱 하는 것을 잠시 멈추고 필요한 자바스크립트를 서버에서 다운로드하여서 이것을 실행한 다음 html을 다시 파싱 한다. 이 과정에서 만약 자바스크립트 파일이 크기가 큰 파일이라면 다운로드하는 시간이 길어지고 그동안 html이 파싱 되지 못하고 브라우저에 보이지 않는 불..
[HTML] 주요 태그 정리 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 이전 글에서 설명한 태그들을 제외하고 html의 태그들 중 통계적으로 가장 많이 사용되는 태그들을 정리해보았다. 통계는 생활코딩 html 수업에 제시되어 있는 아래의 웹사이트를 참고하였다. https://www.advancedwebranking.com/html/ The average web page from top twenty Google results Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency: www.advanced..
[HTML] 정보의 html, 의미론적인 태그 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 안녕하세요. 웹페이지를 공부하고 있는 초보 개발자입니다. : 글의 본문에 표현되진 않지만, 그 웹페이지 혹은 본문을 설명해주는 태그 charset : 캐릭터 셋의 약자로, 우리가 파일을 저장한 형식을 표시해주는 것으로 그 형식으로 화면에 표시할 수 있게 해 준다. ( 만약 'utf-8'의 형식으로 파일을 저장한다고 가정하면 저장하는 것을 인코딩, 그 저장한 형식으로 파일을 해석해서 읽는 것을 디코딩이라고 한다. ) name, content : 웹 페이지 상에서 표시되지는 않지만, 웹페이지에 대한 요약된 자료로도 이용가능하고, 검색될 때 그 요약자료로 쓰일 가능성이 높다. keywords : 웹페이지를 잘 설명하는 키워드들. 기계가 웹페이지를 분류..
[HTML] tag - form 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 아이디: 비밀번호: 주소: : 사용자로부터 정보를 입력받은 정보를 서버로 넘겨줄 수 있게 하는 부모 태그, 입력받은 정보를 어디로 넘겨 줄 것 인지 경로를 설정할 수 있다. : 사용자로부터 정보를 입력받을 수 있게 하는 태그 : 사용자로부터 문자정보를 입력받을 수 있는 태그 : 사용자로부터 문자정보를 입력받되 비밀번호형식의 특수문자 ' ˙ ' 로 표시되어 몇글자인지 알 수 있지만 무슨 문자인지 알 수 없게 입력되는 태그 : 입력한 정보를 서비스로 넘어가서 서버로 전송 할 수 있게 해주는 버튼 태그 name : 각각의 컨트롤에 어떤 정보인지 이름을 부여할 수 있는 태그 속성 text: password: textarea: default value v..
<프로젝트 1> habbit tracker 웹페이지 만들기 - 3. html, css 완성 및 api 설계 첫 번째 기간 : 2020.06.11 ~ 06.15 첫 주의 첫 번째 기간에는 html, css 를 완성시켰다. 아무래도 스파르타 코딩 클럽 수업에서는 프론트 보다는 백엔드 중심이기 때문이고 심지어 디자인적인 부분은 프론트엔드 개발자 의 일이기보단 웹 디자이너와 퍼블리셔의 영역으로 들어가서 거의 개념만 알고 자세히는 모르는 상태로 시작하기 때문에 보통 부트스트랩을 이용하기를 권장한다. 나도 처음에는 부트스트랩을 이용해서 만들어 봤으나 전공이 전공이니만큼 심미적 영역에서 쉽게 넘어가질 못했고 (ㅜㅜ ㅋㅋㅋㅋ) 그래서 결국 내가 직접 모든 걸 디자인하기 시작했다. 지금 하는 프로젝트의 본질이 디자인, html, css 로 시작되고 아니라 시간 투자를 길게 하고 싶진 않았기 때문에 아직도 마음에 안 드는 부분..