드림코딩 by 엘리_프론트엔드 개발자 되기 입문편_HTML, CSS
HTML tag types
HTML에 tag가 아무리 많아도 2종류로 분류할 수 있다.
분류법을 보기전에 story로 이해력을 도와보자
예를 들어 이사를 간다고 했을때, 한꺼번에 모든 짐을 한박스에 넣는다면 이사를 가서 짐을 풀고 정리하기 굉장히 힘들다. 그래서 우리는 이사할 때 이이템들을 비슷한 것들 끼리 분류한다.
이렇게 정리하면 labeling이 쉬워진다.
그래서 우리는 box model을 이용해서 tag들을 관리하게 된다.
tag는 box와 item이 되는 것 둘 중 하나 이다.
사용자가 볼 수있는 item들이 있는가하면 이 item들을 잘 정리할 수 있도록 도와주는 sectioning을 도와주는 보이지 않는 box가 있다.
이렇게 보이지 않는 box 들은 당연히 나중에 CSS를 통해서 styling이 가능하다.
하지만 기본적으로 HTML 에서는 사용자에게 보여지지가 않는다.
웹 사이트는 해당 이미지처럼 로직컬하게 그룹을 나눠서 봐야한다.
간혹 이것을 <div> tag를 이용해서 무작위로 나눠서 하는 경우가 있는데 절대 그렇게 하면 안된다.
HTML 에서 표준화한 sementic tag들을 활용해서 나눠주는 것이 중요하다.
main content도 디자인에 따라서 여러가지 section들로 나눌 수 있는데
section 안에 article이 있다.
article은 여러가지 item tag들을 그룹화해서 재사용 가능한 것들을 모아져 있는 것을 말한다.
왼쪽 section에는 2개의 article이 있고,
그 article안에는 text가 2줄이 있고, icon이 2개가 있다.
이렇게 반복되고 재사용 가능한 것들을 묶어주는 것을 article 이라고 한다.
오른쪽 section에는 3개의 article이 있다.
Box tag는 sectioning이 나눠지는 것들을 가리키는 tag들을 말한다.
그리고 section 안에서도 article이 여러개가 들어갈 수 있고,
article은 조금 더 반복되는 재사용이 가능한 것들을 묶어놓은 것이고,
div는 흔하게 아무곳에서 사용 가능한 것이고, 묶어서 스타일링을 할 필요가 있을 때, 간혹 내가 text와 button을 묶어서 styling을 해줄때, div를 이용해서 묶을수 있다.
item tag는 사용자에게 보여지는 것들을 의미한다.
즉 tag들은 box가 되는것과 사용자에게 보여지는 item들이 되는 tag가 있는 것이다.
그리고 사용자에게 보여지는 item element들도 두 가지로 나눠서 생각해보면
나중에 CSS styling시 편하게 이해 가능한데,
바로 block과 inline으로 나뉠 수 있다.
block과 inline 옆에 배치되는 노란색 box를 살펴보면 배치가 서로 다르다는 것을 알수있다.
block 에는 충분한 공간이 있음에도 불구하고 그 다음 라인으로 들어가는게 보인다.
즉 block level 의 element는 한 줄에 하나를 말하고,
inline을 보면 옆에 충분한 공간이 있었기 때문에 바로 분홍색 tag 옆에 배치된다.
즉 inline level tag는 공간이 허용하면 다른 tag옆에 배치 가능하다.
태그라는 것은 <> 로 시작하고 /를 이용해서 끝낸다.
태그안에 들어가 있는것은 content가 되는데 시작하고 끝나는 이 태그하나를 element 라고 부르게 된다.
(즉 하나의 태그가 하나의 element가 된다.)
이것을 Node 라고도 부른다.
태그 안에는 attribute 라는 속성이 있다.
위 이미지에서 class의 의미는 class 라는것을 통해서 내가 원하는 클래스들을 어떤식으로 꾸밀지를 정하게 된다.
즉 같은 페이지의 다양한 버튼이라도 그 버튼이 어떤 클래스를 가지냐야 따라서 stlying이 다르다.
기본적인 행동들은 CSS를 통해서 수정된다.
자주 사용하는 tag
a tag (anchor tag)
<a> HTML 요소는 href 속성을 사용하여 웹 페이지, 파일, 이메일 주소, 동일한 페이지의 위치 또는 URL이 지정할 수 있는 모든 항목에 대한 하이퍼링크를 만든다.
각 <a> 내의 콘텐츠는 링크의 대상을 나타내야 한다.
href 속성이 있는 경우 <a> 요소에 초점을 맞춘 상태에서 Enter 키를 누르면 활성화된다.
a tag의 attributes
href
- 하이퍼링크가 가리키는 URL 이다.
- 우리가 링크하고 싶은 주소를 적는다.
target
- 링크된 URL을 브라우징 컨텍스트의 이름으로 표시할 위치
- 다음 키워드는 URL을 로드할 위치에 대해 특별한 의미를 갖는다.
- _self: 현재 브라우징 컨텍스트. (default)
- _blank: 일반적으로 새 탭이지만 사용자는 대신 새 창을 열도록 브라우저를 구성할 수 있다. 즉 새창에서 열기
<p>: The Paragraph element
문단을 정의시 사용
<p> HTML 요소는 단락을 나타낸다.
단락은 일반적으로 빈 줄 또는 첫 줄 들여쓰기로 인접한 블록과 분리된 텍스트 블록으로 시각적 미디어에서 표현되지만
HTML 단락은 이미지 또는 양식 필드와 같은 관련 콘텐츠의 구조적 그룹이 될 수 있다.
단락은 블록 수준 요소이며 특히 닫는 </p> 태그 전에 다른 블록 수준 요소가 구문 분석되면 자동으로 닫힌다.
콘텐츠를 단락으로 나누면 페이지를 더 쉽게 액세스할 수 있습니다.
화면 판독기 및 기타 보조 기술은 사용자가 다음 또는 이전 단락으로 건너뛸 수 있는 바로 가기를 제공하여 시각적 사용자가 공백을 통해 건너뛸 수 있는 방법과 같은 콘텐츠를 훑어볼 수 있도록 한다.
빈 <p> 요소를 사용하여 단락 사이에 공백을 추가하는 것은 화면 읽기 기술로 탐색하는 사람들에게 문제가 된다.
스크린 리더는 단락의 존재를 알릴 수 있지만 단락에 포함된 내용은 알릴 수 없다.
왜냐하면 단락이 없기 때문이다.
이것은 스크린 리더를 사용하는 사람을 혼란스럽게 할 수 있다.
List(ol vs ul)
<ol>: The Ordered List element
- <ol> HTML 요소는 순서가 지정된 항목 목록을 나타내며 일반적으로 번호가 매겨진 목록으로 렌더링된다.
- 일반적으로 순서가 지정된 목록 항목은 숫자나 문자와 같은 선행 마커와 함께 표시된다.
- <ol> 및 <ul> 요소는 원하는 만큼 중첩될 수 있으며 <ol>과 <ul> 사이를 원하는 대로 교대로 사용할 수 있다.
- attr로는 type이 있다. (MDN에서 확인가능)
<ul>: The Unordered List element
- <ul> HTML 요소는 일반적으로 글머리 기호 목록으로 렌더링되는 정렬되지 않은 항목 목록을 나타낸다.
- <ul> 요소는 숫자 순서가 없는 항목 모음을 그룹화하기 위한 것으로 목록의 순서는 의미가 없다.
- 일반적으로 순서가 지정되지 않은 목록 항목은 점, 원 또는 정사각형과 같은 여러 형태일 수 있는 글머리 기호로 표시된다.
- 글머리 기호 스타일은 페이지의 HTML 설명에서 정의되지 않고 연결된 CSS에서 list-style-type 속성을 사용하여 정의된다.
- 아이템을 정리할 때 가장 많이 사용하는 tag 이다.
<li>
- <li> HTML 요소는 목록의 항목을 나타내는 데 사용된다.
- 순서가 지정된 목록(ol), 순서가 지정되지 않은 목록(ul) 또는 메뉴(menu)와 같은 상위 요소에 포함되어야 한다.
- 메뉴 및 정렬되지 않은 목록에서 목록 항목은 일반적으로 글머리 기호를 사용하여 표시된다. (CSS에서 수정가능)
- 순서가 지정된 목록에서는 일반적으로 숫자나 문자와 같이 왼쪽에 오름차순 카운터와 함께 표시됩니다. (CSS에서 수정가능)
<input>: The Input (Form Input) element
<input>: The Input (Form Input) element
- 사용자에게 input을 받을 수 있기 때문에 브라우저에서 흔한게 쓰이는 tag 이다.
- 우리가 원하는 데이터를 사용자에게 요구해서 사용자에게 그 데이터를 받기 때문에 많이 사용된다.
- label과 같이 사용된다. label을 통해서 사용자에게 정확하게 어떤 정보를 원하는지를 명확하게 나타내주기 때문이다. label과 input를 그룹화 시켜준다.
- label과 input은 둘 다 inline level element 이다.
- input은 한 페이지안에 많이 사용될 수 있기 때문에 id를 통해서 고유한 식별자를 주게된다.
<input> types
- <input>이 작동하는 방식은 type 속성의 값에 따라 크게 달라진다.
- type 속성이 지정되지 않은 경우 defalut는 text 이다.
- 여러가지 type들이 있으니 MDN에서 확인하기