프론트엔드/HTML (7) 썸네일형 리스트형 HTML 07_이미지/비디오/오디오 태그 이미지 태그 태그는 HTML 문서에 이미지를 넣습니다. 위의 예제를 통해 요소의 사용법을 알 수 있습니다. 속성 src 필수이며, 이미지로의 경로를 지정합니다. alt 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 웹 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다. height 픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다. width 이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다. 절대경로 VS 상대경로 절대경로 리소스(이미지)의 절대경로는 말 그대로 절대적인 고유한 경로를 지정하는 것입니다. 웹 이미지 절대경로.. HTML 06_Inline/Block , 태그는 웹 페이지의 영역을 구분할 때 사용하는 태그 태그는 주로 분할을 하거나, 어떠한 태그를 담는 컨테이너의 역할을 함 태그는 block level 요소 태그는 특정 텍스트나 문장 영역을 담는 역할을 태그는 inline level 요소 -빨간색은 div태그 (컨테이너) , 노란색은 span태그 (특정아이템) Inline VS Block Element 모든 HTML 태그들은 각 태그의 용도에 따른 default display value(기본 표시 값)를 가진다. 이때 default display value는 블록 레벨 요소(Block-level Elements)와 인라인 레벨 요소(Inline-level Elements) 두 가지 범주로 나뉜다. 예를들면 태그는 블록 레벨 요소이고, 태그는 인라인 레.. HTML 05_SemanticTag Semantic Tag : 의미를 가지는 태그 ex) 태그는 페이지 제목이라는 의미를 갖고 있음. Semantic Tag 의 이점 검색엔진 최적화 (네이버, 구글같은 포털에서 검색을 했을 때 내가 만든 홈페이지가 상단에 올라올 가능성이 높음) 웹 접근성 향상 (화면 낭독기가 semantic tag를 더 강조해서 읽어주는 등) 코드 가독성 향상 페이지 레이아웃을 정의할 때는 그에 맞는 semantic tag를 사용해야 함! HTML Semantic Elements : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다. : 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현합니다. : 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 .. HTML 04_Tag ✏️ part 1 글꼴 태그 ~ Heading 웹 페이지의 제목 또는 부제목을 표현할 때 사용하며, 숫자가 작을 수록 큰 제목을 표시하는 데 사용합니다. Paragraph 하나의 문단을 표시할 때 사용합니다. Horizontal Rule 가로로 선을 긋는 태그입니다. (종료태그 없음) Break 줄바꿈 태그로 HTML에서 개행 역할을 합니다. (종료태그 없음) Italic 텍스트를 이텔릭체로 표시할 때 사용합니다. Emphasis 텍스트를 이텔릭체로 강조할 때 사용합니다. Bold 텍스트를 진하게 표시할 때 사용합니다. 텍스트를 진하게 강조할 때 사용합니다. ✏️ part 2 목록 태그 Ordered List 순서가 있는 목록을 표현할 때 사용합니다. type 속성으로 글머리 기호를 변경할 수 있다. U.. HTML 03_Emmet Emmet : HTML과 CSS에 자동완성 기능을 제공하여 코드 작성 시간을 단축시켜주는 확장 기능 HTML Emmet HTML 표준 구조 ! ! 입력 후 Tab키 : 간단하고 빠르게 HTML 기본구조를 만들어 줍니다. 자식노드 > div>ul>li 입력 후 Tab키 : >를 사용하여 자식 요소를 생성할 수 있습니다. 형제노드 + div>ul+ol+div 입력 후 Tab키 : +를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다. 반복하기 * div>ul>li*3 입력 후 Tab키 : *를 사용하여 요소를 반복해서 생성할 수 있다. 클래스 부여 . div.title 입력 후 Tab키 : CSS 클래스를 갖을 요소를 생성할 수 있다. (기본이 div 이기 때문에 생략가능) 아이디 # #ite.. HTML 02 _ HTML의 구조 [HTML이란 무엇인가?] - html은 hyper text markup language 로, 태그로 이루어진 마크업 언어라고 생각하면 된다. - vscode에서 새 창을 만들고 '!' + 'tab' or 'enter' 을 누르면 기본적인 코드들은 자동으로 작성이 된다. - 와 태그가 보일텐데, 태그는 웹 브라우저에 표시되지 않는 태그이고 태그는 실제로 웹 브라우저에 표시되는 태그이다. - 내가 작성한 웹 브라우저는 파일 우클릭 -> open with live server 으로 창을 열 수 있다. - 태그 안에 태그를 설정하고 태그의 contents를 작성하면 그 contents는 새로 생성한 웹 브라우저의 이름이 된다. ex) hello - 실제로 웹 페이지 상에 표시되는 내용들은 태그에 작성한다. [.. HTML 01 _ 웹 개발의 기초 [웹 개발의 기초] HTML은 자동차의 툴, CSS는 자동차의 외관, Java Script는 자동차를 움직이는 동력이라고 생각하면 된다. HTML과 CSS는 visual studio code를 설치해 실행할 수 있다. vscode를 설치했다면 앞으로 html css 코드를 짤 때, 좀 더 편리하게 짤 수 있도록 하는 확장 프로그램을 설치하는 것이 좋다. vscode 맨 왼쪽 탭에서 블록처럼 보이는 5번째 '확장' 아이콘을 선택하면 위와 같이 검색 탭이 뜬다. 아래의 확장 프로그램을 하나씩 검색해서 설치해주면 끝이다. [vs code의 확장 프로그램] Korean language pack : 한국어로 볼 수 있게 해주는 패키지 bracket pair colorize : 여러 개의 괄호가 겹쳐있을 때 색을 .. 이전 1 다음
