기술 창고/HTML(19)
-
[HTML] paragraph 텍스트
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia, velit vel repellendus modi perspiciatis doloremque temporibus numquam illo doloribus, rerum sit tempora reiciendis dicta ad laudantium ipsa excepturi quam esse. naver daum Lorem ipsum, dolor sit amet bbb Lorem ipsum, dolor sit amet italic Lorem ipsum, dolor sit amet small Lorem ipsum, dolor sit amet sup Lorem ipsum, dolor sit amet i..
2023.03.07 -
[HTML] Heading 태그
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 1 Heading 3 Heading 1 Heading 3 Heading 2 ~ : 제목을 지정하는 태그. h1이 가장 크며 h6이 가장 작다. ctrl + / 로 지정한 범위의 코드들을 주석처리할 수 있다. heading 태그는 사용 표준이 있다. 각 h 태그의 가장 근접한 하위의 태그들을 스킵하고 다른 하위의 태그를 먼저 사용하면 올바르지 않다. 예 : h1 태그 다음 h2 태그를 스킵하고 h3 태그를 사용한 경우 또한 h 태그와 다른 하위 h 태그 사이에 더 작은 하위 h 태그를 사용하는 것은 틀린 것은 아니지만 애매하다고 볼 수 있다. 예 : h1 태그와 h2 태그 사이에 h3 ..
2023.03.07 -
[HTML] 시멘틱 (semantic) 태그
Logo menu Sub Menu Main Menu article title article contents article title article contents article title article contents footer 시멘틱 태그 : 의미를 부여한 태그. , , : 앞서 div 태그 안에 id 속성으로 일일히 구분값을 지정해준 경우가 있는데, 이는 복잡한 페이지의 경우일 수록 매우 비효율적인 작업이다. 따라서 시멘틱 태그는 태그 자체에 의미를 부여하여 설정하는 태그이다. header 태그는 상단에 들어갈 내용, main 태그는 본문의 중요한 메인 내용들이 들어갈 태그, footer 태그는 하단의 정보들을 포함하는 태그이다. : 사이드 메뉴를 지정하기 위한 태그. : 내용 중에서 또다른 섹션 ..
2023.03.07 -
[HTML] div 태그로 그룹화
Logo menu Sub Menu Main Menu footer : 섹션 구역을 나누는 태그. 네이버나 다음과 같은 홈페이지를 보면 뉴스 섹션란, 검색란, 타이틀 로고란 등등 각각의 섹션 구역이 나눠져있고 기능마다 분할되고 할당되어있다. 이후에 css를 이 div 태그에 적용하는데 적용하려면 각 div 태그들을 구분할 수 있게 해주어야한다. 여기서는 id 속성을 통해 일일히 구분값을 지정해주었다. 이후에는 필요한 경우에만 id 혹은 class 속성으로 구분값을 줄 것이다. id="wrapper" : 모든 구현 구조들을 감싸는 최상단 div 태그를 뜻하는 id값 id="header" : 상단 구조 섹션을 담당하는 div id 값 id="content" : 메인 내용 구조 섹션을 담당하는 div id 값 i..
2023.03.07 -
[HTML] 텍스트 정의 요소들
텍스트 정의 요소들 문장 중 일부를 강조하고자 할 때 사용하는 태그들 문장 중 일부를 강조하고자 할 때 사용하는 태그들 HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. IR 기법을 사용하면 검색에 용이하다. 월드 와이드 웹을 창시한 팀버너스 리는 웹이란 '장애나 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간' 이라고 정의하였으며, 웹 컨텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. : 하나의 문단을 나타내는 태그. p 태그 이후의 코드 결과들은 개행되어 출력된다. : 기울여쓰기 처리하여 강조하는 태그. em 태그와는 다르게..
2023.03.07 -
[HTML] 태그 블록 인라인 요소
인라인 레벨 요소 구글 다음 강조 : href 속성에 적은 주소로 동작을 실행할 수 있는 태그. : 텍스트를 기울여쓰기 처리하여 강조하는 태그 shift + alt + 아래 방향키로 현재 커서가 위치한 코드를 그대로 복제하여 아래로 붙여넣기 할 수 있다. 범위를 지정해서 실행하면 범위만큼의 코드가 반영이 된다. 코드를 작성할 때에는 h1 태그 밑에 개행을 하여 a 태그와 em 태그를 사용하였지만 결과는 위의 이미지처럼 개행되지 않고 옆으로 붙여서 출력된다. 이것을 인라인이라고 한다. 작성한 코드가 그대로 반영이 되기 위해서는 pre 태그를 사용하거나 다른 방법을 사용해야한다.
2023.03.07