YoonStudyNote

안에서 사용하는 태그들은 HTML 문서의 구조를 나타낸다. 1. DIV(막 쓰는 태그) 의 'div'는 division의 약자로 분할을 뜻하고 문서의 부분이나 섹션을 정의한다. 명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위를 묶는 용도로 사용한다. 보통 이렇게 묶인 부분들에 CSS나 JS를 적용하게 된다. 2. IMG(이미지 넣는 태그) 는 HTML에 이미지를 삽입할 때 사용한다. 웹 페이지에 이미지를 삽입하는 방식은 크게 2가지로, 'HTML에서 삽입(IMG)'와 'CSS에서 삽입(background)'가 있다. 속성 의미 값 src (필수) 이미지의 URL URL alt (필수) 이미지의 대체 텍스트(alternate)를 지정 3. 웹 표준 검사하기 우리가 작성한 HTML 문서가..

안에서 사용하는 태그들은 HTML 문서의 정보를 가지고 있다. 1. TITLE(웹 페이지의 제목) HTML 문서의 제목을 정의한다. 웹 브라우저의 각 사이트 탭에서 이름으로 표시된다. 2. META(웹 페이지의 정보) HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공한다. 빈(Empty) 태그이다.

1. index.html 같은 HTML 파일을 우리는 HTML 문서라고 표현할 수 있다. HTML 문서의 범위를 나타내는 태그를 알아보자. 문서의 구조 Head부분도 물론 정보가 출력되긴한다. 하지만 body가 더 주요 부분이고 head가 출력이 되게 하기위해서 만들어진 용도는 아니다. 2. DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의한다. 이는 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려준다. (HTML은 크게 1,2,3,4,X-,5 버전이 있다.) 현재의 표준 모드는 HTML5 이다.

HTML에는 닫히는 개념이 없는 태그들이 있다. 다음과 같은 형태를 가진다. HTML5에서는 위 2가지 형태를 다 사용할 수 있는데, XHTML 버전이나 린트(Lint)환경 혹은 프레임워크 세팅에 따라 "/"를 사용하는 것이 필수가 될 수 있다. 빈태그들은 닫히는 태그가 없기 때문에 범위가 존재하지 않는다. 이 태그가 위치하고 있는 그부분에서 무언가를 해결해야하는 그런 용도로 대부분 쓰인다. 그러다 보니까 태그가 가지고 있는 그런 의미보다, 그 의미를 확장해서 쓸 수 있는 "속성 = 값"의 형태가 거의 대부분의 경우가 빈 태그에 포함되게 된다. --> 어떤 형태를 써야 한다는 갑론을박이 있는데 이는 실제론 중요하지 않다. 원하는 형태를 사용하되 혼용은 하면 안된다.

태그A가 태그B의 콘텐츠를 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 한다. 과일 목록 사과 딸기 바나나 오렌지 과일 목록 사과 딸기 바나나 오렌지 안에는(콘텐츠) , ,가 있고 안에는(콘텐츠) 가 있다. 이러한 구조에서 section은 h1과 ul의 부모요소이다. 또한 ul은 li의 부모 요소이다. 반대로 h1과 ul은 section의 자식요소이다. 또한 li는 ul의 자식요소이다. 여기서 ul은 section의 자식 요소이면서 li의 부모 요소이다. 이처럼 부모와 자식 요소는 상대적인 개념이다. 우리가 기본적인 가계도를 통해서 할아버지, 엄마, 삼촌, 형제 같은 호칭을 정의하듯, HTML의 구조도 위와 같은 개념으로 호칭을 정의해서 추후 선택자를 통해 CSS와 JS로 H..

태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다. 홍길동 홍길동 는 이미지를 삽입할 때 사용하는 태그이다. 하지만 태그만 사용하면 어떤 이비지를 삽입하는지 알 수 없기 때문에 src(source)라는 속성을 사용해서 삽입할 이미지의 경로를 지정한다. 그리고 alt(alternative)라는 속성은 다양한 이유에서 이미지가 삽입되지 못했을 경우에 대신에서 나타나는 글자이다. div는 division이며 는 의미를 가지지 않는 태그로 어떤 내용이든 묶어낼(Wrap) 수 있다. 위에선 '홍길동' 이라는 텍스트를 묶었으나 그 내용이 무엇을 의미하는지 알 수 없기 때문에 name이라는 태그 별명(class)를 추가했다. -->img와 같이 닫히는 태그가 없으면 빈태그라고 부른다.

기본형태 HTML이나 CSS는 단순하게 구조를 나타내거나 스타일링을 하는것이기 때문에 엄청 문법이 간단하다. 태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다. 태그와 요소는 같은것이며 굳이 나눌 필요는 없다. 하지만 정확한 의미는 다르긴하다. //이것을 통틀어서 요소라고 한다. (Element) CONTENT //앞에는 열리는 태그이고 뒤는 닫히는 태그이다. 토끼와 거북이 옛날 옛적에 토끼와 거북이가 경주했다... 토끼와 거북이 옛날 옛적에 토끼와 거북이가 경주했다...

크로스 브라우징이란? 크로스 브라우징(Cross Browsing)은 조금 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법 등을 말한다. 대부분의 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제 되는 경우가 적지만, MSIE 브라우저는 여러 의미에서 표준화하기 쉽지 않은 브라우저이다. 그래서 IE에서도 동작하는 것을 크로스 브라우징이라고 부르기도 한다. 웹 접근성이란? 정상적인 웹 콘텐츠 사용이 가능한 일반 사용자로부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법을 말한다. 청각 장애인들을 위해 영상 자막을 넣거나, 마우스를 사용..

1. 태그에 직접 작성하기(인라인) 이방법은 HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않는다. 태그에 직접 작성1 단점으로는 우리가 직접 찾아서 값을 넣어줘야하는데 만약 넣어줘야하는 값이 많아지면 곤란해진다. 그래서 최대한 피해야한다. 그리고 수정하는데에도 굉장히 비효율적이다. 그렇다고헤서 이것 자체는 나쁜 방식은 아니다. 2.HTML에 포함하기(내장) --> embeded방식 CSS만 따로 작성하기 때문에 선택자가 필요하다. CSS코드가 HTML의 안에 포함되어 있다. (style태그는 head태그안에 설정을하는 속성이다.) HTML에 포함1 HTML에 포함2 HTML에 포함3 3. HTML 외부에서 불러오기 (link) 외부에서 문서를 가져오는 방식이다. CSS 코드를 완전히 분리할 수..

웹 표준 검사하기 우리가 작성한 HTML 문서가 표준에 부합하는지 테스트를 해볼 수 있습니다. W3C validator에 접속하여 작성한 HTML 문서를 업로드하고 테스트를 시작하세요! 기본적인 표준 여부를 판단할 수 있습니다. 특히 입문자라면 익숙해질 때까지는 자주 확인하는 것이 좋습니다. 위에서 라고 작성했을 때 나오는 결과입니다. HTML 문서를 작성하면서 지켜야하는 이러한 규칙들이 많이 있습니다. 테스트 통과가 웹 표준/웹 접근성의 준수 여부를 최종적으로 결정하진 않습니다. 이 테스트는 사실 기본 문법 검사에 가깝습니다. 또는 사이트(페이지) 주소로 검사할 수도 있습니다. 다음은 naver.com을 검사한 결과입니다.