일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- 랜덤숫자
- TR
- HTML시맨틱
- 복합 선택자
- videoTag
- java
- imgtag
- audioTag
- rowspan
- maintext
- 공유
- colspan
- autoplay
- headings
- src
- atag
- HTML
- HTML_Semantic
- h1~h6
- explanation
- database
- HTML공유
- type
- href
- 부가가치세율
- HTML코드
- controls
- 본문태그
- HTML학습
- 목록태그
- Today
- Total
목록전체 글 (16)
MUMYEONG
목록(List)태그 웹페이지에서 내용을 일렬로 나열하거나 목록 형태로 지정하기 위해 사용한다. 웹페이지에서 내비게이션 바를 만들 때 주로 사용한다. 리스트의 종류에는 순서가 없는 목록(ul)과 순서가 있는 목록(ol) 태그가 있다. ol태그는 속성을 통해 순서타입을 변경할 수 있다. 1) ul(순서가 없는 목록) 코드 호랑이 사자 늑대 표범 치타 결과 2) ol(순서가 있는 목록) 코드 고래 돌고래 상어 물개 바다표범 결과 3) 중첩 목록 태그 코드 육상동물 호랑이 사자 늑대 표범 치타 바다동물 고래 돌고래 상어 물개 바다표범 결과 4) 속성(type) 모음 1 : 숫자(기본값) A : 알파벳 대문자 a : 알파벳 소문자 I : 로마숫자 대문자 i : 로마숫자 소문자 코드 숫자 숫자 숫자 알파벳(대) 알..
이미지태그 웹페이지에 이미지를 삽입하는 경우에 사용한다. 1) src 속성 이미지 파일의 경로 또는 URL을 넣는다. 2) alt 속성 이미지 파일이 없을 경우 표시된다. 3) width 속성 이미지의 너비를 지정한다. 4) height 속성 이미지의 높이를 지정한다. 코드 결과(이미지가 있는 경우) 결과(이미지가 없는 경우)
앵커(anchor)태그 브라우저 내의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 지정할 때 사용한다. 1) href 속성 이동하고 싶은 파일 또는 페이지의 위치(경로)를 값으로 넣으면 지정한 목적지로 이동할 수 있다. 웹페이지의 경우 아래의 예시처럼 웹사이트URL(https://thkim0627.tistory.com/)을 값으로 넣는다. 2) target 속성 _self : 링크를 클릭했을 때 웹페이지를 현재 탭에서 이동(기본 값) _blank : 링크를 클릭했을 때 웹페이지를 새로운 탭에서 이동 코드 티스토리: 태형이야기 (현재 탭에서 이동) 티스토리: 태형이야기 (새로운 탭에서 이동) 결과 이동 결과
본문(main text)태그 1) p 단락 (Paragraphs) 즉, 하나의 문단을 지정한다. 줄바꿈 없이 브라우저에 표시된다. 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt odio deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam. Amet, cupiditate magnam maxime id optio tempore sequi animi error? 결과 2) pre 태그 내의 작성된 내용은 그대로 브라우저에 표시된다. 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt..
제목(Headings)태그 제목 (Headings) 태그는 제목을 나타낼때 사용하며 h1부터 h6까지 크기별로 있다. h1>h2>h3>h4>h5>h6 순으로 제목의 크기와 중요도를 나타낸다. 현명하게 사용하는 방법은 검색엔진이 제목 (Headings) 태그를 중요한 의미로 받아들일 가능성이 커서 제목 이외에는 사용하지 않는 것이 좋다. 코드 나는 H1이다~~!! 나는 H2이다~~!! 나는 H3이다~~!! 나는 H4이다~~!! 나는 H5이다~~!! 나는 H6이다~~!! 결과
용어정의 클라이언트(Client) : 웹 사용자의 인터넷이 연결된 장치들에서 이용 가능한 웹에 접근하는 소프트웨어 또는 일반적으로는 브라우저 서버(Server) : 웹페이지, 웹사이트, 또는 애플리케이션을 저장하는 컴퓨터 HTTP(Hypertext Transfer Protocol) : 클라이언트와 서버가 서로 통신할 수 있게 하기 위한 통신규약 TCP(Transmission Control Protocol) : 서버와 클라이언트 상호 간의 데이터를 어떻게 전달되어야 하는지 정의하는 통신규약 DNS(Domain Name System Servers) : 웹사이트를 위한 주소록 동작순서 ①,② 사용자가 웹브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소 입력한다. ③ 입력한 URL 주소 중에 도메인 네임 부분..
시맨틱요소 정의 및 사용이유 정의 시맨틱(semantic) 요소란? 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다. 사용하는 이유 검색엔진최적화(SEO) : 웹사이트는 검색엔진의 노출이 매우 중요하다. 검색엔진이 검색을 수행할때 태그를 분석하는데 시맨틱태그를 사용하여 태그들의 의미가 분명해지면 검색엔진이 쉽게 구별할 수 있을것이다. 유지보수 및 가독성 : 아래의 잘못된 예시처럼 모든 태그들의 로 되어 있을경우 영역파악이 쉽지않다. 그래서 시맨틱태그를 사용하면 다른 작업자에게 코드를 공유해도 쉽게 영역을 파악할 수 있을것이다. 웹 접근성 : 아래의 옳은 예시처럼 시맨틱태그를 사용하여 의미있고 보기좋..
The Web Developer 부트갬프 2022 수업내용 메모 코드1 결과1 코드2 결과2 학습한 태그 제목 및 단락태그 ~ : 제목을 나타날때 사용하며 h1가장 중요한 제목을 의미 : 단락을 지정 : bold체를 지정 목록태그 : 순서있는 목록 : 순서없는 목록 이미지 및 앵커 태그 : 이미지 파일 경로 : 이미지 파일이 없을 경우 표시되는 문장 : 이동하고자하는 파일의 경로 기타태그 : 수평줄 삽입 : 줄바꿈(enter효과) : 위첨자 : 아래첨자