너굴Dev

Link 적용 예 링크 명을 명확하게 접근성 높은 링크를 만들어야 함. 좋은 예 Download Firefox 나쁜예 Click here to download Firefox 다른 작성 팁 링크 텍스트의 일부로 URL을 작성 URL은 보기 흉함. 화면 판독기가 글자로 URL을 읽어낼 때 이상하게 들림 링크 텍스트에 "link"나 "links to"라고 쓰지마라 Screen readers 사용자들에겐 소음으로 느껴진다. 링크 라벨은 가능한 짧게 유지 전체 내용을 읽어야하는 screen reader 사용자을 짜증나게 함 동일한 텍스트의 여러 복사본이 서로 다른 위치에 연결되는 인스턴스 최소화 가능하면 상대 링크 사용하기 동일한 웹 사이트 내의 다른 위치에 연결할 때 가능한 한 상대 링크를 사용해야 한다(다른 ..

Document fragments(문서 조각) 문서 상단이 아닌 HTML 문서 내부의 특정 부분 Document fragments(문서 조각)에 링크 할 수 있다 링크를 시키고 싶은 태그에 id 속성을 넣어 주어야한다 일반적으로는 특정 헤드라인에 연결하는 것이 타당 Mailing address ... Want to write us a letter? Use our mailing address. Document fragments(문서 조각)를 단독으로 사용하여 동일한 문서의 다른 부분에 연결할 수 있다 The company mailing address can be found at the bottom of this page. 절대 URL과 상대 URL 절대 URL 웹에서 정의된 상대적인 위치. protocol..

URL 과 path 에 대한 기본 지침 URL (Uniform Resource Locator) 단순히 무언가가 웹상의 어디에 위치하는지 결정하는 하나의 텍스트 문자열 예 : https://www.mozilla.org/en-US/ URL은 파일들을 찾기위해 path를 이용 path는 파일이 파일 시스템 어디에 있는지 구체적으로 명시 이 디렉토리 구조의 root는 creating-hyperlinks 웹사이트를 로컬 단에서 다룰 때에는 전체 웹사이트가 모두 들어갈 수 있는 하나의 디렉토리를 가져야 한다. Root 안에 index.html 파일과 contacts.html 파일을 갖는다. 웹사이트 안에서 index.html는 홈 페이지 또는 랜딩 페이지가 된다. Root 안에는 두 개의 디렉토리가 있다. pdfs..

HTML Creating hyperlinks 하이퍼링크란 무엇인가? 하이퍼링크는 웹을 웹 다워보이도록 만들어 줌 문서들을 다른 문서들과 연결 원하는 다른 resource 들과 연결 URL은 HTML 파일, 텍스트 파일, 이미지, 텍스트 문서들, 비디오와 오디오 파일들, 그리고 웹상에서 존재할 수 있는 어느 것이라 할지라도 연결할 수 있다.링크의 구조 기본 링크는 요소 내에 링크로 바꾸려는 텍스트 (또는 기타 콘텐츠, 블록 수준 링크 참조)를 래핑하여 생성되고, href 속성이 사이트 주소가 포함된 링크를 준다. I'm creating a link to the Mozilla homepage. title 속성에 부가적인 정보를 더하기 title 속성 해당 페이지에 어떤 종류의 정보가 포함되어 있는지 ..

HTML - 중요와 강조 HTML에서 강조를 표시하기 위해 다양한 요소를 제공한다. 그중 몇가지를 살펴보자 중요(Emphasis) 단어에 강세를 두기 위해 이탤릭체로 표현하는 경향이 있다. I am glad you weren't late. I am glad you weren't late. I am glad you weren't late. 첫 문장은 상대가 늦지 않은 것에 대해 진심으로 안도하는 것처럼 들린다. 대조적으로, 두 번째 문장은 상대가 조금 늦게 도착한 것에대해 비꼬거나 짜증을 표현하는 것처럼 들린다. 이러한 경우 (emphasis) 요소를 사용 화면판독기에 인식되면 다른 톤의 목소리로 표현됨. 단순히 이탤릭체로 스타일링하기 위해 이 태그를 사용하는 것은 지양 스타일링을 위..

List Unordered (순서 없음) 정렬되지 않은 목록 : 항목의 순서가 중요하지 않은 항목 목록을 표시하는 데 사용 milk eggs bread hummus Ordered (순서 있음) 순서 있는 리스트 : 항목의 순서가 중요한 목록 Drive to the end of the road Turn right Go straight across the first two roundabouts Turn left at the third roundabout The school is on your right, 300 meters up the road 리스트 내부의 리스트(Nesting lists) Remove the skin from the garlic, and chop coarsely. Remove all th..

기본적인 것: 제목과 단락 HTML에서는 각 단락은 요소 안에 둘러싸여 있어야 한다. I am a paragraph, oh yes I am. 각 제목도 heading 요소 안에 둘려싸여 있어야 한다. I am the title of the story. heading 요소는 총 6개가 있다. , , , , , 구조화된 계층을 구현하기 한 이야기에서 은 이야기의 제목을 나타내고 는 각 장의 제목을 나타내고 는 각 장의 하위 절을 나타내는 형태로 구현한다. The Crushing Bore By Chris Mills Chapter 1: The dark night It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ... Chapt..

head 태그에 있는 HTML 메타데이터 head는 같은 페이지나, CSS의 링크, 파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함. HTML head란? This is my page 요소와 다르게, head의 내용는 페이지에 표시되지 않는다. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함하는 것이다. 제목 달기 요소는 문서의 title을 추가하기 위해 사용될 수 있다. 요소와 헷갈릴 수 있다. 요소는 일반적으로 페이지당 한 번 씩 사용되는데, 페이지 내용물의 제목이나 뉴스의 헤드라인을 표시하기 위해서 페이지를 열 때 브라우저에 표시된다. 은 (문서의 컨텐츠가 아니라) HTML문서 전체의 타이틀 표현하기 위한 메타데이..

HTML 문서의 구조 This is my page 문서 형식을 의미 요소 전체 페이지의 콘텐츠를 포함 기본 요소 요소. 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있다 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정 요소 페이지 제목이 설정되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용 페이지가 책갈피 될 때 페이지를 설명하는 데에도 사용 요소 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함 HTML 공백 아래 두 코드 스니펫은 동일 Dogs are silly. Dogs are silly..

빈 요소(Empty elements) 모든 요소가 위에 언급된 여는 태그, 내용, 닫는 태그 패턴을 따르는 것은 아님 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있음 속성(Attributes) 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용 속성을 사용할 때에는 아래 내용을 지켜야 한다. 1. 요소 이름 다음에 바로 오는 `속성`은 `요소 이름과 속성 사이에 공백`이 있어야 되고, `하나 이상의 속성`들이 있는 경우엔 `속성 사이에 공백`이 있어야 한다. 2. 속성 이름 다음엔 `등호(=)가 붙는다`. 3. 속성 값은 열고 닫는 `따옴표로 감싸야` 한다. 해당 자료는 MDN Web Doc을 기초로 작성되었습니다.